ai works

features/todopage.feature

@@ -1,21 +1,33 @@
-@todo
-Feature: Todo Page
+Feature: Todo List Management
 
-  Background:
-  Given I am on todo page
+ Background:
+ Given I am on the Todo page
 
- Scenario: Empty list
- Then visible todos count is 0
- And page screenshot matches previous one
+ Scenario: Create a new todo item
+ When I create a new todo item with text "Buy groceries"
+ Then I should see the following todo items:
+ | Buy groceries |
 
- Scenario: Add todos
- When I add todo "foo"
- And I add todo "bar"
- Then visible todos count is 2
+ Scenario: Complete a todo item
+ When I create a new todo item with text "Read a book"
+ And I complete the todo item with text "Read a book"
+ Then I should see the following todo items:
+ | Read a book |
 
- Scenario: Complete todos
- When I add todo "foo"
- And I add todo "bar"
- And I complete todo "bar"
- And I filter todos as "Completed"
- Then visible todos count is 1
+ Scenario: Filter completed items
+ When I create a new todo item with text "Walk the dog"
+ And I create a new todo item with text "Water the plants"
+ And I complete the todo item with text "Walk the dog"
+ And I filter to see only completed items
+ Then I should see the following todo items:
+ | Walk the dog |
+
+ Scenario: Filter completed items with multiple completed items
+ When I create a new todo item with text "Go for a run"
+ And I create a new todo item with text "Write code"
+ And I complete the todo item with text "Go for a run"
+ And I complete the todo item with text "Write code"
+ And I filter to see only completed items
+ Then I should see the following todo items:
+ | Go for a run |
+ | Write code |

package.json

@@ -9,7 +9,7 @@
  "watch:pw": "playwright test --ui",
  "watch": "run-p watch:*",
  "report": "npx playwright show-report",
- "steps": "npx bddgen export"
+ "export": "npx bddgen export"
  },
  "devDependencies": {
  "nodemon": "^3.0.1",

playwright.config.ts

@@ -1,29 +1,12 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig } from '@playwright/test';
 import { defineBddConfig } from 'playwright-bdd';
 
 const testDir = defineBddConfig({
+ paths: ['./features/todopage.feature'],
  importTestFrom: 'steps/fixtures.ts',
- paths: ['./features'],
- require: ['steps/*.ts'],
- quotes: 'backtick',
- featuresRoot: './features',
 });
 
 export default defineConfig({
  testDir,
  reporter: 'html',
- use: {
- screenshot: 'only-on-failure',
- baseURL: 'http://localhost:3000',
- },
- projects: [
- {
- name: 'chromium',
- use: { ...devices['Desktop Chrome'] },
- },
- {
- name: 'firefox',
- use: { ...devices['Desktop Firefox'] },
- },
- ]
 });

steps/TodoPage.ts

@@ -1,49 +1,37 @@
-import { Locator, Page, expect } from '@playwright/test';
-import { Fixture, Given, When, Then } from 'playwright-bdd/decorators';
-import type { test } from './fixtures';
+import { Page, expect } from '@playwright/test';
+import { Given, When, Then, Fixture } from 'playwright-bdd/decorators';
+import { DataTable } from '@cucumber/cucumber';
 
-export
-@Fixture<typeof test>('todoPage')
-class TodoPage {
- readonly inputBox: Locator;
- readonly todoItems: Locator;
+export @Fixture('todoPage') class TodoPage {
+ private page: Page;
 
- constructor(public page: Page) {
- this.inputBox = this.page.locator('input.new-todo');
- this.todoItems = this.page.getByTestId('todo-item');
+ constructor(page: Page) {
+ this.page = page;
  }
 
- @Given('I am on todo page')
- async open() {
- await this.page.goto('https://demo.playwright.dev/todomvc/');
+ @Given('I am on the Todo page')
+ async navigateToTodoPage() {
+ await this.page.goto('https://demo.playwright.dev/todomvc/#/');
  }
 
- @When('I add todo {string}')
- async addToDo(text: string) {
- await this.inputBox.fill(text);
- await this.inputBox.press('Enter');
+ @When('I create a new todo item with text {string}')
+ async createTodoItem(text: string) {
+ await this.page.getByPlaceholder('What needs to be done?').fill(text);
+ await this.page.getByPlaceholder('What needs to be done?').press('Enter');
  }
 
- @When('I complete todo {string}')
- async completeTodo(hasText: string) {
- const checkbox = this.todoItems.filter({ hasText }).getByRole('checkbox');
- if (!await checkbox.isChecked()) {
- await checkbox.click();
- }
+ @When('I complete the todo item with text {string}')
+ async completeTodoItem(text: string) {
+ await this.page.getByTestId('todo-item').filter({ hasText: text }).getByLabel('Toggle Todo').check();
  }
 
- @When(/I filter todos as "(All|Completed)"/)
- async filterTodos(name: 'All' | 'Completed') {
- await this.page.getByRole('link', { name }).click();
+ @When('I filter to see only completed items')
+ async filterCompletedItems() {
+ await this.page.getByRole('link', { name: 'Completed' }).click();
  }
 
- @Then('visible todos count is {int}')
- async checkVisibleTodosCount(count: number) {
- await expect(this.todoItems).toHaveCount(count);
+ @Then('I should see the following todo items:')
+ async verifyTodoItemsVisible(itemList: DataTable) {
+ await expect(this.page.getByTestId('todo-title')).toHaveText(itemList.raw().flat());
  }
-
- @Then('page screenshot matches previous one')
- async matchScreenshot() {
- await expect(this.page).toHaveScreenshot();
- }
-}
+}