chore: add e2e test

e2e/bot-firewall.spec.ts

@@ -0,0 +1,38 @@
+import { expect, test } from '@playwright/test';
+import { resetScenarios } from './resetHelper';
+import { TEST_IDS } from '../src/client/testIDs';
+import { BOT_FIREWALL_COPY } from '../src/pages/bot-firewall/botFirewallCopy';
+
+test.describe('Bot Firewall Demo', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/coupon-fraud');
+    await resetScenarios(page);
+  });
+
+  test('Should display bot visit a allow blocking IP address', async ({ page }) => {
+    // Record bot visit in web-scraping page
+    await page.goto('/web-scraping', { waitUntil: 'networkidle' });
+    await expect(page.getByTestId(TEST_IDS.common.alert)).toContainText('Malicious bot detected');
+
+    // Check bot visit record and block IP
+    await page.goto('/bot-firewall', { waitUntil: 'networkidle' });
+    await page.getByRole('button', { name: BOT_FIREWALL_COPY.blockIp }).first().click();
+    await page.getByText('was blocked in the application firewall').waitFor();
+    await page.waitForTimeout(5000);
+
+    // Try to visit web-scraping page, should be blocked by Cloudflare
+    await page.goto('https://staging.fingerprinthub.com/web-scraping', { waitUntil: 'networkidle' });
+    await page.getByRole('heading', { name: 'Sorry, you have been blocked' }).waitFor();
+
+    // Unblock IP
+    await page.goto('/bot-firewall', { waitUntil: 'networkidle' });
+    await page.getByRole('button', { name: BOT_FIREWALL_COPY.unblockIp }).first().click();
+    await page.getByText('was unblocked in the application firewall').waitFor();
+    await page.waitForTimeout(5000);
+
+    // Try to visit web-scraping page, should be allowed again
+    await page.goto('https://staging.fingerprinthub.com/web-scraping', { waitUntil: 'networkidle' });
+    await page.reload({ waitUntil: 'networkidle' });
+    await expect(page.getByTestId(TEST_IDS.common.alert)).toContainText('Malicious bot detected');
+  });
+});

e2e/scraping/protected.spec.ts

@@ -3,8 +3,7 @@ import { TEST_IDS } from '../../src/client/testIDs';
 
 test.describe('Scraping flights', () => {
   test('is not possible with Bot detection on', async ({ page }) => {
-    await page.goto('/web-scraping');
-    await page.waitForLoadState('networkidle');
+    await page.goto('/web-scraping', { waitUntil: 'networkidle' });
     await expect(page.getByTestId(TEST_IDS.common.alert)).toContainText('Malicious bot detected');
   });
 });

e2e/scraping/unprotected.spec.ts

@@ -11,8 +11,7 @@ const scrapeText = async (parent: Locator, testId: string) => {
 
 test.describe('Scraping flights', () => {
   test('is possible with Bot detection off', async ({ page }) => {
-    await page.goto('/web-scraping?disableBotDetection=1');
-    await page.waitForLoadState('networkidle');
+    await page.goto('/web-scraping?disableBotDetection=1', { waitUntil: 'networkidle' });
     // Artificial wait necessary to prevent flakiness
     await page.waitForTimeout(3000);
 

src/pages/bot-firewall/botFirewallCopy.ts

@@ -0,0 +1,4 @@
+export const BOT_FIREWALL_COPY = {
+  blockIp: 'Block this IP',
+  unblockIp: 'Unblock',
+} as const;

src/pages/bot-firewall/index.tsx

@@ -10,6 +10,7 @@ import { BlockIpPayload, BlockIpResponse } from '../api/bot-firewall/block-ip';
 import { useVisitorData } from '@fingerprintjs/fingerprintjs-pro-react';
 import classnames from 'classnames';
 import { OptionsObject as SnackbarOptions, enqueueSnackbar } from 'notistack';
+import { BOT_FIREWALL_COPY } from './botFirewallCopy';
 
 const formatDate = (date: string) => {
   const d = new Date(date);
@@ -146,8 +147,8 @@ export const BotFirewall: NextPage<CustomPageProps> = ({ embed }) => {
                           {isLoadingBlockIp
                             ? 'Working on it ⏳'
                             : isIpBlocked(botVisit?.ip)
-                              ? 'Unblock'
-                              : 'Block this IP'}
+                              ? BOT_FIREWALL_COPY.unblockIp
+                              : BOT_FIREWALL_COPY.blockIp}
                         </Button>
                       ) : (
                         <>-</>