test(e2e,playwright): Header (#51835)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

client/src/components/Header/components/exam-nav.tsx

@@ -9,9 +9,17 @@ const ExamNav = (): JSX.Element => {
   const { t } = useTranslation();
 
   return (
-    <nav aria-label={t('aria.primary-nav')} className='exam-nav' id='exam-nav'>
+    <nav
+      aria-label={t('aria.primary-nav')}
+      className='exam-nav'
+      id='exam-nav'
+      data-playwright-test-label='header-exam-nav'
+    >
       <FreeCodeCampLogo aria-hidden='true' />
-      <MicrosoftLogo aria-hidden='true' />
+      <MicrosoftLogo
+        aria-hidden='true'
+        data-playwright-test-label='header-exam-nav-microsoft-logo'
+      />
     </nav>
   );
 };

client/src/components/Header/components/universal-nav.tsx

@@ -51,11 +51,17 @@ const UniversalNav = ({
       aria-label={t('aria.primary-nav')}
       className='universal-nav'
       id='universal-nav'
+      data-playwright-test-label='header-universal-nav'
     >
       {isSearchExposedWidth && (
         <div className='universal-nav-left'>{search}</div>
       )}
-      <Link className='universal-nav-logo' id='universal-nav-logo' to='/learn'>
+      <Link
+        className='universal-nav-logo'
+        id='universal-nav-logo'
+        to='/learn'
+        data-playwright-test-label='header-universal-nav-logo'
+      >
         <NavLogo />
       </Link>
       <div className='universal-nav-right main-nav'>

client/src/components/Header/index.tsx

@@ -82,7 +82,11 @@ class Header extends React.Component<Props, { displayMenu: boolean }> {
     const { examInProgress, fetchState, user, skipButtonText } = this.props;
     return (
       <header className='site-header'>
-        <a href='#content-start' className='skip-to-content-button'>
+        <a
+          href='#content-start'
+          className='skip-to-content-button'
+          data-playwright-test-label='header-skip-content'
+        >
           {skipButtonText}
         </a>
         {examInProgress ? (

e2e/header.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
+
+const headerComponentElements = {
+  skipContent: 'header-skip-content',
+  examNav: 'header-exam-nav',
+  examNavLogo: 'header-exam-nav-microsoft-logo',
+  universalNav: 'header-universal-nav',
+  universalNavLogo: 'header-universal-nav-logo'
+} as const;
+
+const examUrl =
+  '/learn/foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam';
+
+test.use({ storageState: 'playwright/.auth/certified-user.json' });
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(examUrl);
+});
+
+test.afterEach(async ({ page }) => {
+  await page.close();
+});
+
+test('Has link for skip content', async ({ page }) => {
+  const skipContent = page.getByTestId(headerComponentElements.skipContent);
+  await expect(skipContent).toBeVisible();
+  await expect(skipContent).toHaveAttribute('href', '#content-start');
+});
+
+test('Has nav for universal', async ({ page }) => {
+  const universalNavigation = page.getByTestId(
+    headerComponentElements.universalNav
+  );
+  const universalNavigationLogo = page.getByTestId(
+    headerComponentElements.universalNavLogo
+  );
+  await expect(universalNavigation).toBeVisible();
+  await expect(universalNavigationLogo).toBeVisible();
+  await expect(universalNavigationLogo).toHaveAttribute('href', '/learn');
+});
+
+test('Has nav for exams', async ({ page }) => {
+  await page
+    .getByRole('button', {
+      name: translations.buttons['click-start-exam']
+    })
+    .click();
+  await expect(page).toHaveURL(examUrl);
+  await expect(page.getByTestId(headerComponentElements.examNav)).toBeVisible();
+  await expect(
+    page.getByTestId(headerComponentElements.examNavLogo)
+  ).toBeVisible();
+});