Tests: Fix issue where consent pops up after click event

Author: lamATnginx

Makefile

@@ -16,8 +16,8 @@ list help::
 	@echo "<PRE-COMMIT>"
 	@echo "	     setup-pre-commit:		Sets up pre-commit (assuming it is installed)"
 	@echo "<PLAYWRIGHT TESTS>"
-	@echo "		 	tests: 		Runs playwright against the old theme."
-	@echo "     tests-update-screenshots:		Runs playwright against the old theme."
+	@echo "		 	tests: 		Runs playwright against the new theme."
+	@echo "     tests-update-screenshots:		Runs playwright against the new theme."
 
 .PHONY: biome-format biome-lint biome-all setup-pre-commit tests build-example-site
 FLAG :=

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/playwright.config.js

@@ -14,7 +14,8 @@ export default defineConfig({
     screenshots: 'only-on-failure',
     video: 'retain-on-failure',
     trace: 'on-first-retry',
-    timezoneId: 'America/Los_Angeles',
+    geolocation: { longitude: -8.486316, latitude: 51.896893 },
+    permissions: ['geolocation'],
   },
   projects: [
     {

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

@@ -40,6 +40,10 @@ async function openPage(page, sidebarPage) {
 }
 
 test.describe('Smoke test for sidebar', () => {
+
+  // Slow test
+  test.setTimeout(100_000);
+
   test.beforeEach(async ({ page }) => {
     await page.goto('/test-product/');
   });

tests/src/util.js

@@ -12,13 +12,14 @@ 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();
-  }
+  await page.addLocatorHandler(
+    page.locator('#truste-consent-content'), 
+    async () => {
+      const consentButton = page.locator('#truste-consent-required');
+      expect(consentButton).toBeVisible();
+      await consentButton.click();
+    }
+  );
 }
 
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));