From e037c3cbe2dc10883f015bc94af6b507d02c8a60 Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Fri, 27 Oct 2023 21:30:57 +0700
Subject: [PATCH] fix: failing Playwright tests (#52138)

---
 .../search/searchBar/search-bar-optimized.tsx |  4 +-
 e2e/header.spec.ts                            | 26 ++++++----
 e2e/search.spec.ts                            | 47 ++++++++++++-------
 3 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/client/src/components/search/searchBar/search-bar-optimized.tsx b/client/src/components/search/searchBar/search-bar-optimized.tsx
index 45fbb0d2be5..9e504a444ee 100644
--- a/client/src/components/search/searchBar/search-bar-optimized.tsx
+++ b/client/src/components/search/searchBar/search-bar-optimized.tsx
@@ -38,14 +38,13 @@ const SearchBarOptimized = ({
             role='search'
           >
             <label className='sr-only' htmlFor='ais-SearchBox-input'>
-              {t ? t('search.label') : ''}
+              {t('search.label')}
             </label>
             <input
               autoCapitalize='off'
               autoComplete='off'
               autoCorrect='off'
               id='ais-SearchBox-input'
-              data-playwright-test-label='header-search'
               className='ais-SearchBox-input'
               maxLength={512}
               onChange={onChange}
@@ -54,7 +53,6 @@ const SearchBarOptimized = ({
               type='search'
               value={value}
               ref={inputElementRef}
-              data-playwright-test-label='fcc-search-input'
             />
             <button
               className='ais-SearchBox-submit'
diff --git a/e2e/header.spec.ts b/e2e/header.spec.ts
index 06ada869d9e..d03617fa4bb 100644
--- a/e2e/header.spec.ts
+++ b/e2e/header.spec.ts
@@ -9,7 +9,6 @@ const headerComponentElements = {
   examNavLogo: 'header-exam-nav-microsoft-logo',
   universalNav: 'header-universal-nav',
   universalNavLogo: 'header-universal-nav-logo',
-  search: 'header-search',
   toggleLangButton: 'header-toggle-lang-button',
   languageList: 'header-lang-list',
   languageButton: 'header-lang-list-option',
@@ -68,15 +67,15 @@ test.describe('Header Component', () => {
     page,
     isMobile
   }) => {
-    const search = page.getByTestId(headerComponentElements.search);
+    const searchInput = page.getByLabel(translations.search.label);
     const menuButton = page.getByTestId(headerComponentElements.menuButton);
 
     if (isMobile) {
-      await expect(search).toBeHidden();
+      await expect(searchInput).toBeHidden();
       await menuButton.click();
-      await expect(search).toBeVisible();
+      await expect(searchInput).toBeVisible();
     } else {
-      await expect(search).toBeVisible();
+      await expect(searchInput).toBeVisible();
     }
   });
 
@@ -140,9 +139,18 @@ test.describe('Header Component', () => {
         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.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'
@@ -154,7 +162,7 @@ test.describe('Header Component', () => {
     ];
 
     for (const menuLink of menuLinks) {
-      const link = page.getByRole('link', { name: menuLink.name, exact: true });
+      const link = menu.getByRole('link', { name: menuLink.name });
       await expect(link).toBeVisible();
       await expect(link).toHaveAttribute('href', menuLink.href);
     }
diff --git a/e2e/search.spec.ts b/e2e/search.spec.ts
index 4b0d5aa89ec..965c72d9b50 100644
--- a/e2e/search.spec.ts
+++ b/e2e/search.spec.ts
@@ -1,7 +1,7 @@
 import { test, expect } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
 
 const searchElements = {
-  searchInput: 'fcc-search-input',
   searchButton: 'fcc-search-button',
   searchClear: 'fcc-search-clear'
 };
@@ -10,12 +10,15 @@ test.describe('Search', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/');
   });
+
   test('should display correct placeholder', async ({ page, isMobile }) => {
-    const search = page.getByTestId(searchElements.searchInput);
+    const searchInput = page.getByLabel(translations.search.label);
+
     if (isMobile) {
-      await expect(search).not.toBeVisible();
+      await expect(searchInput).not.toBeVisible();
     } else {
-      await expect(search).toHaveAttribute(
+      await expect(searchInput).toBeVisible();
+      await expect(searchInput).toHaveAttribute(
         'placeholder',
         'Search 9,000+ tutorials'
       );
@@ -23,18 +26,22 @@ test.describe('Search', () => {
   });
 
   test('searching with enter key', async ({ context, page, isMobile }) => {
-    const search = page.getByTestId(searchElements.searchInput);
+    const searchInput = page.getByLabel(translations.search.label);
+
     if (isMobile) {
-      await expect(search).not.toBeVisible();
+      await expect(searchInput).not.toBeVisible();
     } else {
-      await search.fill('test');
+      await expect(searchInput).toBeVisible();
+      await searchInput.fill('test');
       await page.keyboard.press('Enter');
 
-      // wait for results to open in new window
-      await page.waitForTimeout(1000);
+      // Wait for the new page to load.
+      const newPage = await context.waitForEvent('page');
+      await newPage.waitForLoadState();
 
-      const url = context.pages()[1].url();
-      expect(url).toBe('https://www.freecodecamp.org/news/search/?query=test');
+      expect(newPage.url()).toBe(
+        'https://www.freecodecamp.org/news/search/?query=test'
+      );
     }
   });
 
@@ -43,11 +50,13 @@ test.describe('Search', () => {
     page,
     isMobile
   }) => {
-    const search = page.getByTestId(searchElements.searchInput);
+    const searchInput = page.getByLabel(translations.search.label);
+
     if (isMobile) {
-      await expect(search).not.toBeVisible();
+      await expect(searchInput).not.toBeVisible();
     } else {
-      await search.fill('test');
+      await expect(searchInput).toBeVisible();
+      await searchInput.fill('test');
       await page.getByTestId(searchElements.searchButton).click();
 
       // wait for results to open in new window
@@ -59,14 +68,16 @@ test.describe('Search', () => {
   });
 
   test('clearing search with clear button', async ({ page, isMobile }) => {
-    const search = page.getByTestId(searchElements.searchInput);
+    const searchInput = page.getByLabel(translations.search.label);
+
     if (isMobile) {
-      await expect(search).not.toBeVisible();
+      await expect(searchInput).not.toBeVisible();
     } else {
-      await search.fill('test');
+      await expect(searchInput).toBeVisible();
+      await searchInput.fill('test');
       await page.getByTestId(searchElements.searchClear).click();
 
-      await expect(search).toHaveValue('');
+      await expect(searchInput).toHaveValue('');
     }
   });
 });