fix(tests): gate pair specs via ConfigPage so WAF-fronted envs route correctly

Because:
Stage sits behind Fastly Next-Gen WAF, which serves a JavaScript "Client
Challenge" interstitial to plain fetch() calls. The pair spec gate read the
content server with fetch(), failed to match the fxa-config meta tag, and
returned false. Backbone pair specs then ran against stage (which serves
React) and failed, while the React specs skipped.

This commit:
- Rewrites isPairRoutesReact to take (browser, target) and reuse the existing
  ConfigPage helper, which opens a real Playwright page so the WAF challenge
  JS executes before the meta tag is read.
- Applies the WAF bypass header (CI_WAF_TOKEN) to the context it creates so
  the config read works in CI the same way fixture-created contexts do.
- Moves the gate from beforeEach to beforeAll in all four pair specs since
  the rollout is env-stable for the lifetime of a worker, avoiding a WAF
  challenge on every test.
- Captures the result in a worker-scoped variable in pairingFlowiOS so both
  inline call sites reuse the single lookup.

Author: vbudhram

packages/functional-tests/lib/pairing-helpers.ts

@@ -14,7 +14,9 @@
  */
 
 import crypto from 'crypto';
-import { expect, Page } from '@playwright/test';
+import { Browser, expect, Page } from '@playwright/test';
+import { ConfigPage } from '../pages/config';
+import { BaseTarget } from './targets/base';
 import { MarionetteClient } from './marionette';
 import {
   PAIRING_CLIENT_ID,
@@ -26,22 +28,39 @@ import {
 import { getTotpCode } from './totp';
 
 /**
- * Fetch the content server's fxa-config and check whether React pairing
- * routes are enabled (showReactApp.pairRoutes). When enabled, the Backbone
- * /pair/* routes are deregistered and only React (fxa-settings) serves them.
+ * Check whether React pairing routes are enabled (showReactApp.pairRoutes).
+ * When enabled, the Backbone /pair/* routes are deregistered and only React
+ * (fxa-settings) serves them.
+ *
+ * Reuses the shared ConfigPage helper, which opens a real Playwright page and
+ * reads the fxa-config meta tag. This matters for stage and production,
+ * which are behind Fastly's Next-Gen WAF: a plain fetch() receives the
+ * JavaScript "Client Challenge" interstitial instead of the real HTML. A
+ * browser page executes the challenge and then renders the real page with
+ * the meta tag.
+ *
+ * Callers should invoke this from `test.beforeAll` so it runs once per
+ * worker; pair-route rollout is stable for the lifetime of a test run.
  */
 export async function isPairRoutesReact(
-  contentServerUrl: string
+  browser: Browser,
+  target: BaseTarget
 ): Promise<boolean> {
+  // Mirror playwright.config.ts's `use.extraHTTPHeaders` so requests made from
+  // this helper also carry the WAF bypass token in CI. Without this, the WAF
+  // serves its JS interstitial and the fxa-config meta tag never renders.
+  const extraHTTPHeaders: Record<string, string> = {};
+  target.ciHeader?.forEach((value, key) => {
+    extraHTTPHeaders[key] = value;
+  });
+  const context = await browser.newContext({ extraHTTPHeaders });
+  const page = await context.newPage();
   try {
-    const resp = await fetch(contentServerUrl);
-    const html = await resp.text();
-    const match = html.match(/name="fxa-config" content="([^"]+)"/);
-    if (!match) return false;
-    const config = JSON.parse(decodeURIComponent(match[1]));
-    return config.showReactApp?.pairRoutes === true;
-  } catch {
-    return false;
+    const configPage = new ConfigPage(page, target);
+    const config = await configPage.getConfig();
+    return config?.showReactApp?.pairRoutes === true;
+  } finally {
+    await context.close();
   }
 }
 

packages/functional-tests/tests/pairing/pairingFlow.spec.ts

@@ -89,16 +89,13 @@ test.describe('severity-2 #smoke', () => {
     // because content-server reads showReactApp.pairRoutes at startup (see
     // add-routes.js) and pair routes have fullProdRollout: true, so a single
     // server instance only serves one stack.
-    test.beforeEach(async ({ target }, testInfo) => {
-      // Marionette launches a local Firefox binary configured to talk to
-      // the target environment via about:config prefs.
-      const isReact = await isPairRoutesReact(target.contentServerUrl);
-      if (!isReact) {
-        testInfo.skip(
-          true,
-          'React pair specs require showReactApp.pairRoutes=true'
-        );
-      }
+    // Runs once per worker. Pair-route rollout is env-stable.
+    test.beforeAll(async ({ browser, target }) => {
+      const isReact = await isPairRoutesReact(browser, target);
+      test.skip(
+        !isReact,
+        'React pair specs require showReactApp.pairRoutes=true'
+      );
     });
 
     test('authority generates QR URL and supplicant connects via channel', async ({

packages/functional-tests/tests/pairing/pairingFlowBackbone.spec.ts

@@ -122,14 +122,13 @@ test.describe('severity-2 #smoke', () => {
   test.describe.serial('Backbone pairing flow', () => {
     // Mutually exclusive with pairingFlow.spec.ts — only one of these suites
     // runs at a time, gated by the server's showReactApp.pairRoutes config.
-    test.beforeEach(async ({ target }, testInfo) => {
-      const isReact = await isPairRoutesReact(target.contentServerUrl);
-      if (isReact) {
-        testInfo.skip(
-          true,
-          'Backbone pair specs require showReactApp.pairRoutes=false'
-        );
-      }
+    // Runs once per worker. Pair-route rollout is env-stable.
+    test.beforeAll(async ({ browser, target }) => {
+      const isReact = await isPairRoutesReact(browser, target);
+      test.skip(
+        isReact,
+        'Backbone pair specs require showReactApp.pairRoutes=false'
+      );
     });
 
     test('authority generates QR URL and supplicant connects via Backbone templates', async ({

packages/functional-tests/tests/pairing/pairingFlowBackboneNegative.spec.ts

@@ -38,14 +38,13 @@ test.setTimeout(120_000);
 
 test.describe('severity-2 #smoke', () => {
   test.describe.serial('Backbone pairing flow — negative paths', () => {
-    test.beforeEach(async ({ target }, testInfo) => {
-      const isReact = await isPairRoutesReact(target.contentServerUrl);
-      if (isReact) {
-        testInfo.skip(
-          true,
-          'Backbone pair specs require showReactApp.pairRoutes=false'
-        );
-      }
+    // Runs once per worker. Pair-route rollout is env-stable.
+    test.beforeAll(async ({ browser, target }) => {
+      const isReact = await isPairRoutesReact(browser, target);
+      test.skip(
+        isReact,
+        'Backbone pair specs require showReactApp.pairRoutes=false'
+      );
     });
 
     test('supplicant cancels on /pair/supp/allow and lands on /pair/failure', async ({

packages/functional-tests/tests/pairing/pairingFlowNegative.spec.ts

@@ -36,14 +36,13 @@ test.setTimeout(120_000);
 
 test.describe('severity-2 #smoke', () => {
   test.describe.serial('Firefox pairing flow — negative paths', () => {
-    test.beforeEach(async ({ target }, testInfo) => {
-      const isReact = await isPairRoutesReact(target.contentServerUrl);
-      if (!isReact) {
-        testInfo.skip(
-          true,
-          'React pair specs require showReactApp.pairRoutes=true'
-        );
-      }
+    // Runs once per worker. Pair-route rollout is env-stable.
+    test.beforeAll(async ({ browser, target }) => {
+      const isReact = await isPairRoutesReact(browser, target);
+      test.skip(
+        !isReact,
+        'React pair specs require showReactApp.pairRoutes=true'
+      );
     });
 
     test('supplicant cancels on /pair/supp/allow and lands on /pair/failure', async ({