feat: convert "navigation tests spec" to Playwright (#54944)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
2026-05-28 18:26:54 +00:00 · 2024-05-25 21:40:44 +02:00
parent 58b3218f95
commit 020a8c5c3e
10 changed files with 102 additions and 20 deletions
@@ -15,7 +15,7 @@ const challenge2 = {
 const rwdChallenge = {
  url: '/learn/2022/responsive-web-design/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage',
  nextUrl:
-    'http://localhost:8000/learn/2022/responsive-web-design/#build-a-personal-portfolio-webpage-project'
+    '/learn/2022/responsive-web-design/#build-a-personal-portfolio-webpage-project'
 };

 const rwdChallengeSolution = `<head>
@@ -57,7 +57,7 @@ test('User can reset challenge', async ({ page, isMobile, browserName }) => {

  // Modify the text in the editor pane, clearing first, otherwise the existing
  // text will be selected before typing
-  await focusEditor({ page, isMobile, browserName });
+  await focusEditor({ page, isMobile });
  await clearEditor({ page, browserName });
  await getEditors(page).fill(updatedText);
  await expect(updatedFrame).toBeVisible({ timeout: 10000 });
@@ -44,7 +44,7 @@ test.describe('Python Terminal', () => {
      'learn/scientific-computing-with-python/learn-string-manipulation-by-building-a-cipher/step-2'
    );

-    await focusEditor({ page, isMobile, browserName });
+    await focusEditor({ page, isMobile });
    await clearEditor({ page, browserName });
    // Then enter invalid code
    await page.keyboard.insertText('def');
@@ -0,0 +1,3 @@
+{
+  "content": "<head><style>@media (max-width: 500px){nav{display: none;}}</style></head><body><nav id=\"navbar\"><a href=\"#projects\">text</a> | </nav><main><section id=\"welcome-section\"><h1>text</h1></section><hr><section id=\"projects\"><h1>Projects</h1><h2 class=\"project-tile\"><a id=\"profile-link\" target=\"_blank\" href=\"https://freecodecamp.org\">text</a></h2></section><hr></body></html>"
+}
@@ -110,7 +110,7 @@ test('Prompts unauthenticated user to sign in to save progress', async ({
  const loginButton = page.getByRole('link', {
    name: 'Sign in to save your progress'
  });
-  await focusEditor({ page, browserName, isMobile });
+  await focusEditor({ page, isMobile });
  await clearEditor({ page, browserName });

  await editor.fill(
@@ -0,0 +1,90 @@
+import { test } from '@playwright/test';
+import solution from './fixtures/build-a-personal-portfolio-webpage.json';
+import { clearEditor, focusEditor } from './utils/editor';
+import { isMacOS } from './utils/user-agent';
+
+// middle of block
+const challenge1 = {
+  url: '/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator',
+  nextUrl:
+    '/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-25--5-clock'
+};
+
+// last in superblock
+const challenge2 = {
+  url: '/learn/college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer',
+  nextUrl:
+    '/learn/college-algebra-with-python/#build-a-data-graph-explorer-project'
+};
+
+const rwdChallenge = {
+  url: '/learn/2022/responsive-web-design/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage',
+  nextUrl:
+    '/learn/2022/responsive-web-design/#build-a-personal-portfolio-webpage-project'
+};
+test.use({ storageState: 'playwright/.auth/certified-user.json' });
+test.describe('Navigation from the middle or end (URL solution)', () => {
+  test('In the middle of a block should take you to the next challenge', async ({
+    page
+  }) => {
+    await page.goto(challenge1.url);
+    await page
+      .getByRole('textbox', { name: 'solution' })
+      .fill('https://example.com');
+    await page.keyboard.press('Enter');
+    await page
+      .getByRole('button', { name: 'Submit and go to next challenge' })
+      .click();
+    await page.waitForURL(challenge1.nextUrl);
+  });
+
+  test('at the end of a superblock should take you to the superblock page with the current block hash', async ({
+    page
+  }) => {
+    await page.goto(challenge2.url);
+    await page
+      .getByRole('textbox', { name: 'solution' })
+      .fill('https://example.com');
+    await page.keyboard.press('Enter');
+    await page
+      .getByRole('button', { name: 'Submit and go to next challenge' })
+      .click();
+    await page.waitForURL(challenge2.nextUrl);
+  });
+});
+
+test.describe('Should take you to the next superblock (with editor solution)', () => {
+  test.skip(
+    ({ browserName }) => browserName !== 'chromium',
+    'Only chromium allows us to use the clipboard API.'
+  );
+  test('at the end of a superblock should take you to the superblock page with the current block hash', async ({
+    page,
+    isMobile,
+    browserName,
+    context
+  }) => {
+    await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+    await page.goto(rwdChallenge.url);
+    await focusEditor({ page, isMobile });
+    await clearEditor({ page, browserName });
+
+    await page.evaluate(
+      async solution => await navigator.clipboard.writeText(solution.content),
+      solution
+    );
+
+    if (isMacOS) {
+      await page.keyboard.press('Meta+v');
+    } else {
+      await page.keyboard.press('Control+v');
+    }
+
+    await page.keyboard.press('Control+Enter');
+
+    await page
+      .getByRole('button', { name: 'Submit and go to next challenge' })
+      .click();
+    await page.waitForURL(rwdChallenge.nextUrl);
+  });
+});
@@ -28,10 +28,9 @@ test.describe('Challenge Preview Component', () => {

  test('should render correct output of changed code', async ({
    page,
-    browserName,
    isMobile
  }) => {
-    await focusEditor({ page, isMobile, browserName });
+    await focusEditor({ page, isMobile });

    await page.keyboard.insertText('<h1>FreeCodeCamp</h1>');
    if (isMobile) {
@@ -15,7 +15,7 @@ test.describe('Progress bar component', () => {
    // If focusEditor fails, typically it's because the instructions are too
    // large. There's a bug that means `scrollIntoView` does not work in the
    // editor and so we have to pick less verbose challenges until that's fixed.
-    await focusEditor({ page, isMobile, browserName });
+    await focusEditor({ page, isMobile });
    await clearEditor({ page, browserName });

    await page.keyboard.insertText(
@@ -148,7 +148,7 @@ test.describe('JavaScript projects can be submitted and then viewed in /settings
      '/learn/javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker'
    );

-    await focusEditor({ page, browserName, isMobile });
+    await focusEditor({ page, isMobile });
    await clearEditor({ page, browserName });

    await page.evaluate(
@@ -8,12 +8,10 @@ export const getEditors = (page: Page) => {

 export const focusEditor = async ({
  page,
-  isMobile,
-  browserName
+  isMobile
 }: {
  page: Page;
  isMobile: boolean;
-  browserName: string;
 }) => {
  if (isMobile) {
    const codeBtn = page.getByRole('tab', { name: 'Code' });
@@ -23,15 +21,7 @@ export const focusEditor = async ({
    await codeBtn.click({ force: true });
  }

-  // The editor has an overlay div, which prevents the click event from bubbling up in iOS Safari.
-  // This is a quirk in this browser-OS combination, and the workaround here is to use `.focus()`
-  // in place of `.click()` to focus on the editor.
-  // Ref: https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
-  if (isMobile && browserName === 'webkit') {
-    await getEditors(page).focus();
-  } else {
-    await getEditors(page).click();
-  }
+  await getEditors(page).focus();
 };

 export async function clearEditor({