Tests: Fix issue where consent pops up after click event

Author: lamATnginx

layouts/partials/header.html

@@ -43,7 +43,7 @@
                 {{ partial "lucide" (dict "context" . "icon" "chevron-down") }}
                 </span>
             </button>
-            <div class="dropdown-content" id="dropdown-content" data-testid="header__f5sites_content">
+            <div class="dropdown-content" id="dropdown-content" data-testid="header__f5sites__content">
               <ul>
                 {{ range $f5Sites }}
                   <li>

tests/src/header.spec.js

@@ -46,7 +46,7 @@ test.describe('Smoke test for header', () => {
   test('F5 Sites button works', async ({ page }) => {
     const f5SitesButton = await page.getByTestId('header__f5sites__button');
     await f5SitesButton.click();
-    const f5SitesContent = await page.getByTestId('header__f5sites_content');
+    const f5SitesContent = await page.getByTestId('header__f5sites__content');
     await expect(f5SitesContent.count()).toBeTruthy();
   });
 });

tests/src/sidebar.spec.js

@@ -56,10 +56,12 @@ test.describe('Smoke test for sidebar', () => {
   test('each section page on sidebar renders', async ({ page }) => {
     /* Click on each link */
     const sidebarPages = await page.getByTestId('sidebar__page').all();
+    let i = 0;
     for (const sidebarPage of sidebarPages) {
-      await waitFor(async () => await handleConsentPopup(page));
+      await waitFor(async () => await handleConsentPopup(page, i > 0));
       await openPage(page, sidebarPage);
       await runSmokeTestOnPage(page);
+      i += 1;
     }
   });
 });

tests/src/util.js

@@ -11,14 +11,15 @@ export async function runSmokeTestOnPage(page) {
 }
 
 // THE GDPR Consent button appears when test is run from EU locations. This handles that popup.
-export async function handleConsentPopup(page) {
-  const consentContent = page.locator('#truste-consent-content');
-  const isConsentContentVisibile = await consentContent.isVisible();
-  if (isConsentContentVisibile) {
-    const consentButton = page.locator('#truste-consent-required');
-    expect(consentButton).toBeVisible();
-    await consentButton.click();
+export async function handleConsentPopup(page, isClickedAlready = false) {
+  if (isClickedAlready) {
+    return;
   }
+  const consentContent = page.locator('#truste-consent-content');
+  await consentContent.waitFor({ state: 'visible' });
+  const consentButton = page.locator('#truste-consent-required');
+  expect(consentButton).toBeVisible();
+  await consentButton.click();
 }
 
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));