import { test, expect, type Page } from '@playwright/test'; test.beforeEach(async ({ page }) => { await page.goto('https://demo.playwright.dev/todomvc'); }); const TODO_ITEMS = [ 'buy some cheese', 'feed the cat', 'book a doctors appointment' ]; test.describe('New Todo', () => { test('should allow me to add todo items', async ({ page }) => { // create a new todo locator const newTodo = page.getByPlaceholder('What needs to be done?'); // Create 1st todo. await newTodo.fill(TODO_ITEMS[0]); await newTodo.press('Enter'); // Make sure the list only has one todo item. await expect(page.getByTestId('todo-title')).toHaveText([ TODO_ITEMS[0] ]); // Create 2nd todo. await newTodo.fill(TODO_ITEMS[1]); await newTodo.press('Enter'); // Make sure the list now has two todo items. await expect(page.getByTestId('todo-title')).toHaveText([ TODO_ITEMS[0], TODO_ITEMS[1] ]); await checkNumberOfTodosInLocalStorage(page, 2); }); test('should clear text input field when an item is added', async ({ page }) => { // create a new todo locator const newTodo = page.getByPlaceholder('What needs to be done?'); // Create one todo item. await newTodo.fill(TODO_ITEMS[0]); await newTodo.press('Enter'); // Check that input is empty. await expect(newTodo).toBeEmpty(); await checkNumberOfTodosInLocalStorage(page, 1); }); test('should append new items to the bottom of the list', async ({ page }) => { // Create 3 items. await createDefaultTodos(page); // create a todo count locator const todoCount = page.getByTestId('todo-count') // Check test using different methods. await expect(page.getByText('3 items left')).toBeVisible(); await expect(todoCount).toHaveText('3 items left'); await expect(todoCount).toContainText('3'); await expect(todoCount).toHaveText(/3/); // Check all items in one call. await expect(page.getByTestId('todo-title')).toHaveText(TODO_ITEMS); await checkNumberOfTodosInLocalStorage(page, 3); }); }); test.describe('Mark all as completed', () => { test.beforeEach(async ({ page }) => { await createDefaultTodos(page); await checkNumberOfTodosInLocalStorage(page, 3); }); test.afterEach(async ({ page }) => { await checkNumberOfTodosInLocalStorage(page, 3); }); test('should allow me to mark all items as completed', async ({ page }) => { // Complete all todos. await page.getByLabel('Mark all as complete').check(); // Ensure all todos have 'completed' class. await expect(page.getByTestId('todo-item')).toHaveClass(['completed', 'completed', 'completed']); await checkNumberOfCompletedTodosInLocalStorage(page, 3); }); test('should allow me to clear the complete state of all items', async ({ page }) => { const toggleAll = page.getByLabel('Mark all as complete'); // Check and then immediately uncheck. await toggleAll.check(); await toggleAll.uncheck(); // Should be no completed classes. await expect(page.getByTestId('todo-item')).toHaveClass(['', '', '']); }); test('complete all checkbox should update state when items are completed / cleared', async ({ page }) => { const toggleAll = page.getByLabel('Mark all as complete'); await toggleAll.check(); await expect(toggleAll).toBeChecked(); await checkNumberOfCompletedTodosInLocalStorage(page, 3); // Uncheck first todo. const firstTodo = page.getByTestId('todo-item').nth(0); await firstTodo.getByRole('checkbox').uncheck(); // Reuse toggleAll locator and make sure its not checked. await expect(toggleAll).not.toBeChecked(); await firstTodo.getByRole('checkbox').check(); await checkNumberOfCompletedTodosInLocalStorage(page, 3); // Assert the toggle all is checked again. await expect(toggleAll).toBeChecked(); }); }); test.describe('Item', () => { test('should allow me to mark items as complete', async ({ page }) => { // create a new todo locator const newTodo = page.getByPlaceholder('What needs to be done?'); // Create two items. for (const item of TODO_ITEMS.slice(0, 2)) { await newTodo.fill(item); await newTodo.press('Enter'); } // Check first item. const firstTodo = page.getByTestId('todo-item').nth(0); await firstTodo.getByRole('checkbox').check(); await expect(firstTodo).toHaveClass('completed'); // Check second item. const secondTodo = page.getByTestId('todo-item').nth(1); await expect(secondTodo).not.toHaveClass('completed'); await secondTodo.getByRole('checkbox').check(); // Assert completed class. await expect(firstTodo).toHaveClass('completed'); await expect(secondTodo).toHaveClass('completed'); }); test('should allow me to un-mark items as complete', async ({ page }) => { // create a new todo locator const newTodo = page.getByPlaceholder('What needs to be done?'); // Create two items. for (const item of TODO_ITEMS.slice(0, 2)) { await newTodo.fill(item); await newTodo.press('Enter'); } const firstTodo = page.getByTestId('todo-item').nth(0); const secondTodo = page.getByTestId('todo-item').nth(1); const firstTodoCheckbox = firstTodo.getByRole('checkbox'); await firstTodoCheckbox.check(); await expect(firstTodo).toHaveClass('completed'); await expect(secondTodo).not.toHaveClass('completed'); await checkNumberOfCompletedTodosInLocalStorage(page, 1); await firstTodoCheckbox.uncheck(); await expect(firstTodo).not.toHaveClass('completed'); await expect(secondTodo).not.toHaveClass('completed'); await checkNumberOfCompletedTodosInLocalStorage(page, 0); }); test('should allow me to edit an item', async ({ page }) => { await createDefaultTodos(page); const todoItems = page.getByTestId('todo-item'); const secondTodo = todoItems.nth(1); await secondTodo.dblclick(); await expect(secondTodo.getByRole('textbox', { name: 'Edit' })).toHaveValue(TODO_ITEMS[1]); await secondTodo.getByRole('textbox', { name: 'Edit' }).fill('buy some sausages'); await secondTodo.getByRole('textbox', { name: 'Edit' }).press('Enter'); // Explicitly assert the new text value. await expect(todoItems).toHaveText([ TODO_ITEMS[0], 'buy some sausages', TODO_ITEMS[2] ]); await checkTodosInLocalStorage(page, 'buy some sausages'); }); }); test.describe('Editing', () => { test.beforeEach(async ({ page }) => { await createDefaultTodos(page); await checkNumberOfTodosInLocalStorage(page, 3); }); test('should hide other controls when editing', async ({ page }) => { const todoItem = page.getByTestId('todo-item').nth(1); await todoItem.dblclick(); await expect(todoItem.getByRole('checkbox')).not.toBeVisible(); await expect(todoItem.locator('label', { hasText: TODO_ITEMS[1], })).not.toBeVisible(); await checkNumberOfTodosInLocalStorage(page, 3); }); test('should save edits on blur', async ({ page }) => { const todoItems = page.getByTestId('todo-item'); await todoItems.nth(1).dblclick(); await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages'); await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).dispatchEvent('blur'); await expect(todoItems).toHaveText([ TODO_ITEMS[0], 'buy some sausages', TODO_ITEMS[2], ]); await checkTodosInLocalStorage(page, 'buy some sausages'); }); test('should trim entered text', async ({ page }) => { const todoItems = page.getByTestId('todo-item'); await todoItems.nth(1).dblclick(); await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill(' buy some sausages '); await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter'); await expect(todoItems).toHaveText([ TODO_ITEMS[0], 'buy some sausages', TODO_ITEMS[2], ]); await checkTodosInLocalStorage(page, 'buy some sausages'); }); test('should remove the item if an empty text string was entered', async ({ page }) => { const todoItems = page.getByTestId('todo-item'); await todoItems.nth(1).dblclick(); await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill(''); await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter'); await expect(todoItems).toHaveText([ TODO_ITEMS[0], TODO_ITEMS[2], ]); }); test('should cancel edits on escape', async ({ page }) => { const todoItems = page.getByTestId('todo-item'); await todoItems.nth(1).dblclick(); await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages'); await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Escape'); await expect(todoItems).toHaveText(TODO_ITEMS); }); }); test.describe('Counter', () => { test('should display the current number of todo items', async ({ page }) => { // create a new todo locator const newTodo = page.getByPlaceholder('What needs to be done?'); // create a todo count locator const todoCount = page.getByTestId('todo-count') await newTodo.fill(TODO_ITEMS[0]); await newTodo.press('Enter'); await expect(todoCount).toContainText('1'); await newTodo.fill(TODO_ITEMS[1]); await newTodo.press('Enter'); await expect(todoCount).toContainText('2'); await checkNumberOfTodosInLocalStorage(page, 2); }); }); test.describe('Clear completed button', () => { test.beforeEach(async ({ page }) => { await createDefaultTodos(page); }); test('should display the correct text', async ({ page }) => { await page.locator('.todo-list li .toggle').first().check(); await expect(page.getByRole('button', { name: 'Clear completed' })).toBeVisible(); }); test('should remove completed items when clicked', async ({ page }) => { const todoItems = page.getByTestId('todo-item'); await todoItems.nth(1).getByRole('checkbox').check(); await page.getByRole('button', { name: 'Clear completed' }).click(); await expect(todoItems).toHaveCount(2); await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); }); test('should be hidden when there are no items that are completed', async ({ page }) => { await page.locator('.todo-list li .toggle').first().check(); await page.getByRole('button', { name: 'Clear completed' }).click(); await expect(page.getByRole('button', { name: 'Clear completed' })).toBeHidden(); }); }); test.describe('Persistence', () => { test('should persist its data', async ({ page }) => { // create a new todo locator const newTodo = page.getByPlaceholder('What needs to be done?'); for (const item of TODO_ITEMS.slice(0, 2)) { await newTodo.fill(item); await newTodo.press('Enter'); } const todoItems = page.getByTestId('todo-item'); const firstTodoCheck = todoItems.nth(0).getByRole('checkbox'); await firstTodoCheck.check(); await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]); await expect(firstTodoCheck).toBeChecked(); await expect(todoItems).toHaveClass(['completed', '']); // Ensure there is 1 completed item. await checkNumberOfCompletedTodosInLocalStorage(page, 1); // Now reload. await page.reload(); await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]); await expect(firstTodoCheck).toBeChecked(); await expect(todoItems).toHaveClass(['completed', '']); }); }); test.describe('Routing', () => { test.beforeEach(async ({ page }) => { await createDefaultTodos(page); // make sure the app had a chance to save updated todos in storage // before navigating to a new view, otherwise the items can get lost :( // in some frameworks like Durandal await checkTodosInLocalStorage(page, TODO_ITEMS[0]); }); test('should allow me to display active items', async ({ page }) => { const todoItem = page.getByTestId('todo-item'); await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); await checkNumberOfCompletedTodosInLocalStorage(page, 1); await page.getByRole('link', { name: 'Active' }).click(); await expect(todoItem).toHaveCount(2); await expect(todoItem).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]); }); test('should respect the back button', async ({ page }) => { const todoItem = page.getByTestId('todo-item'); await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); await checkNumberOfCompletedTodosInLocalStorage(page, 1); await test.step('Showing all items', async () => { await page.getByRole('link', { name: 'All' }).click(); await expect(todoItem).toHaveCount(3); }); await test.step('Showing active items', async () => { await page.getByRole('link', { name: 'Active' }).click(); }); await test.step('Showing completed items', async () => { await page.getByRole('link', { name: 'Completed' }).click(); }); await expect(todoItem).toHaveCount(1); await page.goBack(); await expect(todoItem).toHaveCount(2); await page.goBack(); await expect(todoItem).toHaveCount(3); }); test('should allow me to display completed items', async ({ page }) => { await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); await checkNumberOfCompletedTodosInLocalStorage(page, 1); await page.getByRole('link', { name: 'Completed' }).click(); await expect(page.getByTestId('todo-item')).toHaveCount(1); }); test('should allow me to display all items', async ({ page }) => { await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check(); await checkNumberOfCompletedTodosInLocalStorage(page, 1); await page.getByRole('link', { name: 'Active' }).click(); await page.getByRole('link', { name: 'Completed' }).click(); await page.getByRole('link', { name: 'All' }).click(); await expect(page.getByTestId('todo-item')).toHaveCount(3); }); test('should highlight the currently applied filter', async ({ page }) => { await expect(page.getByRole('link', { name: 'All' })).toHaveClass('selected'); //create locators for active and completed links const activeLink = page.getByRole('link', { name: 'Active' }); const completedLink = page.getByRole('link', { name: 'Completed' }); await activeLink.click(); // Page change - active items. await expect(activeLink).toHaveClass('selected'); await completedLink.click(); // Page change - completed items. await expect(completedLink).toHaveClass('selected'); }); }); async function createDefaultTodos(page: Page) { // create a new todo locator const newTodo = page.getByPlaceholder('What needs to be done?'); for (const item of TODO_ITEMS) { await newTodo.fill(item); await newTodo.press('Enter'); } } async function checkNumberOfTodosInLocalStorage(page: Page, expected: number) { return await page.waitForFunction(e => { return JSON.parse(localStorage['react-todos']).length === e; }, expected); } async function checkNumberOfCompletedTodosInLocalStorage(page: Page, expected: number) { return await page.waitForFunction(e => { return JSON.parse(localStorage['react-todos']).filter((todo: any) => todo.completed).length === e; }, expected); } async function checkTodosInLocalStorage(page: Page, title: string) { return await page.waitForFunction(t => { return JSON.parse(localStorage['react-todos']).map((todo: any) => todo.title).includes(t); }, title); }