Merge pull request #20126 from mozilla/react-pair-conversion

feat(fxa-settings): implement React pairing pages with choice screen, Glean parity, and E2E tests

Author: vbudhram

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

@@ -27,12 +27,14 @@ export const test = standardTest.extend<PairingTestOptions>({
     const channelServerUri =
       process.env.CHANNEL_SERVER_URI ||
       (await fetchChannelServerUri(target.contentServerUrl));
-    const marionettePort = parseInt(process.env.MARIONETTE_PORT || '2828', 10);
-    if (isNaN(marionettePort)) {
+    const basePort = parseInt(process.env.MARIONETTE_PORT || '2828', 10);
+    if (isNaN(basePort)) {
       throw new Error(
         `Invalid MARIONETTE_PORT: ${process.env.MARIONETTE_PORT}`
       );
     }
+    // Offset port by parallelIndex so parallel workers don't collide
+    const marionettePort = basePort + testInfo.parallelIndex;
     const headless = process.env.MARIONETTE_HEADLESS !== 'false';
 
     const authority = await MarionetteFirefox.launch({

packages/functional-tests/lib/marionette.ts

@@ -180,6 +180,59 @@ export class MarionetteClient {
     return data[3];
   }
 
+  /**
+   * Commands that are safe to retry on transient errors (read-only operations).
+   */
+  private static readonly RETRYABLE_COMMANDS = new Set([
+    'WebDriver:GetCurrentURL',
+    'WebDriver:GetTitle',
+    'WebDriver:FindElement',
+    'WebDriver:FindElements',
+    'Marionette:SetContext',
+    'WebDriver:TakeScreenshot',
+  ]);
+
+  /**
+   * Transient error types that warrant a retry.
+   */
+  private static readonly TRANSIENT_ERRORS = new Set([
+    'no such window',
+    'unknown error',
+    'timeout',
+  ]);
+
+  /**
+   * Send a command with automatic retry for read-only commands on transient errors.
+   * Write commands (click, sendKeys) are never retried.
+   * 2 retries with linear backoff (500ms, 1000ms).
+   */
+  private async sendCommandWithRetry(
+    name: string,
+    params: Record<string, unknown> = {},
+    maxRetries = 2
+  ): Promise<unknown> {
+    if (!MarionetteClient.RETRYABLE_COMMANDS.has(name)) {
+      return this.sendCommand(name, params);
+    }
+
+    let lastError: Error | undefined;
+    for (let attempt = 0; attempt <= maxRetries; attempt++) {
+      try {
+        return await this.sendCommand(name, params);
+      } catch (err) {
+        lastError = err instanceof Error ? err : new Error(String(err));
+        const isTransient =
+          err instanceof MarionetteError &&
+          MarionetteClient.TRANSIENT_ERRORS.has(err.errorType);
+        if (!isTransient || attempt === maxRetries) {
+          throw lastError;
+        }
+        await this.sleep(500 * (attempt + 1));
+      }
+    }
+    throw lastError;
+  }
+
   async newSession(): Promise<unknown> {
     return this.sendCommand('WebDriver:NewSession', {
       capabilities: {
@@ -197,7 +250,9 @@ export class MarionetteClient {
   }
 
   async setContext(context: MarionetteContext): Promise<void> {
-    await this.sendCommand('Marionette:SetContext', { value: context });
+    await this.sendCommandWithRetry('Marionette:SetContext', {
+      value: context,
+    });
   }
 
   async executeScript(
@@ -243,12 +298,12 @@ export class MarionetteClient {
   }
 
   async getUrl(): Promise<string> {
-    const result = await this.sendCommand('WebDriver:GetCurrentURL');
+    const result = await this.sendCommandWithRetry('WebDriver:GetCurrentURL');
     return this.extractValue(result) as string;
   }
 
   async getTitle(): Promise<string> {
-    const result = await this.sendCommand('WebDriver:GetTitle');
+    const result = await this.sendCommandWithRetry('WebDriver:GetTitle');
     return this.extractValue(result) as string;
   }
 
@@ -261,15 +316,15 @@ export class MarionetteClient {
   }
 
   async findElement(using: string, value: string): Promise<string> {
-    const result = await this.sendCommand('WebDriver:FindElement', {
+    const result = await this.sendCommandWithRetry('WebDriver:FindElement', {
       using,
       value,
     });
     return this.extractElementId(result);
   }
 
   async findElements(using: string, value: string): Promise<string[]> {
-    const result = await this.sendCommand('WebDriver:FindElements', {
+    const result = await this.sendCommandWithRetry('WebDriver:FindElements', {
       using,
       value,
     });
@@ -315,7 +370,7 @@ export class MarionetteClient {
    * Returns the screenshot as a base64-encoded PNG string.
    */
   async takeScreenshot(): Promise<string> {
-    const result = await this.sendCommand('WebDriver:TakeScreenshot', {
+    const result = await this.sendCommandWithRetry('WebDriver:TakeScreenshot', {
       full: true,
     });
     return this.extractValue(result) as string;

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

@@ -16,10 +16,11 @@ export const PAIRING_REDIRECT_URI =
 export const TIMEOUTS = {
   ELEMENT_FIND: 15_000,
   ASYNC_SCRIPT: 15_000,
-  SIGNED_IN_CHECK: 10_000,
+  SIGNED_IN_CHECK: 15_000,
   SUPPLICANT_ALLOW: 30_000,
   AUTHORITY_COMPLETE: 15_000,
   POLL_INTERVAL: 500,
+  POLL_INTERVAL_MAX: 2_000,
 } as const;
 
 export const SELECTORS = {
@@ -30,10 +31,36 @@ export const SELECTORS = {
   ],
   PASSWORD_INPUT: ['input[type="password"]', 'input[name="password"]'],
   SUBMIT_BUTTON: ['button[type="submit"]'],
-  AUTHORITY_APPROVE: ['#auth-approve-btn', 'button[type="submit"]'],
+  AUTHORITY_APPROVE: [
+    '[data-testid="pair-auth-approve-btn"]',
+    '#auth-approve-btn',
+    'button[type="submit"]',
+  ],
+  // Backbone supplicant cancel is an anchor `<a href="#" id="cancel">` that fires
+  // a click handler calling replaceCurrentPage('pair/failure'). React uses
+  // `<Link to="/pair/failure">` with no stable id — we match it by role/text.
+  SUPP_CANCEL_BACKBONE: ['a#cancel'],
   TOTP_INPUT: [
     'input.totp-code',
     'input[name="code"]',
     'input[type="text"][maxlength="6"]',
   ],
+  // /pair index choice screen — IDs are identical between Backbone and React,
+  // only the React templates add data-testid attributes.
+  PAIR_CHOICE_HEADER: ['[data-testid="pair-header"]', '#pair-header'],
+  PAIR_RADIO_HAS_MOBILE: ['[data-testid="has-mobile"]', '#has-mobile'],
+  PAIR_RADIO_NEEDS_MOBILE: ['[data-testid="needs-mobile"]', '#needs-mobile'],
+  PAIR_CONTINUE_BUTTON: [
+    '[data-testid="pair-continue-btn"]',
+    '#set-needs-mobile',
+  ],
+} as const;
+
+// Copy shown on the /pair/failure page. Both stacks render the same wording
+// now (React was updated to match Backbone). The body uses a U+2019 right
+// single quotation mark in "couldn’t"; the `.` in the regex accepts either
+// a straight or curly apostrophe without hard-coding the codepoint.
+export const FAILURE_COPY = {
+  heading: /Device pairing failed/i,
+  body: /The setup couldn.t be completed/i,
 } as const;