refactor/simplify playwright tests (#51954)

e2e/action-row.spec.ts

@@ -14,9 +14,6 @@ test.beforeEach(async ({ page }) => {
     '/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form'
   );
 });
-test.afterEach(async ({ page }) => {
-  await page.close();
-});
 
 function getActionRowLocator(page: Page): Locator {
   return page.getByTestId('action-row');

e2e/blocked.test.ts

@@ -1,42 +1,22 @@
-import { test, expect, type Page } from '@playwright/test';
+import { test, expect } from '@playwright/test';
 
-let page: Page;
-
-test.beforeAll(async ({ browser }) => {
-  page = await browser.newPage();
-  await page.goto('/blocked');
-});
-
-test.afterAll(async () => {
-  await page.close();
-});
-
-test.describe('Blocked Page Tests', () => {
-  test('should display the correct title', async () => {
+test.describe('Blocked Page', () => {
+  test('should render correctly', async ({ page }) => {
+    await page.goto('/blocked');
     await expect(page).toHaveTitle('Access Denied | freeCodeCamp.org');
-  });
 
-  test('should display the main heading', async () => {
     const mainHeading = page.getByTestId('main-heading');
-    expect(mainHeading).not.toBeNull();
-    expect(await mainHeading.textContent()).toBe("We can't log you in.");
-  });
+    await expect(mainHeading).toHaveText("We can't log you in.");
 
-  test('should display the blocked body text', async () => {
     const blockedBodyText = page.getByTestId('blocked-body-text');
-    expect(blockedBodyText).not.toBeNull();
-    expect(await blockedBodyText.textContent()).toContain(
-      "United States export control and economic sanctions rules don't allow us to log in visitors from your region. Sorry about this. The situation may change in the future."
+    await expect(blockedBodyText).toHaveText(
+      "United States export control and economic sanctions rules don't allow us to log in visitors from your region. " +
+        'Sorry about this. The situation may change in the future.If you want, you can learn more about these restrictions.'
     );
-    expect(await blockedBodyText.textContent()).toContain(
-      'If you want, you can learn more about these restrictions.'
-    );
-  });
 
-  test('should have a link to learn more about restrictions', async () => {
     const learnMoreLink = page.getByTestId('learn-more-link');
-    expect(learnMoreLink).not.toBeNull();
-    expect(await learnMoreLink.getAttribute('href')).toBe(
+    await expect(learnMoreLink).toHaveAttribute(
+      'href',
       'https://www.okta.com/blocked'
     );
   });

e2e/challenge-description.spec.ts

@@ -6,10 +6,6 @@ test.beforeEach(async ({ page }) => {
   );
 });
 
-test.afterEach(async ({ page }) => {
-  await page.close();
-});
-
 test.describe('Challenge Description Component Tests', () => {
   test('should be visible', async ({ page }) => {
     const challengeDescription = page.getByTestId('challenge-description');

e2e/challenges.test.ts

@@ -1,51 +1,13 @@
-import { test, expect, Page } from '@playwright/test';
-import translations from '../client/i18n/locales/english/translations.json';
+import { test, expect } from '@playwright/test';
 
-let page: Page;
+// TODO: are there other paths that need tests?
 const pathsToTest = [{ input: '/challenges', expected: '/learn' }];
 
-test.beforeAll(async ({ browser }) => {
-  page = await browser.newPage();
-});
-
-test.afterAll(async () => {
-  await page.close();
-});
-
 test.describe('Legacy Challenge Path Redirection Tests', () => {
-  const testLearnPageTitle = async () => {
-    await expect(page).toHaveTitle(
-      'Learn to Code — For Free — Coding Courses for Busy People'
-    );
-  };
-
-  const testLearnPageHeader = async () => {
-    const header = page.getByTestId('learn-heading');
-    await expect(header).toBeVisible();
-    await expect(header).toContainText(translations.learn.heading);
-  };
-
-  const runLearnTests = async () => {
-    await testLearnPageTitle();
-    await testLearnPageHeader();
-  };
-
   for (const { input, expected } of pathsToTest) {
-    test(`should redirect from ${input} to ${expected}, if it fails runs a DOM test`, async () => {
-      try {
-        await page.goto(input);
-        const currentPath = new URL(page.url()).pathname;
-        expect(currentPath).toBe(expected);
-        // Due to inconsistent URL behavior in WebKit & Mobile Safari.
-        // The URL may not correctly reflect the page.
-        // Fallback to running a DOM test and validate page content.
-        // Ensures we are on the expected page despite URL.
-      } catch (error) {
-        console.log(
-          `Failed to redirect from ${input} to ${expected}. Running DOM tests.`
-        );
-        await runLearnTests();
-      }
+    test(`should redirect from ${input} to ${expected}`, async ({ page }) => {
+      await page.goto(input);
+      await expect(page).toHaveURL(expected);
     });
   }
 });

e2e/coding-interview-prep-intro-page.spec.ts

@@ -8,10 +8,6 @@ test.describe('Certification intro page', () => {
     await page.goto('/learn/coding-interview-prep/');
   });
 
-  test.afterAll(async () => {
-    await page.close();
-  });
-
   test('Should have a relevant page title', async () => {
     await expect(page).toHaveTitle('Coding Interview Prep | freeCodeCamp.org');
   });

e2e/completion-model.spec.ts

@@ -11,10 +11,6 @@ test.beforeEach(async ({ page }) => {
     .click();
 });
 
-test.afterEach(async ({ page }) => {
-  await page.close();
-});
-
 test.describe('Challenge Completion Modal Tests (Signed Out)', () => {
   test('should render the modal correctly', async ({ page }) => {
     await expect(page.getByRole('heading')).toBeVisible();

e2e/donate-page-default.spec.ts

@@ -31,10 +31,6 @@ test.beforeAll(async ({ browser }) => {
   await page.goto('/donate');
 });
 
-test.afterAll(async () => {
-  await page.close();
-});
-
 test.describe('Donate Page', () => {
   test('should display the correct title', async () => {
     await expect(page).toHaveTitle(

e2e/editor.spec.ts

@@ -5,9 +5,6 @@ test.beforeEach(async ({ page }) => {
     '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
   );
 });
-test.afterEach(async ({ page }) => {
-  await page.close();
-});
 
 test.describe('Editor Component', () => {
   test('Should be clicked and able to insert text', async ({ page }) => {

e2e/email-settings.spec.ts

@@ -19,10 +19,6 @@ test.beforeEach(async ({ page }) => {
   await page.goto('/settings');
 });
 
-test.afterEach(async ({ page }) => {
-  await page.close();
-});
-
 test.describe('Email Settings', () => {
   test('should display email settings section header on settings page', async ({
     page

e2e/flash.spec.ts

@@ -6,10 +6,6 @@ test.beforeEach(async ({ page }) => {
   await page.goto('/settings');
 });
 
-test.afterEach(async ({ page }) => {
-  await page.close();
-});
-
 const checkFlashMessageVisibility = async (page: Page, translation: string) => {
   const flashMessage = page.getByText(translation);
   await expect(flashMessage).toBeVisible();

e2e/help-modal.spec.ts

@@ -9,10 +9,6 @@ test.beforeEach(async ({ page }) => {
   );
 });
 
-test.afterEach(async ({ page }) => {
-  await page.close();
-});
-
 test.describe('Help Modal component', () => {
   test('renders the modal correctly', async ({ page }) => {
     await page

e2e/intro.spec.ts

@@ -5,10 +5,6 @@ test.beforeEach(async ({ page }) => {
   await page.goto('/learn');
 });
 
-test.afterEach(async ({ page }) => {
-  await page.close();
-});
-
 const IntroObject = {
   randomQuote: 'random-quote',
   randomAuthor: 'random-author',

e2e/landing.spec.ts

@@ -35,10 +35,6 @@ test.beforeAll(async ({ browser }) => {
   await page.goto('/');
 });
 
-test.afterAll(async () => {
-  await page.close();
-});
-
 test('The component Landing-top renders correctly', async () => {
   const landingHeading1 = page.getByTestId('landing-big-heading-1');
   await expect(landingHeading1).toHaveText('Learn to code — for free.');

e2e/learn.spec.ts

@@ -26,10 +26,6 @@ test.beforeAll(async ({ browser }) => {
   await page.goto('/learn');
 });
 
-test.afterAll(async () => {
-  await page.close();
-});
-
 test('the page should render with correct title', async () => {
   await expect(page).toHaveTitle(
     'Learn to Code — For Free — Coding Courses for Busy People'

e2e/link-ms-user.spec.ts

@@ -7,10 +7,6 @@ test.beforeEach(async ({ page }) => {
   );
 });
 
-test.afterEach(async ({ page }) => {
-  await page.close();
-});
-
 test.describe('Link MS user component (unlinked signedOut user)', () => {
   test('Component has proper main heading and relevant sections', async ({
     page

e2e/ms-trophy-show.spec.ts

@@ -10,10 +10,6 @@ test.beforeEach(async ({ page }) => {
   );
 });
 
-test.afterEach(async ({ page }) => {
-  await page.close();
-});
-
 test('the page should render with correct title', async ({ page }) => {
   await expect(page).toHaveTitle(
     'Write Your First Code Using C# - Trophy - Write Your First Code Using C# | Learn | freeCodeCamp.org'

e2e/not-found.spec.ts

@@ -16,10 +16,6 @@ test.beforeEach(async ({ page }) => {
   await page.goto('/404');
 });
 
-test.afterEach(async ({ page }) => {
-  await page.close();
-});
-
 test.describe('Not-Found Page Tests', () => {
   test('should display correct page title', async ({ page }) => {
     await expect(page).toHaveTitle(

e2e/progress-bar.spec.ts

@@ -9,10 +9,6 @@ test.beforeAll(async ({ browser }) => {
   );
 });
 
-test.afterAll(async () => {
-  await page.close();
-});
-
 test.describe('Progress bar component', () => {
   test('Should appear with the correct content after the user has submitted their code', async () => {
     const monacoEditor = page.getByLabel('Editor content');

e2e/project-preview-modal.spec.ts

@@ -9,10 +9,6 @@ test.beforeEach(async ({ page }) => {
   await page.goto(currentUrlPath);
 });
 
-test.afterEach(async ({ page }) => {
-  await page.close();
-});
-
 test.describe('Exit Project Preview Modal E2E Test Suite', () => {
   test('Verifies the Correct Rendering of the Project Preview Modal', async ({
     page

e2e/show-certificate-else.spec.ts

@@ -8,10 +8,6 @@ test.describe('Show certification else', () => {
     await page.goto('/certification/certifieduser/responsive-web-design');
   });
 
-  test.afterAll(async () => {
-    await page.close();
-  });
-
   test('while viewing someone else, should display the certificate information', async () => {
     await expect(page.getByTestId('successful-completion')).toBeVisible();
     await expect(page.getByTestId('certification-title')).toBeVisible();

e2e/show-certificate-own.spec.ts

@@ -10,10 +10,6 @@ test.describe('Show certification own', () => {
     await page.goto('/certification/certifieduser/responsive-web-design');
   });
 
-  test.afterAll(async () => {
-    await page.close();
-  });
-
   test('should display the certificate details', async () => {
     await expect(page.getByTestId('successful-completion')).toBeVisible();
     await expect(page.getByTestId('certification-title')).toBeVisible();

e2e/signout-modal.spec.ts

@@ -7,10 +7,6 @@ test.beforeEach(async ({ page }) => {
   await page.goto('/');
 });
 
-test.afterEach(async ({ page }) => {
-  await page.close();
-});
-
 test.describe('Signout Modal component', () => {
   test('renders the modal correctly', async ({ page }) => {
     await page.getByRole('button', { name: translations.buttons.menu }).click();

e2e/staging-warning-modal.spec.ts

@@ -5,10 +5,6 @@ test.beforeEach(async ({ page }) => {
   await page.goto('/');
 });
 
-test.afterEach(async ({ page }) => {
-  await page.close();
-});
-
 test.describe('Staging Warning Modal E2E Test Suite', () => {
   test('Verifies the Correct Rendering of the Staging Warning Modal', async ({
     page

e2e/unsubscribed.spec.ts

@@ -2,10 +2,6 @@ import { test, expect } from '@playwright/test';
 import translations from '../client/i18n/locales/english/translations.json';
 import metaTags from '../client/i18n/locales/english/meta-tags.json';
 
-test.afterEach(async ({ page }) => {
-  await page.close();
-});
-
 test.describe('The unsubscribed page without unsubscribeId', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/unsubscribed');

e2e/update-email.spec.ts

@@ -8,10 +8,6 @@ test.beforeAll(async ({ browser }) => {
   await page.goto('/update-email');
 });
 
-test.afterAll(async () => {
-  await page.close();
-});
-
 test.describe('The update-email page', () => {
   test('The page renders with correct title', async () => {
     await expect(page).toHaveTitle(

e2e/video-modal.spec.ts

@@ -10,10 +10,6 @@ test.beforeEach(async ({ page }) => {
   await page.getByTestId('watch-a-video').click();
 });
 
-test.afterEach(async ({ page }) => {
-  await page.close();
-});
-
 test.describe('Exit Video Modal E2E Test Suite', () => {
   test('Verifies the Correct Rendering of the Video Modal', async ({
     page