refactor(test): create helper to look for alerts (#55483)

e2e/certification.spec.ts

@@ -1,5 +1,7 @@
 import { test, expect, Page } from '@playwright/test';
+
 import translations from '../client/i18n/locales/english/translations.json';
+import { alertToBeVisible } from './utils/alerts';
 
 test.use({ storageState: 'playwright/.auth/certified-user.json' });
 
@@ -142,9 +144,7 @@ test.describe('Invalid certification page', () => {
     {
       await page.goto('/certification/certifieduser/invalid-certification');
       await expect(page).toHaveURL('/');
-      await expect(page.getByRole('alert')).toHaveText(
+      await alertToBeVisible(page, translations.flash['certificate-missing']);
-        /The certification you tried to view does not exist/
-      );
     }
   };
   test.describe('for authenticated user', () => {

e2e/delete-modal.spec.ts

@@ -4,6 +4,7 @@ import { promisify } from 'util';
 import { test, expect } from '@playwright/test';
 
 import translations from '../client/i18n/locales/english/translations.json';
+import { alertToBeVisible } from './utils/alerts';
 
 const execP = promisify(exec);
 
@@ -111,11 +112,7 @@ test.describe('Delete Modal component', () => {
     ).not.toBeVisible();
 
     await expect(page).toHaveURL(/.*\/learn\/?/);
-    await expect(
+    await alertToBeVisible(page, translations.flash['account-deleted']);
-      page
-        .getByRole('alert')
-        .filter({ hasText: 'Your account has been successfully deleted' })
-    ).toBeVisible();
     // The user is signed out after their account is deleted
     await expect(page.getByRole('link', { name: 'Sign in' })).toHaveCount(2);
   });

e2e/hotkeys.spec.ts

@@ -3,6 +3,7 @@ import { test, expect, type Page } from '@playwright/test';
 import translations from '../client/i18n/locales/english/translations.json';
 import { authedRequest } from './utils/request';
 import { getEditors } from './utils/editor';
+import { alertToBeVisible } from './utils/alerts';
 
 const links = {
   basicJS1:
@@ -67,11 +68,7 @@ test.beforeEach(async ({ page }) => {
     .getByRole('button', { name: translations.buttons.on, exact: true })
     .click();
   // wait for the client to register the change:
-  await expect(
+  await alertToBeVisible(page, translations.flash['keyboard-shortcut-updated']);
-    page
-      .getByRole('alert')
-      .filter({ hasText: translations.flash['keyboard-shortcut-updated'] })
-  ).toBeVisible();
 });
 
 test.afterEach(

e2e/link-ms-user.spec.ts

@@ -2,6 +2,7 @@ import { execSync } from 'child_process';
 
 import { test, expect } from '@playwright/test';
 import translations from '../client/i18n/locales/english/translations.json';
+import { alertToBeVisible } from './utils/alerts';
 
 test.beforeEach(async ({ page }) => {
   await page.goto(
@@ -67,11 +68,7 @@ test.describe('Link MS user component (signed-in user)', () => {
     await expect(unlinkButton).toBeVisible();
     await unlinkButton.click();
 
-    await expect(
+    await alertToBeVisible(page, translations.flash.ms.transcript.unlinked);
-      page
-        .getByRole('alert')
-        .filter({ hasText: translations.flash.ms.transcript.unlinked })
-    ).toBeVisible();
 
     await expect(
       page.getByRole('heading', {

e2e/third-party-donation.spec.ts

@@ -1,6 +1,8 @@
 import { test, expect } from '@playwright/test';
 
+import translations from '../client/i18n/locales/english/translations.json';
 import stripeJson from './fixtures/donation/stripe.json';
+import { alertToBeVisible } from './utils/alerts';
 
 test.describe('third-party donation tests', () => {
   test.use({ storageState: 'playwright/.auth/certified-user.json' });
@@ -65,11 +67,7 @@ test.describe('third-party donation tests', () => {
 
     await expect(page.getByRole('alert')).toBeVisible();
 
-    await expect(page.getByRole('alert')).toContainText(
+    await alertToBeVisible(page, translations.donate['free-tech']);
-      'Your donations will support free technology education for people all over the world.'
+    await alertToBeVisible(page, translations.donate['visit-supporters']);
-    );
-    await expect(page.getByRole('alert')).toContainText(
-      'Visit supporters page to learn about your supporter benefits.'
-    );
   });
 });

e2e/user-token.spec.ts

@@ -1,5 +1,9 @@
 import { execSync } from 'child_process';
 import { test, expect } from '@playwright/test';
+
+import translations from '../client/i18n/locales/english/translations.json';
+import { alertToBeVisible } from './utils/alerts';
+
 test.use({ storageState: 'playwright/.auth/development-user.json' });
 
 test.beforeEach(() => {
@@ -36,9 +40,7 @@ test.describe('After creating token', () => {
     ).toBeVisible();
     await page.getByRole('button', { name: 'Delete my user token' }).click();
 
-    await expect(page.getByRole('alert')).toContainText(
+    await alertToBeVisible(page, translations.flash['token-deleted']);
-      /Your user token has been deleted./
-    );
     await expect(
       page.getByText('User Token', { exact: true })
     ).not.toBeVisible();

e2e/utils/alerts.ts

@@ -0,0 +1,4 @@
+import { expect, type Page } from '@playwright/test';
+
+export const alertToBeVisible = async (page: Page, text: string) =>
+  await expect(page.getByRole('alert').filter({ hasText: text })).toBeVisible();