Merge pull request #5394 from mozilla/e2e-test-failures

Address flaky local E2e test failures

src/db/tables/featureFlags.ts

@@ -5,6 +5,7 @@
 import createDbConnection from "../connect";
 import { logger } from "../../app/functions/server/logging";
 import { FeatureFlagRow } from "knex/types/tables";
+import { headers } from "next/headers";
 
 const knex = createDbConnection();
 
@@ -77,11 +78,26 @@ export async function getEnabledFeatureFlags(
       return void subQuery;
     });
 
-  const enabledFlagNames = await query;
-
-  return enabledFlagNames.map(
+  const enabledFlagNames = (await query).map(
     (row: { name: string }) => row.name as FeatureFlagName,
   );
+
+  // Force feature flags for E2E tests via URL query params
+  if (process.env.E2E_TEST_ENV === "local") {
+    const forcedFeatureFlags = headers().get("x-forced-feature-flags");
+    if (forcedFeatureFlags) {
+      const forcedFeatureFlagsFiltered = forcedFeatureFlags
+        .split(",")
+        .filter((forcedFeatureFlag) =>
+          featureFlagNames.includes(forcedFeatureFlag as FeatureFlagName),
+        );
+      return [
+        ...new Set([...enabledFlagNames, ...forcedFeatureFlagsFiltered]),
+      ] as FeatureFlagName[];
+    }
+  }
+
+  return enabledFlagNames;
 }
 
 /**

src/e2e/pages/landingPage.ts

@@ -85,15 +85,17 @@ export class LandingPage {
   constructor(page: Page) {
     this.page = page;
     this.freeMonitoringTooltipTrigger = page
-      .getByRole("gridcell", { name: "Manual removal Open tooltip" })
+      .getByRole("gridcell", { name: "Manual removal" })
       .getByLabel("Open tooltip");
     this.freeMonitoringTooltipText = page.getByText(
-      "We’ll let you know which data",
+      "We’ll let you know which data brokers are selling your info so you can contact them to request removal.",
     );
     this.monitorPlusTooltipTrigger = page
-      .getByRole("gridcell", { name: "Automatic removal Open tooltip" })
+      .getByRole("gridcell", { name: "Automatic removal" })
       .getByLabel("Open tooltip");
-    this.monitorPlusTooltipText = page.getByText("We’ll automatically request");
+    this.monitorPlusTooltipText = page.getByText(
+      "We’ll automatically request removal of your private info across more than ⁨190⁩ data broker sites.",
+    );
     this.closeTooltips = page.locator(
       '//div[starts-with(@class, "PlansTable_popoverUnderlay")]',
     );
@@ -263,7 +265,7 @@ export class LandingPage {
 
   async goToSignIn() {
     await this.page.waitForTimeout(500); // sign in button may not be loaded at this point.
-    await this.signInButton.click();
+    await this.signInButton.click({ force: true });
     // FxA can take a while to load on stage:
     await this.page.waitForURL("**/oauth/**", { timeout: 60_000 });
   }

src/e2e/pages/settingsPage.ts

@@ -51,6 +51,9 @@ export class SettingsPage {
   }
 
   async open() {
+    await this.page.setExtraHTTPHeaders({
+      "x-forced-feature-flags": "SettingsPageRedesign",
+    });
     await this.page.goto("/user/settings");
   }
 }

src/e2e/specs/landing/landing-content.spec.ts

@@ -226,10 +226,11 @@ test.describe(`${process.env.E2E_TEST_ENV} - Verify the Landing Page content`, (
       description:
         "https://testrail.stage.mozaws.net/index.php?/cases/view/2463504",
     });
-    await landingPage.freeMonitoringTooltipTrigger.click();
+    await expect(landingPage.freeMonitoringTooltipTrigger).toBeVisible();
+    await landingPage.freeMonitoringTooltipTrigger.click({ force: true });
     await expect(landingPage.freeMonitoringTooltipText).toBeVisible();
-    await landingPage.closeTooltips.click();
-    await landingPage.monitorPlusTooltipTrigger.click();
+    await landingPage.closeTooltips.click({ force: true });
+    await landingPage.monitorPlusTooltipTrigger.click({ force: true });
     await expect(landingPage.monitorPlusTooltipText).toBeVisible();
   });
 });

src/e2e/specs/settings.spec.ts

@@ -3,40 +3,22 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { test, expect } from "../fixtures/basePage.js";
-import { getEnabledFeatureFlags } from "../../db/tables/featureFlags.js";
 
 // bypass login
 test.use({ storageState: "./e2e/storageState.json" });
 test.describe(`${process.env.E2E_TEST_ENV} Settings Page`, () => {
   test("Verify settings page loads", async ({ settingsPage }) => {
-    const enabledFeatureFlags = await getEnabledFeatureFlags({
-      email: process.env.E2E_TEST_ACCOUNT_EMAIL as string,
-      isSignedOut: false,
-    });
-
     // should go directly to data breach page
     await settingsPage.open();
 
     await expect(settingsPage.settingsHeader).toBeVisible();
     await expect(settingsPage.addEmailButton).toBeVisible();
     await expect(settingsPage.emailHeader).toBeVisible();
-
-    if (!enabledFeatureFlags.includes("SettingsPageRedesign")) {
-      await expect(settingsPage.emailPrefHeader).toBeVisible();
-      (await settingsPage.deleteHeader.isVisible())
-        ? await expect(settingsPage.deleteHeader).toBeVisible()
-        : await expect(settingsPage.deactivateHeader).toBeVisible();
-    }
   });
 
   test("Verify that a user can select between the Breach alert preferences", async ({
     settingsPage,
   }) => {
-    const enabledFeatureFlags = await getEnabledFeatureFlags({
-      email: process.env.E2E_TEST_ACCOUNT_EMAIL as string,
-      isSignedOut: false,
-    });
-
     test.info().annotations.push({
       type: "issue",
       description:
@@ -45,10 +27,7 @@ test.describe(`${process.env.E2E_TEST_ENV} Settings Page`, () => {
 
     // go to monitor settings page
     await settingsPage.open();
-
-    if (enabledFeatureFlags.includes("SettingsPageRedesign")) {
-      await settingsPage.tabNotifications.click();
-    }
+    await settingsPage.tabNotifications.click();
 
     await expect(async () => {
       // select "send breach alerts to the affected email address" option