chore: attempting to reuse single login across multiple tests

.gitignore

@@ -67,4 +67,5 @@ ssmSetup.zsh
 
 
 # open-next
-.open-next
+.open-next
+playwright/.auth

e2e/auth.setup.ts

@@ -0,0 +1,57 @@
+import { test as setup, expect } from "@playwright/test";
+import path from "path";
+
+const authFile = path.join(__dirname, "../playwright/.auth/user.json");
+
+setup("authenticate", async ({ page }) => {
+  // Perform authentication steps. Replace these actions with your own.
+  try {
+    expect(process.env.E2E_GITHUB_EMAIL).toBeDefined();
+    expect(process.env.E2E_GITHUB_PASSWORD).toBeDefined();
+    const email = process.env.E2E_GITHUB_EMAIL;
+    const password = process.env.E2E_GITHUB_PASSWORD;
+
+    if (!email || !password) {
+      throw new Error(
+        email || password
+          ? "Missing both E2E test user credentials from environment"
+          : email
+            ? "Missing E2E_GITHUB_EMAIL from environment"
+            : "Missing E2E_GITHUB_PASSWORD from environment",
+      );
+    }
+
+    // Perform authentication steps. Replace these actions with your own.
+    await page.goto("https://github.com/login");
+    await page.getByLabel("Username or email address").fill(email);
+    await page.getByLabel("Password").fill(password);
+    await page.getByRole("button", { name: "Sign in" }).click();
+    // Wait until the page receives the cookies.
+    //
+    // Sometimes login flow sets cookies in the process of several redirects.
+    // Wait for the final URL to ensure that the cookies are actually set.
+    await page.waitForURL("https://github.com/");
+
+    // End of authentication steps.
+
+    await page.goto("http://localhost:3000/get-started");
+    await page.getByTestId("github-login-button").click();
+    //await page.waitForURL("https://github.com/**");
+    await page.waitForLoadState();
+
+    if (await page.getByText("Authorize JohnAllenTech").isVisible()) {
+      //  await page.getByText("Authorize JohnAllenTech").click();
+      await page
+        .getByRole("button", { name: "Authorize JohnAllenTech" })
+        .click();
+
+      await page.waitForLoadState();
+    }
+
+    await page.waitForURL("http://localhost:3000");
+
+    await page.context().storageState({ path: authFile });
+  } catch (err) {
+    console.log(err);
+  }
+});

e2e/login.spec.ts

@@ -9,22 +9,31 @@ test.describe("Login Page", () => {
   });
   test("should display the Github login button and complete Github SSO flow", async ({
     page,
+    isMobile,
   }) => {
     expect(process.env.E2E_GITHUB_EMAIL).toBeDefined();
     expect(process.env.E2E_GITHUB_PASSWORD).toBeDefined();
 
     await page.goto("http://localhost:3000/get-started");
     await page.getByTestId("github-login-button").click();
-    await page.waitForURL("https://github.com/**");
+    //await page.waitForURL("https://github.com/**");
+    await page.waitForLoadState();
 
-    await page
-      .getByLabel("Username or email address")
-      .fill(process.env.E2E_GITHUB_EMAIL as string);
-    await page
-      .getByLabel("Password")
-      .fill(process.env.E2E_GITHUB_PASSWORD as string);
-    await page.getByRole("button", { name: "Sign in" }).first().click();
-    await page.waitForURL("http://localhost:3000/articles");
+    if (await page.getByText("Authorize JohnAllenTech").isVisible()) {
+      //  await page.getByText("Authorize JohnAllenTech").click();
+      await page
+        .getByRole("button", { name: "Authorize JohnAllenTech" })
+        .click();
+
+      await page.waitForLoadState();
+    }
+
+    await page.waitForURL("http://localhost:3000");
+    if (!isMobile) {
+      expect(page.getByText("New Post")).toBeVisible();
+      expect(page.getByText("Your Posts")).toBeVisible();
+    }
+    await page.waitForLoadState();
   });
 
   test("should display the Gitlab login button", async ({ page }) => {

playwright.config.ts

@@ -32,9 +32,14 @@ export default defineConfig({
 
   /* Configure projects for major browsers */
   projects: [
+    { name: "setup", testMatch: /auth.setup\.ts/ },
     {
       name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
+      use: {
+        ...devices["Desktop Chrome"],
+        storageState: "playwright/.auth/user.json",
+      },
+      dependencies: ["setup"],
     },
 
     // Example other browsers
@@ -51,7 +56,11 @@ export default defineConfig({
     /* Test against mobile viewports. */
     {
       name: "Mobile Chrome",
-      use: { ...devices["iPhone 15"] },
+      use: {
+        ...devices["iPhone 15"],
+        storageState: "playwright/.auth/user.json",
+      },