setup e2e tests with playwright open-sauced#291

.gitignore

@@ -28,3 +28,5 @@ dist-ssr
 /test-results/
 /playwright-report/
 /playwright/.cache/
+
+/e2e/auth

e2e/setup/getCookies.test.ts

@@ -0,0 +1,15 @@
+import { test as setup } from "@playwright/test";
+
+const authFile = "./e2e/auth/auth.json";
+
+setup("get auth token", async ({ page }) => {
+  await page.goto("https://www.github.com/login");
+  await page.fill("#login_field", "username");
+  await page.fill("#password", "password");
+
+  await page.locator('input[type="submit"]').click();
+
+  await page.waitForURL("https://github.com/");
+
+  await page.context().storageState({ path: "./e2e/auth/auth.json" });
+});

e2e/tests/open-popup.test.ts

@@ -0,0 +1,13 @@
+import { test, expect } from './popupFixture';
+
+test('popup page', async ({ page, extensionId, context }) => {
+    await page.goto(`chrome-extension://${extensionId}/index.html`);
+    await page.getByRole('button', {name: 'Login'}).click();
+
+    const authPage = await context.waitForEvent('page');
+    await authPage.waitForURL('https://beta.app.opensauced.pizza/feed');
+    await authPage.close();
+
+    await page.reload();
+    await expect(page.getByAltText( "OpenSauced logo")).toBeVisible();
+});

e2e/tests/popupFixture.ts

@@ -0,0 +1,36 @@
+import { test as base, chromium, type BrowserContext } from "@playwright/test";
+import path from "path";
+const auth = require("../auth/auth.json");
+
+export const test = base.extend<{
+  context: BrowserContext;
+  extensionId: string;
+}>({
+  context: async ({}, use) => {
+    const pathToExtension = path.join(__dirname, "../../dist");
+    const context = await chromium.launchPersistentContext("../auth", {
+      headless: false,
+      args: [
+        `--headless=new`,
+        `--disable-extensions-except=${pathToExtension}`,
+        `--load-extension=${pathToExtension}`,
+      ],
+    });
+    // @https://github.com/microsoft/playwright/issues/14949
+    // It seems that the PersistentContext in this context lacks support for storageState
+    // Alternatively, it's possible to add the cookies to the context by `addCookies`.
+    context.addCookies(auth["cookies"]);
+
+    await use(context);
+    await context.close();
+  },
+  extensionId: async ({ context }, use) => {
+    let [background] = context.serviceWorkers();
+    if (!background) background = await context.waitForEvent("serviceworker");
+
+    const extensionId = background.url().split("/")[2];
+    await use(extensionId);
+  },
+});
+
+export const expect = test.expect;

playwright.config.ts

@@ -1,45 +1,48 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
 
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-    testDir: './e2e',
-    /* Run tests in files in parallel */
-    fullyParallel: true,
-    /* Fail the build on CI if you accidentally left test.only in the source code. */
-    forbidOnly: !!process.env.CI,
-    /* Retry on CI only */
-    retries: process.env.CI ? 2 : 0,
-    /* Opt out of parallel tests on CI. */
-    workers: process.env.CI ? 1 : undefined,
-    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-    reporter: 'html',
-    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-    use: {
-        /* Base URL to use in actions like `await page.goto('/')`. */
-        // baseURL: 'http://127.0.0.1:3000',
+  testDir: "./e2e/tests",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
 
-        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-        trace: 'on-first-retry',
-    },
-
-    /* Configure projects for major browsers */
-    projects: [
-        {
-          name: 'chromium',
-          use: { ...devices['Desktop Chrome'] },
-        },
-      //  {
-        //  name: 'firefox',
-        //  use: { ...devices['Desktop Firefox'] },
-      //  },
-    ],
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
 
-    /* Run your local dev server before starting the tests */
-    webServer: {
-        command: 'npm run dev',
-        url: 'http://127.0.0.1:3000',
-        reuseExistingServer: !process.env.CI,
+  /* Configure projects for major browsers */
+  projects: [
+    { name: "setup", testDir: "./e2e/setup", testMatch: "*.test.ts" },
+    {
+      name: "chromium",
+      testMatch: "*.test.ts",
+      use: { ...devices["Desktop Chrome"] },
+      dependencies: ["setup"],
     },
+    //  {
+    //  name: 'firefox',
+    //  use: { ...devices['Desktop Firefox'] },
+    //  },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "npm run dev",
+    url: "http://127.0.0.1:3000",
+    reuseExistingServer: !process.env.CI,
+  },
 });