Switch to dependencies for global setup/teardown

This is the recommended approach by Playwright [1], and
specifically is useful for me now because it makes it easier to
use a non-headless version of the setup for use in debugging.

[1] https://playwright.dev/docs/test-global-setup-teardown

Author: Vinnl

functional-tests/playwright.config.ts

@@ -47,7 +47,7 @@ export const locations = [
 ];
 
 // Devices
-const baseDevices = [
+const baseDevices: Array<{ name: string; use: (typeof devices)[string] }> = [
   /* Test against desktop browsers */
   {
     name: "chromium",
@@ -120,10 +120,6 @@ const projects: Project[] = locations.flatMap((geo) =>
 
 export default defineConfig({
   testDir: "./tests",
-  /* Global setup */
-  globalSetup: "./global-setup.ts",
-  /* Global teardown */
-  globalTeardown: "./global-teardown.ts",
   /* Maximum time one test can run for. */
   timeout: 60_000,
   /* Max time in milliseconds the whole test suite can run to prevent CI from hanging. */
@@ -161,7 +157,21 @@ export default defineConfig({
     trace: "on-first-retry",
   },
   /* Configure projects for major browsers */
-  projects,
+  projects: [
+    {
+      name: "global-setup",
+      testMatch: /global\-setup/,
+      teardown: "global-teardown",
+    },
+    ...projects.map((project) => ({
+      ...project,
+      dependencies: ["global-setup"],
+    })),
+    {
+      name: "global-teardown",
+      testMatch: /global\-teardown/,
+    },
+  ],
   /* Folder for test artifacts such as screenshots, videos, traces, etc. */
   outputDir: "test-results",
   // Run your local dev server before starting the tests -- only on local environment

functional-tests/global-setup.ts functional-tests/tests/global-setup.tsfunctional-tests/global-setup.ts renamed to functional-tests/tests/global-setup.ts

@@ -2,16 +2,16 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { chromium, request } from "@playwright/test";
+import { test as setup, request, Browser } from "@playwright/test";
 import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
 import {
   type E2E_TEST_ENV_VALUE,
   getBaseTestEnvUrl,
-} from "./utils/environment";
-import { locations } from "./playwright.config";
-import { goToFxA, signUpUser } from "./utils/fxa";
+} from "../utils/environment";
+import { goToFxA, signUpUser } from "../utils/fxa";
+import { locations } from "../playwright.config";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -32,14 +32,13 @@ async function setupFeatureFlags() {
   fs.writeFileSync(
     path.resolve(
       __dirname,
-      "./functional-test-cache/enabled-feature-flags.json",
+      "../functional-test-cache/enabled-feature-flags.json",
     ),
     JSON.stringify({ data: (await response.json()) ?? [] }),
   );
 }
 
-async function setupUserAccounts() {
-  const browser = await chromium.launch();
+async function setupUserAccount(browser: Browser) {
   const emails: Record<string, string> = {};
 
   for (const location of locations) {
@@ -80,22 +79,22 @@ async function setupUserAccounts() {
     await context.close();
   }
 
-  await browser.close();
-
   // Store test user emails
   fs.writeFileSync(
-    path.resolve(__dirname, "./functional-test-cache/user-emails.json"),
+    path.resolve(__dirname, "../functional-test-cache/user-emails.json"),
     JSON.stringify(emails),
   );
 }
 
-const globalSetup = async () => {
+setup("Set up feature flags and user accounts", async ({ browser }) => {
+  // Creating an account involves waiting for an email to arrive,
+  // before being able to insert the confirmation code. That takes
+  // longer than usual.
+  setup.slow();
   // Ensure storage directory exists
-  const dir = path.resolve(__dirname, "./functional-test-cache");
+  const dir = path.resolve(__dirname, "../functional-test-cache");
   fs.mkdirSync(dir, { recursive: true });
 
   await setupFeatureFlags();
-  await setupUserAccounts();
-};
-
-export default globalSetup;
+  await setupUserAccount(browser);
+});

functional-tests/global-teardown.ts functional-tests/tests/global-teardown.tsfunctional-tests/global-teardown.ts renamed to functional-tests/tests/global-teardown.ts

@@ -2,26 +2,26 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { chromium } from "@playwright/test";
+import { Browser } from "@playwright/test";
 import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
-import { getTestUserEmails, getTestUserSessionFilePath } from "./utils/user";
-import { getBaseTestEnvUrl } from "./utils/environment";
+import { test as teardown } from "../fixtures/authenticatedTest";
+import { getTestUserEmails, getTestUserSessionFilePath } from "../utils/user";
+import { getBaseTestEnvUrl } from "../utils/environment";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 function removeTestStorage() {
-  const dir = path.resolve(__dirname, "./functional-test-cache");
+  const dir = path.resolve(__dirname, "../functional-test-cache");
 
   if (fs.existsSync(dir)) {
     fs.rmSync(dir, { force: true, recursive: true });
     console.info("Deleted cache directory after running tests");
   }
 }
 
-async function deleteTestUserAccounts() {
-  const browser = await chromium.launch();
+async function deleteTestUserAccounts(browser: Browser) {
   const userEmails = getTestUserEmails();
 
   for (const userCountryCode in userEmails) {
@@ -42,13 +42,9 @@ async function deleteTestUserAccounts() {
 
     await context.close();
   }
-
-  await browser.close();
 }
 
-const globalTeardown = async () => {
-  await deleteTestUserAccounts();
+teardown("Delete test user accounts", async ({ browser }) => {
+  await deleteTestUserAccounts(browser);
   removeTestStorage();
-};
-
-export default globalTeardown;
+});