chore: prefer getByRole, do not use soft (#25)

Author: pavelfeldman

movies-app/components/UI/HamburgerButton/index.js

@@ -19,7 +19,7 @@ const Bar = withTheme(({ theme }) => (
 
 const HamburgerButton = props => (
   <>
-    <div aria-label="menu" className='hamburger-button' {...props}>
+    <div role="menu" className='hamburger-button' {...props}>
       <Bar />
       <Bar />
       <Bar />

package-lock.json

@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.18.0",
-    "@playwright/test": "^1.51.0-alpha-2025-01-22",
+    "@playwright/test": "^1.51.0-alpha-2025-01-29",
     "@types/eslint__js": "^8.42.3",
     "@types/node": "^22.5.4",
     "eslint": "^9.18.0",

package.json

@@ -18,10 +18,10 @@ export async function createList(
   listDescription: string,
 ) {
   await test.step('create a new list', async () => {
-    await page.getByLabel('User Profile').click();
+    await page.getByRole('button', { name: 'User Profile' }).click();
     await page.getByRole('link', { name: 'Create New List' }).click();
-    await page.getByLabel('Name').fill(listName);
-    await page.getByLabel('Description').fill(listDescription);
+    await page.getByRole('textbox', { name: 'Name' }).fill(listName);
+    await page.getByRole('textbox', { name: 'Description' }).fill(listDescription);
     await page.getByRole('button', { name: 'Continue' }).click();
     // wait until the list was created and we're on its add/remove movies page
     await page.waitForURL(url => url.searchParams.has('listId'));
@@ -40,7 +40,7 @@ export async function createList(
  */
 export async function openLists(page: Page, name: string = 'My Lists') {
   await test.step('open list from menu', async () => {
-    await page.getByLabel('User Profile').click();
+    await page.getByRole('button', { name: 'User Profile' }).click();
     await page.getByRole('link', { name }).click();
     const formattedName = name.toLowerCase().replace(/\s+/g, '-');
     await expect(page).toHaveURL(new RegExp(`/${formattedName}`));
@@ -60,7 +60,7 @@ export async function openLists(page: Page, name: string = 'My Lists') {
  */
 export async function addMovie(page: Page, movieName: string) {
   await test.step('add movie to list', async () => {
-    await page.getByLabel('Add Item').fill(movieName);
+    await page.getByRole('textbox', { name: 'Add Item' }).fill(movieName);
     await page.getByRole('button', { name: movieName }).click();
     await expect(page.getByLabel('movies')).toMatchAriaSnapshot(`
     - list "movies" :
@@ -102,7 +102,7 @@ export async function addImageToList(page: Page, movieName: string) {
     await openLists(page, 'My Lists');
 
     // Verify the movie list has been updated with the text "my favorite movies"
-    await expect(page.getByLabel('movie list').getByRole('link')).toHaveText(
+    await expect(page.getByRole('listitem', { name: 'movie list' }).getByRole('link')).toHaveText(
       /my favorite movies/,
     );
   });

tests/helpers/list-utilities.ts

@@ -7,13 +7,13 @@ setup('log user in and verify profile access', async ({ page }) => {
 
   // Fill in the username and password fields and submit the form
   await page
-    .getByPlaceholder('[email protected]')
+    .getByRole('textbox', { name: 'Email address' })
     .fill(process.env.MOVIES_USERNAME!);
-  await page.getByPlaceholder('Password').fill(process.env.MOVIES_PASSWORD!);
+  await page.getByRole('textbox', { name: 'Password' }).fill(process.env.MOVIES_PASSWORD!);
   await page.getByRole('button', { name: 'login' }).click();
 
   // Click on the 'User Profile' label to ensure the user is logged in
-  await page.getByLabel('User Profile').click();
+  await page.getByRole('button', { name: 'User Profile' }).click();
 
   // Verify that the 'Create New List' link is visible
   await expect(

tests/logged-in/login.setup.ts

@@ -26,8 +26,7 @@ test('should create multiple lists', async ({ page }) => {
   await openLists(page);
 
   // Verify that two lists have been created
-  await expect.soft(movieList).toHaveCount(2);
-  await expect.soft(movieList).toHaveText([/my favorite movies/, /need to watch/]);
+  await expect(movieList).toHaveText([/my favorite movies/, /need to watch/]);
 });
 
 test('should edit an existing list', async ({ page }) => {
@@ -38,14 +37,13 @@ test('should edit an existing list', async ({ page }) => {
   await page.getByRole('link', { name: 'Edit' }).click();
 
   await test.step('update list name and description', async () => {
-    await page.getByLabel('Name').fill('my action movies');
-    await page.getByLabel('Description').fill('my favorite action movies');
+    await page.getByRole('textbox', { name: 'Name' }).fill('my action movies');
+    await page.getByRole('textbox', { name: 'Description' }).fill('my favorite action movies');
     await page.getByRole('button', { name: 'Save' }).click();
 
     // Verify that the list name and description have been updated
-    await expect.soft(page.getByLabel('Name')).toHaveValue('my action movies');
-    await expect
-      .soft(page.getByLabel('Description'))
+    await expect(page.getByRole('textbox', { name: 'Name' })).toHaveValue('my action movies');
+    await expect(page.getByRole('textbox', { name: 'Description' }))
       .toHaveValue('my favorite action movies');
     await page.getByRole('button', { name: 'Save' }).click();
   });
@@ -55,12 +53,10 @@ test('should edit an existing list', async ({ page }) => {
     await page.getByRole('link', { name: 'View List' }).click();
 
     // Verify that the list heading contains the updated name and description
-    await expect
-      .soft(page.getByRole('heading', { level: 1 }))
-      .toHaveText('my action movies');
-    await expect.soft(page.getByRole('heading', { level: 2 })).toHaveText(
-      'my favorite action movies',
-    );
+    await expect(page.locator('main')).toMatchAriaSnapshot(`
+      - heading "my action movies" [level=1]
+      - heading "my favorite action movies" [level=2]
+    `);
   });
 });
 
@@ -108,22 +104,22 @@ test('should add an image to a list', async ({ page }) => {
 
   await test.step('choose and verify image for the list', async () => {
     // Verify that the movie list heading contains the text "Twisters"
-    await expect.soft(movie.getByRole('heading')).toHaveText('Twisters');
+    await expect(movie.getByRole('heading')).toHaveText('Twisters');
 
     // Hover over the movie list item and select image
     await movie.hover();
     await movie.getByRole('heading', { name: 'SELECT' }).click();
 
     // Verify that the button text has changed to "SELECTED"
-    await expect.soft(movie.getByRole('button')).toHaveText('SELECTED');
+    await expect(movie.getByRole('button')).toHaveText('SELECTED');
   });
 
   // Navigate back to the the "My Lists" section of the user profile
-  await page.getByLabel('User Profile').click();
+  await page.getByRole('button', { name: 'User Profile' }).click();
   await page.getByRole('link', { name: 'My Lists' }).click();
 
   // Verify the movie list has been updated with the text "my favorite movies"
-  await expect.soft(page.getByLabel('movie list').getByRole('link')).toHaveText(
+  await expect(page.getByRole('listitem', { name: 'movie list' }).getByRole('link')).toHaveText(
     /my favorite movies/,
   );
 });
@@ -134,20 +130,18 @@ test('should share a list', async ({ page }) => {
 
   // Click on the "Share" button and verify the share dialog is displayed
   await page.getByRole('button', { name: 'Share' }).click();
-  await expect
-    .soft(page.getByRole('dialog').getByRole('heading'))
+  await expect(page.getByRole('dialog').getByRole('heading'))
     .toHaveText('Share my favorite movies');
 
   // Verify that the URL input in the dialog contains a value with "list"
-  await expect
-    .soft(page.getByRole('dialog').getByLabel('URL'))
+  await expect(page.getByRole('dialog').getByLabel('URL'))
     .toHaveValue(/list/);
 
   // Close the dialog by clicking outside of it
   await page.locator('body').click({ position: { x: 0, y: 0 } });
 
   // Verify that the dialog is no longer visible
-  await expect.soft(page.getByRole('dialog')).not.toBeVisible();
+  await expect(page.getByRole('dialog')).not.toBeVisible();
 });
 
 test(
@@ -171,9 +165,8 @@ test(
     await page.getByRole('button', { name: 'Yes' }).click();
 
     // Verify that the list has been deleted
-    await expect
-      .soft(page.getByRole('heading', { level: 3 }))
+    await expect(page.getByRole('heading', { level: 3 }))
       .toHaveText(/no lists/);
-    await expect.soft(page.getByRole('listitem', { name: 'movie' })).toHaveCount(0);
+    await expect(page.getByRole('listitem', { name: 'movie' })).toHaveCount(0);
   },
 );

tests/logged-in/manage-lists-before-each.spec.ts

@@ -9,26 +9,29 @@ test('editing an existing list', async ({ listPage }) => {
   await page.getByRole('link', { name: 'Edit' }).click();
 
   await test.step('update list name and description', async () => {
-    await page.getByLabel('Name').fill('my action movies');
-    await page.getByLabel('Description').fill('my favorite action movies');
+    await page.getByRole('textbox', { name: 'Name' }).fill('my action movies');
+    await page.getByRole('textbox', { name: 'Description' }).fill('my favorite action movies');
     await page.getByRole('button', { name: 'Save' }).click();
 
     // Verify that the list name and description have been updated
-    await expect.soft(page.getByLabel('Name')).toHaveValue('my action movies');
-    await expect
-      .soft(page.getByLabel('Description'))
+    await expect(page.getByRole('textbox', { name: 'Name' })).toHaveValue('my action movies');
+    await expect(page.getByRole('textbox', { name: 'Description' }))
       .toHaveValue('my favorite action movies');
+    // TODO: replace regex with text when Playwright is rolled.
+    await expect(page.locator('main')).toMatchAriaSnapshot(`
+      - heading "my action movies" [level=1]
+      - textbox "Name": my action movies
+      - textbox "Description": /my favorite action movies/
+    `);
     await page.getByRole('button', { name: 'Save' }).click();
   });
 
   await test.step('verify updated list name and description on my list page', async () => {
     await page.getByRole('link', { name: 'View List' }).click();
-    await expect
-      .soft(page.getByRole('heading', { level: 1 }))
-      .toHaveText('my action movies');
-    await expect.soft(page.getByRole('heading').nth(1)).toHaveText(
-      'my favorite action movies',
-    );
+    await expect(page.getByRole('main')).toMatchAriaSnapshot(`
+      - heading "my action movies" [level=1]
+      - heading "my favorite action movies" [level=2]
+    `);
   });
 });
 
@@ -41,55 +44,54 @@ test('adding movies to a list', async ({ listPage }) => {
   await addMovie(page, 'Gunner');
 
   // Verify that the movies have been added to the list
-  await expect.soft(page.getByRole('listitem', { name: 'movie' })).toHaveText([
-    /Twisters/,
-    /The Garfield Movie/,
-    /Bad Boys: Ride or Die/,
-    /Inside Out 2/,
-    /Gunner/,
-  ]);
+  await expect(page.getByRole('list', { name: 'movies' })).toMatchAriaSnapshot(`
+    - listitem: "Twisters"
+    - listitem: "The Garfield Movie"
+    - listitem: "Bad Boys: Ride or Die"
+    - listitem: "Inside Out 2"
+    - listitem: "Gunner"
+  `);
 });
 
 test('deleting movies from a list', async ({ listPage }) => {
   // set the page to the listPage fixture
   const page = listPage;
 
   await page.getByRole('button', { name: 'Add/Remove Movies' }).click();
-  await expect
-    .soft(page.getByRole('listitem', { name: 'movie' }))
-    .toHaveText([/Twisters/, /The Garfield Movie/, /Bad Boys: Ride or Die/]);
+  await expect(page.getByRole('list', { name: 'movies' })).toMatchAriaSnapshot(`
+    - listitem: "Twisters"
+    - listitem: "The Garfield Movie"
+    - listitem: "Bad Boys: Ride or Die"
+  `);
 
   await test.step('delete the second movie from list', async () => {
     const movie2 = page
       .getByRole('listitem')
       .filter({ hasText: /The Garfield Movie/ });
-    await movie2.getByLabel('Remove').click();
+    await movie2.getByRole('button', { name: 'Remove' }).click();
   });
 
-  await expect.soft(page.getByRole('listitem', { name: 'movie' })).toHaveText([
-    /Twisters/,
-    /Bad Boys: Ride or Die/,
-  ]);
+  await expect(page.getByRole('list', { name: 'movies' })).toMatchAriaSnapshot(`
+    - listitem: "Twisters"
+    - listitem: "Bad Boys: Ride or Die"
+  `);
+  await expect(page.getByRole('listitem', { name: 'movie' })).toHaveCount(2);
 });
 
 test('sharing a list', async ({ listPage }) => {
   // set the page to the listPage fixture
   const page = listPage;
 
   await page.getByRole('button', { name: 'Share' }).click();
-  await expect
-    .soft(page.getByRole('dialog').getByRole('heading'))
-    .toHaveText('Share my favorite movies');
-
-  // Verify that the URL input in the dialog contains a value with "list"
-  await expect
-    .soft(page.getByRole('dialog').getByLabel('URL'))
-    .toHaveValue(/list/);
+  await expect(page.getByRole('dialog')).toMatchAriaSnapshot(`
+    - heading "Share my favorite movies" [level=2]
+    - textbox "URL": /list/
+  `);
 
   await test.step('close the share dialog', async () => {
     // Close the dialog by clicking outside of it
     await page.locator('body').click({ position: { x: 0, y: 0 } });
-    await expect.soft(page.getByRole('dialog')).not.toBeVisible();
+    await expect(page.getByRole('dialog')).not.toBeVisible();
   });
 });
 
@@ -101,14 +103,13 @@ test('deleting a list', async ({ listPage }) => {
   await page.getByRole('link', { name: 'Delete List' }).click();
 
   await test.step('confirm the deletion', async () => {
-    await page.getByLabel(/Click the button below/).click();
+    await page.getByRole('button', { name: /Click the button below/ }).click();
     await page.getByRole('button', { name: 'Yes' }).click();
   });
 
   // Verify that the list has been deleted
-  await expect.soft(page).toHaveURL(/my-lists/);
-  await expect
-    .soft(page.getByRole('heading', { level: 3 }))
+  await expect(page).toHaveURL(/my-lists/);
+  await expect(page.getByRole('heading', { level: 3 }))
     .toHaveText(/no lists/);
-  await expect.soft(page.getByRole('listitem', { name: 'movie' })).toHaveCount(0);
+  await expect(page.getByRole('listitem', { name: 'movie' })).toHaveCount(0);
 });