Fix production e2e tests: block ads in Playwright (#138)

* chore: block ads in Playwright

* review fix: explain this better

* review fix: also do this for playground

* chore: block gtm in all tests

* chore: fix typo

e2e/bot-firewall.spec.ts

@@ -1,5 +1,5 @@
 import { Locator, Page, expect, test } from '@playwright/test';
-import { resetScenarios } from './e2eTestUtils';
+import { blockGoogleTagManager, resetScenarios } from './e2eTestUtils';
 import { TEST_IDS } from '../src/client/testIDs';
 import { BOT_FIREWALL_COPY } from '../src/client/bot-firewall/botFirewallCopy';
 import { PRODUCTION_E2E_TEST_BASE_URL } from '../playwright.config';
@@ -18,12 +18,13 @@ test.skip(({ browserName }) => browserName !== 'chromium', 'Chrome-only');
  */
 test.setTimeout(60000);
 
-test.describe('Bot Firewall Demo CHROME_ONLY', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/coupon-fraud');
-    await resetScenarios(page);
-  });
+test.beforeEach(async ({ page }) => {
+  await blockGoogleTagManager(page);
+  await page.goto('/coupon-fraud');
+  await resetScenarios(page);
+});
 
+test.describe('Bot Firewall Demo CHROME_ONLY', () => {
   test('Should display bot visit and allow blocking/unblocking its IP address', async ({ page, context }) => {
     // Record bot visit in web-scraping page
     await page.goto('/web-scraping');

e2e/coupon-fraud.spec.ts

@@ -1,5 +1,5 @@
 import { Page, test, expect } from '@playwright/test';
-import { resetScenarios } from './e2eTestUtils';
+import { blockGoogleTagManager, resetScenarios } from './e2eTestUtils';
 import { TEST_IDS } from '../src/client/testIDs';
 import { COUPON_FRAUD_COPY } from '../src/pages/api/coupon-fraud/claim';
 
@@ -11,12 +11,13 @@ const submitCoupon = async (page: Page) => {
   await page.getByTestId(TEST_IDS.couponFraud.submitCoupon).click();
 };
 
-test.describe('Coupon fraud', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/coupon-fraud');
-    await resetScenarios(page);
-  });
+test.beforeEach(async ({ page }) => {
+  await blockGoogleTagManager(page);
+  await page.goto('/coupon-fraud');
+  await resetScenarios(page);
+});
 
+test.describe('Coupon fraud', () => {
   test('should not allow to claim coupon that does not exist', async ({ page }) => {
     await insertCoupon(page, 'Does not exist');
     await submitCoupon(page);

e2e/credential-stuffing.spec.ts

@@ -1,5 +1,5 @@
 import { Page, test } from '@playwright/test';
-import { resetScenarios } from './e2eTestUtils';
+import { blockGoogleTagManager, resetScenarios } from './e2eTestUtils';
 import { TEST_IDS } from '../src/client/testIDs';
 import { CREDENTIAL_STUFFING_COPY } from '../src/pages/api/credential-stuffing/authenticate';
 
@@ -8,12 +8,13 @@ const submitForm = async (page: Page) => {
   await page.getByTestId(TEST_IDS.credentialStuffing.login).click();
 };
 
-test.describe('Credential stuffing', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/credential-stuffing');
-    await resetScenarios(page);
-  });
+test.beforeEach(async ({ page }) => {
+  await blockGoogleTagManager(page);
+  await page.goto('/credential-stuffing');
+  await resetScenarios(page);
+});
 
+test.describe('Credential stuffing', () => {
   test('should prevent login even with correct credentials', async ({ page }) => {
     await submitForm(page);
     await page.getByText(CREDENTIAL_STUFFING_COPY.differentVisitorIdUseMFA).waitFor();

e2e/e2eTestUtils.ts

@@ -2,6 +2,19 @@ import { Page, expect } from '@playwright/test';
 import { TEST_ATTRIBUTES, TEST_IDS } from '../src/client/testIDs';
 import { Severity } from '../src/server/server';
 
+/**
+ *
+ * When running E2E the tests against Production on demo.fingerprint.com, loading our analytics tools can slow down the tests
+ * but primarily the Intercom bubble covers elements that the tests needs to click.
+ * We load all of these through GTM so blocking the initial GTM request stops Intercom and other tools from interfering
+ */
+export async function blockGoogleTagManager(page: Page) {
+  await page.route('**/*', (request) => {
+    request.request().url().includes('googletagmanager.com') ? request.abort() : request.continue();
+    return;
+  });
+}
+
 // Assumes you already are on a use case page with the Reset button present
 export async function resetScenarios(page: Page) {
   await page.getByTestId(TEST_IDS.reset.resetButton).click();

e2e/home.spec.ts

@@ -1,5 +1,10 @@
 import { expect, test } from '@playwright/test';
 import { TEST_IDS } from '../src/client/testIDs';
+import { blockGoogleTagManager } from './e2eTestUtils';
+
+test.beforeEach(async ({ page }) => {
+  await blockGoogleTagManager(page);
+});
 
 test.describe('Home page', () => {
   test('should list cards with use-cases', async ({ page }) => {

e2e/loan-risk.spec.ts

@@ -1,5 +1,5 @@
 import { Page, expect, test } from '@playwright/test';
-import { resetScenarios } from './e2eTestUtils';
+import { blockGoogleTagManager, resetScenarios } from './e2eTestUtils';
 import { TEST_IDS } from '../src/client/testIDs';
 import { LOAN_RISK_COPY } from '../src/pages/api/loan-risk/request-loan';
 
@@ -15,12 +15,13 @@ async function waitForBlockedLoanSubmit(page: Page) {
   await page.getByText(LOAN_RISK_COPY.inconsistentApplicationChallenged).waitFor();
 }
 
-test.describe('Loan risk', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/loan-risk');
-    await resetScenarios(page);
-  });
+test.beforeEach(async ({ page }) => {
+  await blockGoogleTagManager(page);
+  await page.goto('/loan-risk');
+  await resetScenarios(page);
+});
 
+test.describe('Loan risk', () => {
   test('should correctly calculate loan and approve it on first submit', async ({ page }) => {
     await page.getByTestId(TEST_IDS.loanRisk.loanValue).fill('2000');
     await page.getByTestId(TEST_IDS.loanRisk.monthlyIncome).fill('20000');

e2e/payment-fraud.spec.ts

@@ -1,5 +1,5 @@
 import { Page, test } from '@playwright/test';
-import { resetScenarios } from './e2eTestUtils';
+import { blockGoogleTagManager, resetScenarios } from './e2eTestUtils';
 import { PAYMENT_FRAUD_COPY } from '../src/pages/api/payment-fraud/place-order';
 import { TEST_IDS } from '../src/client/testIDs';
 
@@ -15,12 +15,13 @@ async function waitForInvalidCardSubmit(page: Page) {
   await page.getByText(PAYMENT_FRAUD_COPY.incorrectCardDetails).waitFor();
 }
 
-test.describe('Payment fraud', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/payment-fraud');
-    await resetScenarios(page);
-  });
+test.beforeEach(async ({ page }) => {
+  await blockGoogleTagManager(page);
+  await page.goto('/payment-fraud');
+  await resetScenarios(page);
+});
 
+test.describe('Payment fraud', () => {
   test('should pass payment with prefilled details', async ({ page }) => {
     await waitForSuccessfulSubmit(page);
   });

e2e/paywall.spec.ts

@@ -1,30 +1,30 @@
 import { test, expect } from '@playwright/test';
-import { resetScenarios } from './e2eTestUtils';
+import { assertAlert, blockGoogleTagManager, resetScenarios } from './e2eTestUtils';
 import { TEST_IDS } from '../src/client/testIDs';
 import { PAYWALL_COPY } from '../src/server/paywall/paywallCopy';
 
-test.describe('Paywall', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/paywall');
-    await resetScenarios(page);
-  });
+test.beforeEach(async ({ page }) => {
+  await blockGoogleTagManager(page);
+  await page.goto('/paywall');
+  await resetScenarios(page);
+});
 
+test.describe('Paywall', () => {
   test('Should show two articles, then show a paywall', async ({ page }) => {
     const articles = await page.getByTestId(TEST_IDS.paywall.articleCard);
 
     await articles.first().click();
-    await page.getByText(PAYWALL_COPY.nArticlesRemaining(1)).waitFor();
+    await assertAlert({ page, text: PAYWALL_COPY.nArticlesRemaining(1), severity: 'warning' });
     await expect(page.getByTestId(TEST_IDS.paywall.articleContent)).toBeVisible();
     await page.goBack();
 
     await articles.nth(1).click();
-    await page.getByText(PAYWALL_COPY.lastArticle).waitFor();
+    await assertAlert({ page, text: PAYWALL_COPY.lastArticle, severity: 'warning' });
     await expect(page.getByTestId(TEST_IDS.paywall.articleContent)).toBeVisible();
     await page.goBack();
 
     await articles.nth(2).click();
-
-    await page.getByText(PAYWALL_COPY.limitReached).waitFor();
+    await assertAlert({ page, text: PAYWALL_COPY.limitReached, severity: 'error' });
     await expect(page.getByTestId(TEST_IDS.paywall.articleContent)).toBeHidden();
   });
 });

e2e/personalization.spec.ts

@@ -1,17 +1,18 @@
 import { expect, test } from '@playwright/test';
-import { resetScenarios } from './e2eTestUtils';
+import { blockGoogleTagManager, resetScenarios } from './e2eTestUtils';
 import { TEST_IDS } from '../src/client/testIDs';
 
 const CART_ID = TEST_IDS.common.cart;
 const PERS_ID = TEST_IDS.personalization;
 
-test.describe('Personalization', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/personalization');
-    await page.getByText('Okay, I understand').click();
-    await resetScenarios(page);
-  });
+test.beforeEach(async ({ page }) => {
+  await blockGoogleTagManager(page);
+  await page.goto('/personalization');
+  await page.getByText('Okay, I understand').click();
+  await resetScenarios(page);
+});
 
+test.describe('Personalization', () => {
   test('should add and remove items from cart', async ({ page }) => {
     const products = page.getByTestId(PERS_ID.coffeeProduct);
     const cartItems = page.getByTestId(CART_ID.cartItem);

e2e/playground.spec.ts

@@ -3,6 +3,7 @@ import { Page, expect, test } from '@playwright/test';
 import { PLAYGROUND_TAG } from '../src/client/components/playground/playgroundTags';
 import { isAgentResponse, isServerResponse } from './zodUtils';
 import { ENDPOINT } from '../src/server/const';
+import { blockGoogleTagManager } from './e2eTestUtils';
 
 const getAgentResponse = async (page: Page) => {
   const agentResponse =
@@ -22,11 +23,12 @@ const clickPlaygroundRefreshButton = async (page: Page) => {
   await page.waitForTimeout(3000);
 };
 
-test.describe('Playground page', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/playground');
-  });
+test.beforeEach(async ({ page }) => {
+  await blockGoogleTagManager(page);
+  await page.goto('/playground');
+});
 
+test.describe('Playground page', () => {
   test('Page renders basic skeleton elements', async ({ page }) => {
     await page.getByText('Fingerprint Pro Playground', { exact: true }).waitFor();
     await page.getByText('Welcome, your visitor ID is').waitFor();

e2e/scraping/bot-protected.spec.ts

@@ -1,9 +1,14 @@
 import { expect, test } from '@playwright/test';
 import { TEST_IDS } from '../../src/client/testIDs';
+import { blockGoogleTagManager } from '../e2eTestUtils';
 
 // TODO Remove once fixed
 test.skip(({ browserName }) => browserName == 'firefox', 'This test currently fails in Github CI on Firefox');
 
+test.beforeEach(async ({ page }) => {
+  await blockGoogleTagManager(page);
+});
+
 test.describe('Scraping flights', () => {
   test('is not possible with Bot detection on', async ({ page }) => {
     await page.goto('/web-scraping');

e2e/scraping/bot-unprotected.spec.ts

@@ -1,6 +1,7 @@
 import { Locator, expect, test } from '@playwright/test';
 import { writeFileSync } from 'fs';
 import { TEST_IDS } from '../../src/client/testIDs';
+import { blockGoogleTagManager } from '../e2eTestUtils';
 
 const TEST_ID = TEST_IDS.webScraping;
 
@@ -9,6 +10,10 @@ const scrapeText = async (parent: Locator, testId: string) => {
   return element ? await element.textContent() : null;
 };
 
+test.beforeEach(async ({ page }) => {
+  await blockGoogleTagManager(page);
+});
+
 test.describe('Scraping flights', () => {
   test('is possible with Bot detection off', async ({ page }) => {
     await page.goto('/web-scraping?disableBotDetection=1');

e2e/sms-pumping/bot-protected.spec.ts

@@ -1,10 +1,14 @@
 import { test } from '@playwright/test';
 import { TEST_IDS } from '../../src/client/testIDs';
-import { assertAlert } from '../e2eTestUtils';
+import { assertAlert, blockGoogleTagManager } from '../e2eTestUtils';
 
 // TODO Remove once fixed
 test.skip(({ browserName }) => browserName == 'firefox', 'This test currently fails in Github CI on Firefox');
 
+test.beforeEach(async ({ page }) => {
+  await blockGoogleTagManager(page);
+});
+
 test.describe('Sending verification SMS messages', () => {
   test('is not possible as a bot with Bot detection on', async ({ page }) => {
     await page.goto('/sms-pumping');

e2e/sms-pumping/bot-unprotected.spec.ts

@@ -7,7 +7,7 @@ import {
   TEST_BUILD,
   TEST_PHONE_NUMBER,
 } from '../../src/server/sms-pumping/smsPumpingConst';
-import { assertAlert, assertSnackbar, resetScenarios } from '../e2eTestUtils';
+import { assertAlert, assertSnackbar, blockGoogleTagManager, resetScenarios } from '../e2eTestUtils';
 import { ONE_MINUTE_MS } from '../../src/shared/timeUtils';
 
 const TEST_ID = TEST_IDS.smsFraud;
@@ -18,6 +18,7 @@ if (!TEST_BUILD) {
 }
 
 test.beforeEach(async ({ page }) => {
+  await blockGoogleTagManager(page);
   await page.goto(`/sms-pumping?disableBotDetection=1`);
   await resetScenarios(page);
 });