Use getByTestId instead of locator with data-testid.

GoogleChrome · Sep 6, 2023 · be11d0c · be11d0c
1 parent 4b3222c
commit be11d0c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/packages/playwright/tests/chromedash-guide-new-page_pwtest.js b/packages/playwright/tests/chromedash-guide-new-page_pwtest.js
@@ -20,17 +20,17 @@ test('navigate to create feature page', async ({page}) => {
   // console.log('navigate to create feature page');
 
   // Expect create feature button to be present.
-  const createFeatureButton = page.locator('[data-testid=create-feature-button]');
+  const createFeatureButton = page.getByTestId('create-feature-button');
   await expect(createFeatureButton).toBeVisible({timeout: 30000});
 
   // Take a screenshot of header with "Create feature" button.
-  await expect(page.locator('[data-testid=header]')).toHaveScreenshot('create-feature-button.png');
+  await expect(page.getByTestId('header')).toHaveScreenshot('create-feature-button.png');
 
   // Navigate to the new feature page by clicking.
   createFeatureButton.click();
 
   // Expect "Add a feature" header to be present.
-  const addAFeatureHeader = page.locator('[data-testid=add-a-feature]');
+  const addAFeatureHeader = page.getByTestId('add-a-feature');
   await expect(addAFeatureHeader).toBeVisible();
 
   // Take a screenshot of the content area.
@@ -44,7 +44,7 @@ test('enter feature name', async ({page}) => {
   test.setTimeout(90000);
 
   // Navigate to the new feature page.
-  const createFeatureButton = page.locator('[data-testid=create-feature-button]');
+  const createFeatureButton = page.getByTestId('create-feature-button');
   createFeatureButton.click({timeout: 10000});
 
   const featureNameInput = page.locator('input[name="name"]');

diff --git a/packages/playwright/tests/test_utils.js b/packages/playwright/tests/test_utils.js
@@ -122,11 +122,11 @@ export async function login(page) {
   await delay(1000);
 
   // Check whether we are already or still logged in.
-  let accountIndicator = page.locator('[data-testid=account-indicator]');
+  let accountIndicator = page.getByTestId('account-indicator');
   while (await accountIndicator.isVisible()) {
     // console.log('Already (still) logged in. Need to logout.');
     await accountIndicator.hover({timeout: 5000});
-    const signOutLink = page.locator('[data-testid=sign-out-link]');
+    const signOutLink = page.getByTestId('sign-out-link');
     await expect(signOutLink).toBeVisible();
 
     await signOutLink.hover({timeout: 5000});
@@ -139,13 +139,13 @@ export async function login(page) {
     // console.log('Should be logged out ow.');
     await delay(1000);
 
-    accountIndicator = page.locator('[data-testid=account-indicator]');
+    accountIndicator = page.getByTestId('account-indicator');
   }
   await delay(1000);
 
   // Expect login button to be present.
   // console.info('expect login button to be present and visible');
-  const loginButton = page.locator('button[data-testid=dev-mode-sign-in-button]');
+  const loginButton = page.getByTestId('dev-mode-sign-in-button');
   await expect(loginButton).toBeVisible({timeout: loginTimeout});
 
   await loginButton.click({timeout: 1000, delay: 100});
@@ -158,12 +158,12 @@ export async function login(page) {
 
   // Take a screenshot of header that should have "Create feature" button.
   // console.log('take a screenshot of header that should have "Create feature" button');
-  await expect(page.locator('[data-testid=header]')).toHaveScreenshot('after-login-click.png');
+  await expect(page.getByTestId('header')).toHaveScreenshot('after-login-click.png');
 
   // Check that we are logged in now.
   // Expect a nav container to be present.
   // This sometimes fails, even though the screenshot seems correct.
-  accountIndicator = page.locator('[data-testid=account-indicator]');
+  accountIndicator = page.getByTestId('account-indicator');
   await expect(accountIndicator).toBeVisible({ timeout: loginTimeout });
 
   // After first login, reduce timeout/delay.
@@ -186,13 +186,13 @@ export async function logout(page) {
   page.mouse.move(0, 0); // Move away from content on page.
   await delay(1000);
 
-  const accountIndicator = page.locator('[data-testid=account-indicator]');
+  const accountIndicator = page.getByTestId('account-indicator');
   await expect(accountIndicator).toBeVisible({timeout: 20000});
   await delay(1000);
 
   // Need to hover to see the sign-out-link
   await accountIndicator.hover({timeout: 5000});
-  const signOutLink = page.locator('[data-testid=sign-out-link]');
+  const signOutLink = page.getByTestId('sign-out-link');
   await expect(signOutLink).toBeVisible();
   await signOutLink.click({timeout: 5000});