create-playwright - npm Package Compare versions

Comparing version 1.17.122 to 1.17.123

assets/demo-todo-app.spec.js

@@ -16,8 +16,11 @@ // @ts-check
   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 page.locator('.new-todo').fill(TODO_ITEMS[0]);
-    await page.locator('.new-todo').press('Enter');
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press('Enter');
 
     // Make sure the list only has one todo item.
-    await expect(page.locator('.view label')).toHaveText([
+    await expect(page.getByTestId('todo-title')).toHaveText([
       TODO_ITEMS[0]
@@ -27,7 +30,7 @@ ]);
     // Create 2nd todo.
-    await page.locator('.new-todo').fill(TODO_ITEMS[1]);
-    await page.locator('.new-todo').press('Enter');
+    await newTodo.fill(TODO_ITEMS[1]);
+    await newTodo.press('Enter');
 
     // Make sure the list now has two todo items.
-    await expect(page.locator('.view label')).toHaveText([
+    await expect(page.getByTestId('todo-title')).toHaveText([
       TODO_ITEMS[0],
@@ -41,8 +44,11 @@ TODO_ITEMS[1]
   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 page.locator('.new-todo').fill(TODO_ITEMS[0]);
-    await page.locator('.new-todo').press('Enter');
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press('Enter');
 
     // Check that input is empty.
-    await expect(page.locator('.new-todo')).toBeEmpty();
+    await expect(newTodo).toBeEmpty();
     await checkNumberOfTodosInLocalStorage(page, 1);
@@ -55,20 +61,15 @@ });
 
+    // create a todo count locator
+    const todoCount = page.getByTestId('todo-count')
+  
     // Check test using different methods.
-    await expect(page.locator('.todo-count')).toHaveText('3 items left');
-    await expect(page.locator('.todo-count')).toContainText('3');
-    await expect(page.locator('.todo-count')).toHaveText(/3/);
+    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.locator('.view label')).toHaveText(TODO_ITEMS);
+    await expect(page.getByTestId('todo-title')).toHaveText(TODO_ITEMS);
     await checkNumberOfTodosInLocalStorage(page, 3);
   });
-
-  test('should show #main and #footer when items added', async ({ page }) => {
-    await page.locator('.new-todo').fill(TODO_ITEMS[0]);
-    await page.locator('.new-todo').press('Enter');
-
-    await expect(page.locator('.main')).toBeVisible();
-    await expect(page.locator('.footer')).toBeVisible();
-    await checkNumberOfTodosInLocalStorage(page, 1);
-  });
 });
@@ -88,6 +89,6 @@
     // Complete all todos.
-    await page.locator('.toggle-all').check();
+    await page.getByLabel('Mark all as complete').check();
 
     // Ensure all todos have 'completed' class.
-    await expect(page.locator('.todo-list li')).toHaveClass(['completed', 'completed', 'completed']);
+    await expect(page.getByTestId('todo-item')).toHaveClass(['completed', 'completed', 'completed']);
     await checkNumberOfCompletedTodosInLocalStorage(page, 3);
@@ -97,12 +98,13 @@ });
   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 page.locator('.toggle-all').check();
-    await page.locator('.toggle-all').uncheck();
+    await toggleAll.check();
+    await toggleAll.uncheck();
 
     // Should be no completed classes.
-    await expect(page.locator('.todo-list li')).toHaveClass(['', '', '']);
+    await expect(page.getByTestId('todo-item')).toHaveClass(['', '', '']);
   });
 
   test('complete all checkbox should update state when items are completed / cleared', async ({ page }) => {
-    const toggleAll = page.locator('.toggle-all');
+    const toggleAll = page.getByLabel('Mark all as complete');
     await toggleAll.check();
@@ -113,4 +115,4 @@ await expect(toggleAll).toBeChecked();
     // Uncheck first todo.
-    const firstTodo = page.locator('.todo-list li').nth(0);
-    await firstTodo.locator('.toggle').uncheck();
+    const firstTodo = page.getByTestId('todo-item').nth(0);
+    await firstTodo.getByRole('checkbox').uncheck();
 
@@ -120,3 +122,3 @@ // Reuse toggleAll locator and make sure its not checked.
 
-    await firstTodo.locator('.toggle').check();
+    await firstTodo.getByRole('checkbox').check();
     await checkNumberOfCompletedTodosInLocalStorage(page, 3);
@@ -132,17 +134,20 @@
   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 page.locator('.new-todo').fill(item);
-      await page.locator('.new-todo').press('Enter');
+      await newTodo.fill(item);
+      await newTodo.press('Enter');
     }
 
     // Check first item.
-    const firstTodo = page.locator('.todo-list li').nth(0);
-    await firstTodo.locator('.toggle').check();
+    const firstTodo = page.getByTestId('todo-item').nth(0);
+    await firstTodo.getByRole('checkbox').check();
     await expect(firstTodo).toHaveClass('completed');
 
     // Check second item.
-    const secondTodo = page.locator('.todo-list li').nth(1);
+    const secondTodo = page.getByTestId('todo-item').nth(1);
     await expect(secondTodo).not.toHaveClass('completed');
-    await secondTodo.locator('.toggle').check();
+    await secondTodo.getByRole('checkbox').check();
 
@@ -155,11 +160,16 @@ // Assert completed class.
   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 page.locator('.new-todo').fill(item);
-      await page.locator('.new-todo').press('Enter');
+      await newTodo.fill(item);
+      await newTodo.press('Enter');
     }
 
-    const firstTodo = page.locator('.todo-list li').nth(0);
-    const secondTodo = page.locator('.todo-list li').nth(1);
-    await firstTodo.locator('.toggle').check();
+    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');
@@ -169,3 +179,3 @@ await expect(secondTodo).not.toHaveClass('completed');
 
-    await firstTodo.locator('.toggle').uncheck();
+    await firstTodoCheckbox.uncheck();
     await expect(firstTodo).not.toHaveClass('completed');
@@ -179,8 +189,8 @@ await expect(secondTodo).not.toHaveClass('completed');
 
-    const todoItems = page.locator('.todo-list li');
+    const todoItems = page.getByTestId('todo-item');
     const secondTodo = todoItems.nth(1);
     await secondTodo.dblclick();
-    await expect(secondTodo.locator('.edit')).toHaveValue(TODO_ITEMS[1]);
-    await secondTodo.locator('.edit').fill('buy some sausages');
-    await secondTodo.locator('.edit').press('Enter');
+    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');
 
@@ -204,6 +214,8 @@ // Explicitly assert the new text value.
   test('should hide other controls when editing', async ({ page }) => {
-    const todoItem = page.locator('.todo-list li').nth(1);
+    const todoItem = page.getByTestId('todo-item').nth(1);
     await todoItem.dblclick();
-    await expect(todoItem.locator('.toggle')).not.toBeVisible();
-    await expect(todoItem.locator('label')).not.toBeVisible();
+    await expect(todoItem.getByRole('checkbox')).not.toBeVisible();
+    await expect(todoItem.locator('label', {
+      hasText: TODO_ITEMS[1],
+    })).not.toBeVisible();
     await checkNumberOfTodosInLocalStorage(page, 3);
@@ -213,6 +225,6 @@ });
   test('should save edits on blur', async ({ page }) => {
-    const todoItems = page.locator('.todo-list li');
+    const todoItems = page.getByTestId('todo-item');
     await todoItems.nth(1).dblclick();
-    await todoItems.nth(1).locator('.edit').fill('buy some sausages');
-    await todoItems.nth(1).locator('.edit').dispatchEvent('blur');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).dispatchEvent('blur');
 
@@ -228,6 +240,6 @@ await expect(todoItems).toHaveText([
   test('should trim entered text', async ({ page }) => {
-    const todoItems = page.locator('.todo-list li');
+    const todoItems = page.getByTestId('todo-item');
     await todoItems.nth(1).dblclick();
-    await todoItems.nth(1).locator('.edit').fill('    buy some sausages    ');
-    await todoItems.nth(1).locator('.edit').press('Enter');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('    buy some sausages    ');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter');
 
@@ -243,6 +255,6 @@ await expect(todoItems).toHaveText([
   test('should remove the item if an empty text string was entered', async ({ page }) => {
-    const todoItems = page.locator('.todo-list li');
+    const todoItems = page.getByTestId('todo-item');
     await todoItems.nth(1).dblclick();
-    await todoItems.nth(1).locator('.edit').fill('');
-    await todoItems.nth(1).locator('.edit').press('Enter');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter');
 
@@ -256,6 +268,6 @@ await expect(todoItems).toHaveText([
   test('should cancel edits on escape', async ({ page }) => {
-    const todoItems = page.locator('.todo-list li');
+    const todoItems = page.getByTestId('todo-item');
     await todoItems.nth(1).dblclick();
-    await todoItems.nth(1).locator('.edit').fill('buy some sausages');
-    await todoItems.nth(1).locator('.edit').press('Escape');
+    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);
@@ -267,10 +279,16 @@ });
   test('should display the current number of todo items', async ({ page }) => {
-    await page.locator('.new-todo').fill(TODO_ITEMS[0]);
-    await page.locator('.new-todo').press('Enter');
-    await expect(page.locator('.todo-count')).toContainText('1');
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder('What needs to be done?');
 
-    await page.locator('.new-todo').fill(TODO_ITEMS[1]);
-    await page.locator('.new-todo').press('Enter');
-    await expect(page.locator('.todo-count')).toContainText('2');
+    // 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);
@@ -287,9 +305,9 @@ });
     await page.locator('.todo-list li .toggle').first().check();
-    await expect(page.locator('.clear-completed')).toHaveText('Clear completed');
+    await expect(page.getByRole('button', { name: 'Clear completed' })).toBeVisible();
   });
 
   test('should remove completed items when clicked', async ({ page }) => {
-    const todoItems = page.locator('.todo-list li');
-    await todoItems.nth(1).locator('.toggle').check();
-    await page.locator('.clear-completed').click();
+    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);
@@ -301,4 +319,4 @@ await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
     await page.locator('.todo-list li .toggle').first().check();
-    await page.locator('.clear-completed').click();
-    await expect(page.locator('.clear-completed')).toBeHidden();
+    await page.getByRole('button', { name: 'Clear completed' }).click();
+    await expect(page.getByRole('button', { name: 'Clear completed' })).toBeHidden();
   });
@@ -309,10 +327,15 @@ });
   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 page.locator('.new-todo').fill(item);
-      await page.locator('.new-todo').press('Enter');
+      await newTodo.fill(item);
+      await newTodo.press('Enter');
     }
 
-    const todoItems = page.locator('.todo-list li');
-    await todoItems.nth(0).locator('.toggle').check();
+    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', '']);
@@ -326,2 +349,3 @@
     await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+    await expect(firstTodoCheck).toBeChecked();
     await expect(todoItems).toHaveClass(['completed', '']);
@@ -341,57 +365,67 @@ });
   test('should allow me to display active items', async ({ page }) => {
-    await page.locator('.todo-list li .toggle').nth(1).check();
+    const todoItem = page.getByTestId('todo-item');
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+    
     await checkNumberOfCompletedTodosInLocalStorage(page, 1);
-    await page.locator('.filters >> text=Active').click();
-    await expect(page.locator('.todo-list li')).toHaveCount(2);
-    await expect(page.locator('.todo-list li')).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+    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 }) => {
-    await page.locator('.todo-list li .toggle').nth(1).check();
+    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.locator('.filters >> text=All').click();
-      await expect(page.locator('.todo-list li')).toHaveCount(3);
+      await page.getByRole('link', { name: 'All' }).click();
+      await expect(todoItem).toHaveCount(3);
     });
 
     await test.step('Showing active items', async () => {
-      await page.locator('.filters >> text=Active').click();
+      await page.getByRole('link', { name: 'Active' }).click();
     });
 
     await test.step('Showing completed items', async () => {
-      await page.locator('.filters >> text=Completed').click();
+      await page.getByRole('link', { name: 'Completed' }).click();
     });
 
-    await expect(page.locator('.todo-list li')).toHaveCount(1);
+    await expect(todoItem).toHaveCount(1);
     await page.goBack();
-    await expect(page.locator('.todo-list li')).toHaveCount(2);
+    await expect(todoItem).toHaveCount(2);
     await page.goBack();
-    await expect(page.locator('.todo-list li')).toHaveCount(3);
+    await expect(todoItem).toHaveCount(3);
   });
 
   test('should allow me to display completed items', async ({ page }) => {
-    await page.locator('.todo-list li .toggle').nth(1).check();
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
     await checkNumberOfCompletedTodosInLocalStorage(page, 1);
-    await page.locator('.filters >> text=Completed').click();
-    await expect(page.locator('.todo-list li')).toHaveCount(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.locator('.todo-list li .toggle').nth(1).check();
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
     await checkNumberOfCompletedTodosInLocalStorage(page, 1);
-    await page.locator('.filters >> text=Active').click();
-    await page.locator('.filters >> text=Completed').click();
-    await page.locator('.filters >> text=All').click();
-    await expect(page.locator('.todo-list li')).toHaveCount(3);
+    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.locator('.filters >> text=All')).toHaveClass('selected');
-    await page.locator('.filters >> text=Active').click();
+    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(page.locator('.filters >> text=Active')).toHaveClass('selected');
-    await page.locator('.filters >> text=Completed').click();
+    await expect(activeLink).toHaveClass('selected');
+    await completedLink.click();
+
     // Page change - completed items.
-    await expect(page.locator('.filters >> text=Completed')).toHaveClass('selected');
+    await expect(completedLink).toHaveClass('selected');
   });
@@ -401,5 +435,8 @@ });
 async function createDefaultTodos(page) {
+  // create a new todo locator
+  const newTodo = page.getByPlaceholder('What needs to be done?');
+
   for (const item of TODO_ITEMS) {
-    await page.locator('.new-todo').fill(item);
-    await page.locator('.new-todo').press('Enter');
+    await newTodo.fill(item);
+    await newTodo.press('Enter');
   }
@@ -406,0 +443,0 @@ }

assets/demo-todo-app.spec.ts

@@ -15,8 +15,11 @@ import { test, expect, type Page } from '@playwright/test';
   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 page.locator('.new-todo').fill(TODO_ITEMS[0]);
-    await page.locator('.new-todo').press('Enter');
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press('Enter');
 
     // Make sure the list only has one todo item.
-    await expect(page.locator('.view label')).toHaveText([
+    await expect(page.getByTestId('todo-title')).toHaveText([
       TODO_ITEMS[0]
@@ -26,7 +29,7 @@ ]);
     // Create 2nd todo.
-    await page.locator('.new-todo').fill(TODO_ITEMS[1]);
-    await page.locator('.new-todo').press('Enter');
+    await newTodo.fill(TODO_ITEMS[1]);
+    await newTodo.press('Enter');
 
     // Make sure the list now has two todo items.
-    await expect(page.locator('.view label')).toHaveText([
+    await expect(page.getByTestId('todo-title')).toHaveText([
       TODO_ITEMS[0],
@@ -40,8 +43,11 @@ TODO_ITEMS[1]
   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 page.locator('.new-todo').fill(TODO_ITEMS[0]);
-    await page.locator('.new-todo').press('Enter');
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press('Enter');
 
     // Check that input is empty.
-    await expect(page.locator('.new-todo')).toBeEmpty();
+    await expect(newTodo).toBeEmpty();
     await checkNumberOfTodosInLocalStorage(page, 1);
@@ -54,20 +60,15 @@ });
 
+    // create a todo count locator
+    const todoCount = page.getByTestId('todo-count')
+  
     // Check test using different methods.
-    await expect(page.locator('.todo-count')).toHaveText('3 items left');
-    await expect(page.locator('.todo-count')).toContainText('3');
-    await expect(page.locator('.todo-count')).toHaveText(/3/);
+    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.locator('.view label')).toHaveText(TODO_ITEMS);
+    await expect(page.getByTestId('todo-title')).toHaveText(TODO_ITEMS);
     await checkNumberOfTodosInLocalStorage(page, 3);
   });
-
-  test('should show #main and #footer when items added', async ({ page }) => {
-    await page.locator('.new-todo').fill(TODO_ITEMS[0]);
-    await page.locator('.new-todo').press('Enter');
-
-    await expect(page.locator('.main')).toBeVisible();
-    await expect(page.locator('.footer')).toBeVisible();
-    await checkNumberOfTodosInLocalStorage(page, 1);
-  });
 });
@@ -87,6 +88,6 @@
     // Complete all todos.
-    await page.locator('.toggle-all').check();
+    await page.getByLabel('Mark all as complete').check();
 
     // Ensure all todos have 'completed' class.
-    await expect(page.locator('.todo-list li')).toHaveClass(['completed', 'completed', 'completed']);
+    await expect(page.getByTestId('todo-item')).toHaveClass(['completed', 'completed', 'completed']);
     await checkNumberOfCompletedTodosInLocalStorage(page, 3);
@@ -96,12 +97,13 @@ });
   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 page.locator('.toggle-all').check();
-    await page.locator('.toggle-all').uncheck();
+    await toggleAll.check();
+    await toggleAll.uncheck();
 
     // Should be no completed classes.
-    await expect(page.locator('.todo-list li')).toHaveClass(['', '', '']);
+    await expect(page.getByTestId('todo-item')).toHaveClass(['', '', '']);
   });
 
   test('complete all checkbox should update state when items are completed / cleared', async ({ page }) => {
-    const toggleAll = page.locator('.toggle-all');
+    const toggleAll = page.getByLabel('Mark all as complete');
     await toggleAll.check();
@@ -112,4 +114,4 @@ await expect(toggleAll).toBeChecked();
     // Uncheck first todo.
-    const firstTodo = page.locator('.todo-list li').nth(0);
-    await firstTodo.locator('.toggle').uncheck();
+    const firstTodo = page.getByTestId('todo-item').nth(0);
+    await firstTodo.getByRole('checkbox').uncheck();
 
@@ -119,3 +121,3 @@ // Reuse toggleAll locator and make sure its not checked.
 
-    await firstTodo.locator('.toggle').check();
+    await firstTodo.getByRole('checkbox').check();
     await checkNumberOfCompletedTodosInLocalStorage(page, 3);
@@ -131,17 +133,20 @@
   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 page.locator('.new-todo').fill(item);
-      await page.locator('.new-todo').press('Enter');
+      await newTodo.fill(item);
+      await newTodo.press('Enter');
     }
 
     // Check first item.
-    const firstTodo = page.locator('.todo-list li').nth(0);
-    await firstTodo.locator('.toggle').check();
+    const firstTodo = page.getByTestId('todo-item').nth(0);
+    await firstTodo.getByRole('checkbox').check();
     await expect(firstTodo).toHaveClass('completed');
 
     // Check second item.
-    const secondTodo = page.locator('.todo-list li').nth(1);
+    const secondTodo = page.getByTestId('todo-item').nth(1);
     await expect(secondTodo).not.toHaveClass('completed');
-    await secondTodo.locator('.toggle').check();
+    await secondTodo.getByRole('checkbox').check();
 
@@ -154,11 +159,16 @@ // Assert completed class.
   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 page.locator('.new-todo').fill(item);
-      await page.locator('.new-todo').press('Enter');
+      await newTodo.fill(item);
+      await newTodo.press('Enter');
     }
 
-    const firstTodo = page.locator('.todo-list li').nth(0);
-    const secondTodo = page.locator('.todo-list li').nth(1);
-    await firstTodo.locator('.toggle').check();
+    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');
@@ -168,3 +178,3 @@ await expect(secondTodo).not.toHaveClass('completed');
 
-    await firstTodo.locator('.toggle').uncheck();
+    await firstTodoCheckbox.uncheck();
     await expect(firstTodo).not.toHaveClass('completed');
@@ -178,8 +188,8 @@ await expect(secondTodo).not.toHaveClass('completed');
 
-    const todoItems = page.locator('.todo-list li');
+    const todoItems = page.getByTestId('todo-item');
     const secondTodo = todoItems.nth(1);
     await secondTodo.dblclick();
-    await expect(secondTodo.locator('.edit')).toHaveValue(TODO_ITEMS[1]);
-    await secondTodo.locator('.edit').fill('buy some sausages');
-    await secondTodo.locator('.edit').press('Enter');
+    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');
 
@@ -203,6 +213,8 @@ // Explicitly assert the new text value.
   test('should hide other controls when editing', async ({ page }) => {
-    const todoItem = page.locator('.todo-list li').nth(1);
+    const todoItem = page.getByTestId('todo-item').nth(1);
     await todoItem.dblclick();
-    await expect(todoItem.locator('.toggle')).not.toBeVisible();
-    await expect(todoItem.locator('label')).not.toBeVisible();
+    await expect(todoItem.getByRole('checkbox')).not.toBeVisible();
+    await expect(todoItem.locator('label', {
+      hasText: TODO_ITEMS[1],
+    })).not.toBeVisible();
     await checkNumberOfTodosInLocalStorage(page, 3);
@@ -212,6 +224,6 @@ });
   test('should save edits on blur', async ({ page }) => {
-    const todoItems = page.locator('.todo-list li');
+    const todoItems = page.getByTestId('todo-item');
     await todoItems.nth(1).dblclick();
-    await todoItems.nth(1).locator('.edit').fill('buy some sausages');
-    await todoItems.nth(1).locator('.edit').dispatchEvent('blur');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('buy some sausages');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).dispatchEvent('blur');
 
@@ -227,6 +239,6 @@ await expect(todoItems).toHaveText([
   test('should trim entered text', async ({ page }) => {
-    const todoItems = page.locator('.todo-list li');
+    const todoItems = page.getByTestId('todo-item');
     await todoItems.nth(1).dblclick();
-    await todoItems.nth(1).locator('.edit').fill('    buy some sausages    ');
-    await todoItems.nth(1).locator('.edit').press('Enter');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('    buy some sausages    ');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter');
 
@@ -242,6 +254,6 @@ await expect(todoItems).toHaveText([
   test('should remove the item if an empty text string was entered', async ({ page }) => {
-    const todoItems = page.locator('.todo-list li');
+    const todoItems = page.getByTestId('todo-item');
     await todoItems.nth(1).dblclick();
-    await todoItems.nth(1).locator('.edit').fill('');
-    await todoItems.nth(1).locator('.edit').press('Enter');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).fill('');
+    await todoItems.nth(1).getByRole('textbox', { name: 'Edit' }).press('Enter');
 
@@ -255,6 +267,6 @@ await expect(todoItems).toHaveText([
   test('should cancel edits on escape', async ({ page }) => {
-    const todoItems = page.locator('.todo-list li');
+    const todoItems = page.getByTestId('todo-item');
     await todoItems.nth(1).dblclick();
-    await todoItems.nth(1).locator('.edit').fill('buy some sausages');
-    await todoItems.nth(1).locator('.edit').press('Escape');
+    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);
@@ -266,10 +278,17 @@ });
   test('should display the current number of todo items', async ({ page }) => {
-    await page.locator('.new-todo').fill(TODO_ITEMS[0]);
-    await page.locator('.new-todo').press('Enter');
-    await expect(page.locator('.todo-count')).toContainText('1');
+    // 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 page.locator('.new-todo').fill(TODO_ITEMS[1]);
-    await page.locator('.new-todo').press('Enter');
-    await expect(page.locator('.todo-count')).toContainText('2');
+    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);
@@ -286,9 +305,9 @@ });
     await page.locator('.todo-list li .toggle').first().check();
-    await expect(page.locator('.clear-completed')).toHaveText('Clear completed');
+    await expect(page.getByRole('button', { name: 'Clear completed' })).toBeVisible();
   });
 
   test('should remove completed items when clicked', async ({ page }) => {
-    const todoItems = page.locator('.todo-list li');
-    await todoItems.nth(1).locator('.toggle').check();
-    await page.locator('.clear-completed').click();
+    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);
@@ -300,4 +319,4 @@ await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
     await page.locator('.todo-list li .toggle').first().check();
-    await page.locator('.clear-completed').click();
-    await expect(page.locator('.clear-completed')).toBeHidden();
+    await page.getByRole('button', { name: 'Clear completed' }).click();
+    await expect(page.getByRole('button', { name: 'Clear completed' })).toBeHidden();
   });
@@ -308,10 +327,15 @@ });
   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 page.locator('.new-todo').fill(item);
-      await page.locator('.new-todo').press('Enter');
+      await newTodo.fill(item);
+      await newTodo.press('Enter');
     }
 
-    const todoItems = page.locator('.todo-list li');
-    await todoItems.nth(0).locator('.toggle').check();
+    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', '']);
@@ -325,2 +349,3 @@
     await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+    await expect(firstTodoCheck).toBeChecked();
     await expect(todoItems).toHaveClass(['completed', '']);
@@ -340,64 +365,77 @@ });
   test('should allow me to display active items', async ({ page }) => {
-    await page.locator('.todo-list li .toggle').nth(1).check();
+    const todoItem = page.getByTestId('todo-item');
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
+
     await checkNumberOfCompletedTodosInLocalStorage(page, 1);
-    await page.locator('.filters >> text=Active').click();
-    await expect(page.locator('.todo-list li')).toHaveCount(2);
-    await expect(page.locator('.todo-list li')).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+    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 }) => {
-    await page.locator('.todo-list li .toggle').nth(1).check();
+    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.locator('.filters >> text=All').click();
-      await expect(page.locator('.todo-list li')).toHaveCount(3);
+      await page.getByRole('link', { name: 'All' }).click();
+      await expect(todoItem).toHaveCount(3);
     });
 
     await test.step('Showing active items', async () => {
-      await page.locator('.filters >> text=Active').click();
+      await page.getByRole('link', { name: 'Active' }).click();
     });
 
     await test.step('Showing completed items', async () => {
-      await page.locator('.filters >> text=Completed').click();
+      await page.getByRole('link', { name: 'Completed' }).click();
     });
 
-    await expect(page.locator('.todo-list li')).toHaveCount(1);
+    await expect(todoItem).toHaveCount(1);
     await page.goBack();
-    await expect(page.locator('.todo-list li')).toHaveCount(2);
+    await expect(todoItem).toHaveCount(2);
     await page.goBack();
-    await expect(page.locator('.todo-list li')).toHaveCount(3);
+    await expect(todoItem).toHaveCount(3);
   });
 
   test('should allow me to display completed items', async ({ page }) => {
-    await page.locator('.todo-list li .toggle').nth(1).check();
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
     await checkNumberOfCompletedTodosInLocalStorage(page, 1);
-    await page.locator('.filters >> text=Completed').click();
-    await expect(page.locator('.todo-list li')).toHaveCount(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.locator('.todo-list li .toggle').nth(1).check();
+    await page.getByTestId('todo-item').nth(1).getByRole('checkbox').check();
     await checkNumberOfCompletedTodosInLocalStorage(page, 1);
-    await page.locator('.filters >> text=Active').click();
-    await page.locator('.filters >> text=Completed').click();
-    await page.locator('.filters >> text=All').click();
-    await expect(page.locator('.todo-list li')).toHaveCount(3);
+    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.locator('.filters >> text=All')).toHaveClass('selected');
-    await page.locator('.filters >> text=Active').click();
+    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(page.locator('.filters >> text=Active')).toHaveClass('selected');
-    await page.locator('.filters >> text=Completed').click();
+    await expect(activeLink).toHaveClass('selected');
+    await completedLink.click();
+
     // Page change - completed items.
-    await expect(page.locator('.filters >> text=Completed')).toHaveClass('selected');
+    await expect(completedLink).toHaveClass('selected');
   });
 });
 
-async function createDefaultTodos(page: Page) {
+async function createDefaultTodos(page) {
+  // create a new todo locator
+  const newTodo = page.getByPlaceholder('What needs to be done?');
+
   for (const item of TODO_ITEMS) {
-    await page.locator('.new-todo').fill(item);
-    await page.locator('.new-todo').press('Enter');
+    await newTodo.fill(item);
+    await newTodo.press('Enter');
   }
@@ -404,0 +442,0 @@ }

assets/example.spec.js

 // @ts-check
 const { test, expect } = require('@playwright/test');
 
-test('homepage has Playwright in title and get started link linking to the intro page', async ({ page }) => {
+test('homepage has title and links to intro page', async ({ page }) => {
   await page.goto('https://playwright.dev/');
@@ -11,3 +11,3 @@
   // create a locator
-  const getStarted = page.getByText('Get Started');
+  const getStarted = page.getByRole('link', { name: 'Get started' });
 
@@ -14,0 +14,0 @@ // Expect an attribute "to be strictly equal" to the value.

assets/example.spec.ts

 import { test, expect } from '@playwright/test';
 
-test('homepage has Playwright in title and get started link linking to the intro page', async ({ page }) => {
+test('homepage has title and links to intro page', async ({ page }) => {
   await page.goto('https://playwright.dev/');
@@ -10,3 +10,3 @@
   // create a locator
-  const getStarted = page.getByText('Get Started');
+  const getStarted = page.getByRole('link', { name: 'Get started' });
 
@@ -13,0 +13,0 @@ // Expect an attribute "to be strictly equal" to the value.

package.json

 {
   "name": "create-playwright",
-  "version": "1.17.122",
+  "version": "1.17.123",
   "description": "Getting started with writing end-to-end tests with Playwright.",
@@ -5,0 +5,0 @@ "repository": "github:Microsoft/playwright",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

210373

increased by0.87%

Lines of code

5946

increased by0.81%

No dependency changes