From f6f00c3d286ed8269e004a5d11379d4097e23e3f Mon Sep 17 00:00:00 2001 From: Oliver Eyton-Williams Date: Sat, 14 Oct 2023 12:36:15 +0200 Subject: [PATCH] refactor/simplify playwright tests (#51954) --- e2e/action-row.spec.ts | 3 -- e2e/blocked.test.ts | 40 ++++------------ e2e/challenge-description.spec.ts | 4 -- e2e/challenges.test.ts | 48 ++------------------ e2e/coding-interview-prep-intro-page.spec.ts | 4 -- e2e/completion-model.spec.ts | 4 -- e2e/donate-page-default.spec.ts | 4 -- e2e/editor.spec.ts | 3 -- e2e/email-settings.spec.ts | 4 -- e2e/flash.spec.ts | 4 -- e2e/help-modal.spec.ts | 4 -- e2e/intro.spec.ts | 4 -- e2e/landing.spec.ts | 4 -- e2e/learn.spec.ts | 4 -- e2e/link-ms-user.spec.ts | 4 -- e2e/ms-trophy-show.spec.ts | 4 -- e2e/not-found.spec.ts | 4 -- e2e/progress-bar.spec.ts | 4 -- e2e/project-preview-modal.spec.ts | 4 -- e2e/show-certificate-else.spec.ts | 4 -- e2e/show-certificate-own.spec.ts | 4 -- e2e/signout-modal.spec.ts | 4 -- e2e/staging-warning-modal.spec.ts | 4 -- e2e/unsubscribed.spec.ts | 4 -- e2e/update-email.spec.ts | 4 -- e2e/video-modal.spec.ts | 4 -- 26 files changed, 15 insertions(+), 167 deletions(-) diff --git a/e2e/action-row.spec.ts b/e2e/action-row.spec.ts index 84c5ff8d137..b555c2a359e 100644 --- a/e2e/action-row.spec.ts +++ b/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'); diff --git a/e2e/blocked.test.ts b/e2e/blocked.test.ts index 0e08d65cc52..32b9f898cb4 100644 --- a/e2e/blocked.test.ts +++ b/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' ); }); diff --git a/e2e/challenge-description.spec.ts b/e2e/challenge-description.spec.ts index ecf1ba96aa6..1fec262ae4a 100644 --- a/e2e/challenge-description.spec.ts +++ b/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'); diff --git a/e2e/challenges.test.ts b/e2e/challenges.test.ts index 3cce4eb23bd..6bdef387d5b 100644 --- a/e2e/challenges.test.ts +++ b/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); }); } }); diff --git a/e2e/coding-interview-prep-intro-page.spec.ts b/e2e/coding-interview-prep-intro-page.spec.ts index 3a90fea4177..c6e7ce96b1c 100644 --- a/e2e/coding-interview-prep-intro-page.spec.ts +++ b/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'); }); diff --git a/e2e/completion-model.spec.ts b/e2e/completion-model.spec.ts index d504082d89a..be6e9e63bb9 100644 --- a/e2e/completion-model.spec.ts +++ b/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(); diff --git a/e2e/donate-page-default.spec.ts b/e2e/donate-page-default.spec.ts index 5bb24270ab4..61b7c4c0273 100644 --- a/e2e/donate-page-default.spec.ts +++ b/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( diff --git a/e2e/editor.spec.ts b/e2e/editor.spec.ts index 5e4f50085b6..4fc2864306b 100644 --- a/e2e/editor.spec.ts +++ b/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 }) => { diff --git a/e2e/email-settings.spec.ts b/e2e/email-settings.spec.ts index 2bd23d0b1ec..e9dcb9e60da 100644 --- a/e2e/email-settings.spec.ts +++ b/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 diff --git a/e2e/flash.spec.ts b/e2e/flash.spec.ts index 60507b1fcf5..93a85d82bc4 100644 --- a/e2e/flash.spec.ts +++ b/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(); diff --git a/e2e/help-modal.spec.ts b/e2e/help-modal.spec.ts index ed3a413843c..ec124f5c4e9 100644 --- a/e2e/help-modal.spec.ts +++ b/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 diff --git a/e2e/intro.spec.ts b/e2e/intro.spec.ts index 36ed181506c..7ce133b567c 100644 --- a/e2e/intro.spec.ts +++ b/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', diff --git a/e2e/landing.spec.ts b/e2e/landing.spec.ts index 42c82bfbf15..3abf8ebaeae 100644 --- a/e2e/landing.spec.ts +++ b/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.'); diff --git a/e2e/learn.spec.ts b/e2e/learn.spec.ts index 793b60056e6..4ca5b574f4c 100644 --- a/e2e/learn.spec.ts +++ b/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' diff --git a/e2e/link-ms-user.spec.ts b/e2e/link-ms-user.spec.ts index f7c309642c3..704747a85e8 100644 --- a/e2e/link-ms-user.spec.ts +++ b/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 diff --git a/e2e/ms-trophy-show.spec.ts b/e2e/ms-trophy-show.spec.ts index 86e15b54af5..8e7c5ed1ade 100644 --- a/e2e/ms-trophy-show.spec.ts +++ b/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' diff --git a/e2e/not-found.spec.ts b/e2e/not-found.spec.ts index d9321e5e553..ced4dbeafff 100644 --- a/e2e/not-found.spec.ts +++ b/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( diff --git a/e2e/progress-bar.spec.ts b/e2e/progress-bar.spec.ts index a2aa9ccd4ac..05aeebc1572 100644 --- a/e2e/progress-bar.spec.ts +++ b/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'); diff --git a/e2e/project-preview-modal.spec.ts b/e2e/project-preview-modal.spec.ts index 0fb3d797c64..cce7221f4b8 100644 --- a/e2e/project-preview-modal.spec.ts +++ b/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 diff --git a/e2e/show-certificate-else.spec.ts b/e2e/show-certificate-else.spec.ts index 1c661bd266a..e235e56f40c 100644 --- a/e2e/show-certificate-else.spec.ts +++ b/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(); diff --git a/e2e/show-certificate-own.spec.ts b/e2e/show-certificate-own.spec.ts index 7b2b87d38f3..1a5d98f9681 100644 --- a/e2e/show-certificate-own.spec.ts +++ b/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(); diff --git a/e2e/signout-modal.spec.ts b/e2e/signout-modal.spec.ts index 2667a860390..2ea71a5c33e 100644 --- a/e2e/signout-modal.spec.ts +++ b/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(); diff --git a/e2e/staging-warning-modal.spec.ts b/e2e/staging-warning-modal.spec.ts index 9ed0192d207..7789f1f7b24 100644 --- a/e2e/staging-warning-modal.spec.ts +++ b/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 diff --git a/e2e/unsubscribed.spec.ts b/e2e/unsubscribed.spec.ts index 291305155f6..8723dfce61c 100644 --- a/e2e/unsubscribed.spec.ts +++ b/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'); diff --git a/e2e/update-email.spec.ts b/e2e/update-email.spec.ts index 9a93c749972..63a519dc665 100644 --- a/e2e/update-email.spec.ts +++ b/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( diff --git a/e2e/video-modal.spec.ts b/e2e/video-modal.spec.ts index 7355af68962..d4e97368230 100644 --- a/e2e/video-modal.spec.ts +++ b/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