Repository: freeCodeCamp/freeCodeCamp
File: e2e/header.spec.ts (TypeScript)

Code before:
    const menuButton = page.getByTestId(headerComponentElements.menuButton);
    const menu = page.getByTestId(headerComponentElements.menu);
    await expect(menuButton).toBeVisible();
    await menuButton.click();
    await expect(menu).toBeVisible();

    const menuLinks = [
      {
        name: translations.buttons.donate,
        href: '/donate'
      },
      { name: translations.buttons.curriculum, href: '/learn' },
      { name: translations.buttons.forum, href: links.nav.forum },
      { name: translations.buttons.news, href: links.nav.news },
      {
        name: translations.buttons.radio,
        href: process.env.RADIO_LOCATION || 'https://coderadio.freecodecamp.org'
      },
      {
        name: translations.buttons.contribute,
        href: links.nav.contribute
      }
    ];

    for (const menuLink of menuLinks) {
      const link = page.getByRole('link', { name: menuLink.name, exact: true });
      await expect(link).toBeVisible();
      await expect(link).toHaveAttribute('href', menuLink.href);
    }
  });

  test('The Sign In button should redirect to api/signin', async ({
    browser
  }) => {
    // Sign out user in order to test Sign In button
    const context = await browser.newContext({
      storageState: { cookies: [], origins: [] }
    });
    const page = await context.newPage();
    await page.goto('/');

    const signInButton = page.getByRole('link', {
      name: translations.buttons['sign-in']
    });

    const apiLocation = process.env.API_LOCATION || 'http://localhost:3000';

    await expect(signInButton).toHaveAttribute('href', `${apiLocation}/signin`);
  });
});


Review comment (bug):
We previously needed to use the `exact: true` option to pick out the "Curriculum" link as we have a "freeCodeCamp Curriculum" and a "Curriculum" link on the page (ref https://github.com/freeCodeCamp/freeCodeCamp/pull/52005#discussion_r1364867018).

But we updated the link text in #52066 and the text is now "[Page name], Opens in new window", which fails the queries as the text no longer exactly matches. 

Instead of fixing the test setup, I changed the locator from `page` to `menu` to tell Playwright to grab the menu first (which is already queried a couple lines before) then look for the links within it, rather than combing through the entire page. This change allows us to remove the `exact: true` option, and should give us a small performance boost as well (I haven't run a comparison though).

Code after:
    const menu = page.getByTestId(headerComponentElements.menu);
    await expect(menuButton).toBeVisible();
    await menuButton.click();
    await expect(menu).toBeVisible();

    const menuLinks = [
      {
        name: translations.buttons.donate,
        href: '/donate'
      },
      {
        name: translations.buttons.curriculum,
        href: '/learn'
      },
      {
        name: translations.buttons.forum,
        href: links.nav.forum
      },
      {
        name: translations.buttons.news,
        href: links.nav.news
      },
      {
        name: translations.buttons.radio,
        href: process.env.RADIO_LOCATION || 'https://coderadio.freecodecamp.org'
      },
      {
        name: translations.buttons.contribute,
        href: links.nav.contribute
      }
    ];

    for (const menuLink of menuLinks) {
      const link = menu.getByRole('link', { name: menuLink.name });
      await expect(link).toBeVisible();
      await expect(link).toHaveAttribute('href', menuLink.href);
    }
  });

  test('The Sign In button should redirect to api/signin', async ({
    browser
  }) => {
    // Sign out user in order to test Sign In button
    const context = await browser.newContext({
      storageState: { cookies: [], origins: [] }
    });
    const page = await context.newPage();
    await page.goto('/');

    const signInButton = page.getByRole('link', {
      name: translations.buttons['sign-in']