Playwright Data-Driven Kanban Assessment

This project is a Playwright test suite written in TypeScript for the demo Kanban app:

• Demo App: https://animated-gingersnap-8cf7f2.netlify.app/
• Username: admin
• Password: password123

The suite is data-driven. Test scenarios are defined in test-data.json, and the spec dynamically generates one test per JSON entry to avoid duplication and keep the suite scalable.

Tech Stack

• Playwright
• TypeScript
• Page Object Model (POM)
• Playwright fixtures
• JSON-driven test data

Project Structure

.
├── fixtures/
│   └── fixtures.ts
├── pages/
│   ├── BasePage.ts
│   ├── KanbanPage.ts
│   └── LoginPage.ts
├── tests/
│   └── kanban.spec.ts
├── test-data.json
├── playwright.config.ts
└── .env

Covered Scenarios

The suite validates these required scenarios:

1. Web Application → Implement user authentication in To Do with tags Feature, High Priority
2. Web Application → Fix navigation bug in To Do with tag Bug
3. Web Application → Design system updates in In Progress with tag Design
4. Mobile Application → Push notification system in To Do with tag Feature
5. Mobile Application → Offline mode in In Progress with tags Feature, High Priority
6. Mobile Application → App icon design in Done with tag Design

Why This Is Data-Driven

• test-data.json stores the test inputs.
• tests/kanban.spec.ts loops over that JSON and creates one Playwright test per case.
• Adding a new scenario only requires adding a new JSON object, with no need to duplicate test logic.

Setup

Install dependencies:

npm install

Run Tests

Run all tests headless:

npm test

Run all tests in headed mode:

npx playwright test --headed

Run in debug mode:

npm run test:debug

Open the Playwright HTML report:

npm run test:report

Notes

• Configuration values are loaded from .env.
• Login credentials and base URL are parameterized through environment variables.
• The implementation uses page objects and fixtures to keep the test code clean and maintainable.