참고소스 수정본

참고/playwright-main/examples/todomvc/tests/todo-creation/add-multiple-todos.spec.ts

@@ -0,0 +1,49 @@
+// seed: tests/seed.spec.ts
+
+import { test, expect } from '../fixtures';
+
+test.describe('Todo Creation', () => {
+  test('Add multiple todos', async ({ page }) => {
+    // 1. Navigate to the TodoMVC application
+    // Expect: The page loads with an empty todo list
+    await expect(page.getByRole('textbox', { name: 'What needs to be done?' })).toBeVisible();
+    const newTodoInput = page.getByRole('textbox', { name: 'What needs to be done?' });
+
+    await test.step('Add first todo', async () => {
+      // 2. Add first todo 'Buy groceries' by typing and pressing Enter
+      await newTodoInput.fill('Buy groceries');
+      await newTodoInput.press('Enter');
+      // Expect: The first todo appears in the list
+      await expect(page.getByText('Buy groceries')).toBeVisible();
+    });
+
+    // 3. Add second todo 'Walk the dog' by typing and pressing Enter
+    await test.step('Add second todo', async () => {
+      await newTodoInput.fill('Walk the dog');
+      await newTodoInput.press('Enter');
+      // Expect: The second todo appears in the list below the first
+      await expect(page.getByText('Walk the dog')).toBeVisible();
+    });
+
+    // 4. Add third todo 'Read a book' by typing and pressing Enter
+    await test.step('Add third todo', async () => {
+      await newTodoInput.fill('Read a book');
+      await newTodoInput.press('Enter');
+      // Expect: The third todo appears in the list below the second
+      await expect(page.getByText('Read a book')).toBeVisible();
+    });
+
+    // Post Conditions: All three todos are visible in the list
+    await test.step('Post Conditions: Verify all todos are visible', async () => {
+      await expect(page.getByText('Buy groceries')).toBeVisible();
+      await expect(page.getByText('Walk the dog')).toBeVisible();
+      await expect(page.getByText('Read a book')).toBeVisible();
+    });
+
+    // Post Conditions: The todo counter shows '3 items left'
+    await expect(page.getByText('3 items left')).toBeVisible();
+
+    // Post Conditions: All todos are in active (unchecked) state
+    await expect(page.getByRole('listitem').filter({ hasText: 'Buy groceries' }).getByLabel('Toggle Todo')).not.toBeChecked();
+  });
+});

참고/playwright-main/examples/todomvc/tests/todo-creation/add-single-todo.spec.ts

@@ -0,0 +1,32 @@
+// seed: tests/seed.spec.ts
+
+import { test, expect } from '../fixtures';
+
+test.describe('Todo Creation', () => {
+  test('Add a single todo', async ({ page }) => {
+    // 1. Navigate to the TodoMVC application
+    // Expect: The page loads with an empty todo list and input field 'What needs to be done?' is visible
+    await expect(page.getByRole('textbox', { name: 'What needs to be done?' })).toBeVisible();
+
+    // 2. Type 'Buy groceries' into the input field
+    await page.getByRole('textbox', { name: 'What needs to be done?' }).fill('Buy groceries');
+    
+    // Expect: The text appears in the input field
+    await expect(page.getByRole('textbox', { name: 'What needs to be done?' })).toHaveValue('Buy groceries');
+
+    // 3. Press Enter to submit the todo
+    await page.keyboard.press('Enter');
+    
+    // Expect: The todo 'Buy groceries' appears in the list
+    await expect(page.getByText('Buy groceries')).toBeVisible();
+    
+    // Expect: The input field is cleared
+    await expect(page.getByRole('textbox', { name: 'What needs to be done?' })).toHaveValue('');
+
+    // Post Condition - The todo counter shows '1 item left'
+    await expect(page.getByText('1 item left')).toBeVisible();
+
+    // Post Condition - The new todo is unchecked (active state)
+    await expect(page.getByRole('checkbox', { name: 'Toggle Todo' })).not.toBeChecked();
+  });
+});

참고/playwright-main/examples/todomvc/tests/todo-creation/add-todo-special-chars.spec.ts

@@ -0,0 +1,21 @@
+// seed: tests/seed.spec.ts
+
+import { test, expect } from '../fixtures';
+
+test.describe('Todo Creation', () => {
+  test('Add todo with special characters', async ({ page }) => {
+    // 1. Navigate to the TodoMVC application
+    // Expect: The page loads with an empty todo list
+    await expect(page.getByRole('textbox', { name: 'What needs to be done?' })).toBeVisible();
+
+    // 2. Type 'Buy @groceries & supplies (urgent!)' into the input field and press Enter
+    await page.getByRole('textbox', { name: 'What needs to be done?' }).fill('Buy @groceries & supplies (urgent!)');
+    await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter');
+
+    // Expect: The todo appears in the list with all special characters preserved
+    await expect(page.getByText('Buy @groceries & supplies (urgent!)')).toBeVisible();
+
+    // Post Condition: The todo counter shows '1 item left'
+    await expect(page.getByText('1 item left')).toBeVisible();
+  });
+});

참고/playwright-main/examples/todomvc/tests/todo-creation/prevent-empty-todo.spec.ts

@@ -0,0 +1,23 @@
+// spec: Todo Creation - Prevent adding empty todo
+// seed: tests/seed.spec.ts
+
+import { test, expect } from '../fixtures';
+
+test.describe('Todo Creation', () => {
+  test('Prevent adding empty todo', async ({ page }) => {
+    // Step 1: Navigate to the TodoMVC application
+    // Expect: The page loads with an empty todo list
+    await expect(page.getByRole('textbox', { name: 'What needs to be done?' })).toBeVisible();
+
+    // Step 2: Click into the input field without typing anything and press Enter
+    // Expect: No todo is added to the list
+    await page.getByRole('textbox', { name: 'What needs to be done?' }).click();
+    await page.keyboard.press('Enter');
+
+    // Post Conditions: The todo list remains empty
+    await expect(page.locator('.todo-list li')).toHaveCount(0);
+
+    // Post Conditions: The input field is still focused and empty
+    await expect(page.getByRole('textbox', { name: 'What needs to be done?' })).toHaveValue('');
+  });
+});

참고/playwright-main/examples/todomvc/tests/todo-creation/prevent-whitespace-todo.spec.ts

@@ -0,0 +1,20 @@
+// spec: Todo Creation - Prevent adding whitespace-only todo
+// seed: tests/seed.spec.ts
+
+import { test, expect } from '../fixtures';
+
+test.describe('Todo Creation', () => {
+  test('Prevent adding whitespace-only todo', async ({ page }) => {
+    // 1. Navigate to the TodoMVC application
+    // Expect: The page loads with an empty todo list
+    await expect(page.getByRole('textbox', { name: 'What needs to be done?' })).toBeVisible();
+
+    // 2. Type only spaces '   ' into the input field and press Enter
+    // Expect: No todo is added to the list
+    await page.getByRole('textbox', { name: 'What needs to be done?' }).fill('   ');
+    await page.getByRole('textbox', { name: 'What needs to be done?' }).press('Enter');
+    
+    // Verify no todo was added (todo list remains empty)
+    await expect(page.getByRole('listitem')).toHaveCount(0);
+  });
+});