Update playright tests

BrunoSette · Oct 3, 2024 · cb4b938 · cb4b938
1 parent dc17951
commit cb4b938
Show file tree

Hide file tree

Showing 3 changed files with 200 additions and 55 deletions.
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -1,4 +1,5 @@
 name: Playwright Tests
+
 on:
   push:
     branches: [main, master]
@@ -9,6 +10,17 @@ jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
+    environment: preview
+
+    env:
+      POSTGRES_URL: ${{ secrets.POSTGRES_URL }}
+      POSTGRES_USER: ${{ secrets.DB_USER }}
+      POSTGRES_PASSWORD: ${{ secrets.DB_PASSWORD }}
+      POSTGRES_HOST: ${{ secrets.DB_HOST }}
+      POSTGRES_PORT: 6543
+      POSTGRES_NAME: "postgres"
+      STRIPE_SECRET_KEY: ${{ secrets.STRIPE_SECRET_KEY }}
+      STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET }}
 
     steps:
       - uses: actions/checkout@v4
@@ -18,28 +30,37 @@ jobs:
           node-version: lts/*
 
       - name: Install dependencies
-        run: npm install -g pnpm && pnpm install
+        run: yarn install
 
       - name: Build the application
-        run: pnpm run build
+        run: yarn build
 
       - name: Start the application
-        run: pnpm run start &
+        run: yarn start &
         env:
           PORT: 3000
 
       - name: Wait for the app to start
         run: npx wait-on http://localhost:3000
 
       - name: Install Playwright Browsers
-        run: pnpm exec playwright install --with-deps
+        run: yarn playwright install --with-deps
 
       - name: Run Playwright tests
-        run: pnpm exec playwright test
+        run: npx playwright test
 
-      - uses: actions/upload-artifact@v4
+      - name: Upload Playwright report
         if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
         with:
           name: playwright-report
           path: playwright-report/
-          retention-days: 30
+          retention-days: 7
+
+      - name: Upload Playwright videos
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-videos
+          path: test-results/videos/
+          retention-days: 7
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
 
 /**
  * Read environment variables from file.
@@ -12,43 +12,45 @@ import { defineConfig, devices } from '@playwright/test';
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: './tests',
+  timeout: 30000, // Set global test timeout to 30 seconds
+  testDir: "./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,
+  workers: process.env.CI ? 2 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  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',
+    trace: "on-first-retry",
+    video: "retain-on-failure",
+    /* Set test timeouts individually if needed */
+    actionTimeout: 10000, // Timeout for each action (e.g., click, type)
+    navigationTimeout: 30000, // Timeout for navigation actions
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
     },
-
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-
+    // {
+    //   name: "firefox",
+    //   use: { ...devices["Desktop Firefox"] },
+    // },
+    // {
+    //   name: "webkit",
+    //   use: { ...devices["Desktop Safari"] },
+    // },
     /* Test against mobile viewports. */
     // {
     //   name: 'Mobile Chrome',
@@ -58,7 +60,6 @@ export default defineConfig({
     //   name: 'Mobile Safari',
     //   use: { ...devices['iPhone 12'] },
     // },
-
     /* Test against branded browsers. */
     // {
     //   name: 'Microsoft Edge',

diff --git a/tests/second.spec.ts b/tests/second.spec.ts
@@ -10,59 +10,182 @@ test.describe("User Journey Tests", () => {
         name: "Your Ultimate Prep Tool for the Ontario Bar Exam",
       })
     ).toBeVisible();
-    await page.getByRole("button", { name: "Get Started" }).first().click();
+    await page
+      .getByRole("button", { name: "Start My 7 Days Free Trial" })
+      .first()
+      .click();
   });
 
-  test("should fill in Payment details", async ({ page }) => {
+  test("check website links", async ({ page }) => {
+    await page.goto("http://localhost:3000/sign-in");
+    await page.getByPlaceholder("Enter your email").click();
+    await page
+      .getByPlaceholder("Enter your email")
+      .fill("[email protected]");
+    await page.getByPlaceholder("Enter your email").press("Tab");
+    await page.getByPlaceholder("Enter your password").fill("12345678");
+    await page.getByRole("button", { name: "Sign in" }).click();
+
+    // Increase timeout for visibility checks
+    await expect(
+      page.getByRole("heading", { name: "Bar Exam Practice Dashboard" })
+    ).toBeVisible({ timeout: 10000 });
+    await expect(page.getByRole("link", { name: "BarQuest" })).toBeVisible({
+      timeout: 10000,
+    });
+    await expect(page.getByRole("button", { name: "Dashboard" })).toBeVisible({
+      timeout: 10000,
+    });
+    await expect(
+      page
+        .getByRole("navigation")
+        .getByRole("button", { name: "Create a New Test" })
+    ).toBeVisible({ timeout: 10000 });
+    await expect(page.getByRole("button", { name: "User Guide" })).toBeVisible({
+      timeout: 10000,
+    });
+    await expect(
+      page.getByRole("button", { name: "My Subscription" })
+    ).toBeVisible({ timeout: 10000 });
+    await expect(page.getByRole("button", { name: "Settings" })).toBeVisible({
+      timeout: 10000,
+    });
+    await page
+      .getByRole("main")
+      .getByRole("button", { name: "Create a New Test" })
+      .click();
+    await expect(page.getByRole("heading", { name: "Test Mode" })).toBeVisible({
+      timeout: 10000,
+    });
+    await expect(page.getByRole("heading", { name: "Subjects" })).toBeVisible({
+      timeout: 10000,
+    });
+    await expect(
+      page.getByRole("heading", { name: "Max Number of Questions" })
+    ).toBeVisible({ timeout: 10000 });
+    await expect(page.getByRole("button", { name: "Create Test" })).toBeVisible(
+      { timeout: 10000 }
+    );
+    await expect(page.getByLabel("Tutor")).toBeVisible({ timeout: 10000 });
+    await expect(page.getByLabel("Timed")).toBeVisible({ timeout: 10000 });
+    await page.getByRole("button", { name: "User Guide" }).click();
+    await expect(
+      page.getByRole("heading", { name: "User Guide and Study" })
+    ).toBeVisible({ timeout: 10000 });
+    await page.getByRole("button", { name: "My Subscription" }).click();
+    await expect(
+      page.getByRole("heading", { name: "Subscription" })
+    ).toBeVisible({ timeout: 10000 });
+    await expect(
+      page.getByRole("button", { name: "Manage Subscription" })
+    ).toBeVisible({ timeout: 10000 });
+    await page.getByRole("button", { name: "Settings" }).click();
+    await expect(
+      page.getByRole("heading", { name: "General Settings" })
+    ).toBeVisible({ timeout: 10000 });
+    await expect(
+      page.getByRole("button", { name: "Save Changes" })
+    ).toBeVisible({ timeout: 10000 });
+    await expect(
+      page.getByRole("heading", { name: "Security Settings" })
+    ).toBeVisible({ timeout: 10000 });
+    await expect(
+      page.getByRole("heading", { name: "Delete Account" })
+    ).toBeVisible({ timeout: 10000 });
+  });
+
+  test("should fill in Payment details and delete account", async ({
+    page,
+  }) => {
     await page.goto("http://localhost:3000/");
-    await page.getByRole("button", { name: "Get Started" }).first().click();
+    await page
+      .getByRole("button", { name: "Start My 7 Days Free Trial" })
+      .first()
+      .click();
     await page.getByPlaceholder("Enter your email").fill("[email protected]");
     await page.getByPlaceholder("Enter your password").fill("12345678");
     await page.getByRole("button", { name: "Sign up" }).click();
-    await page.getByLabel("Email").click();
-    await expect(
-      page.getByText("Enter payment details", { exact: true })
-    ).toBeVisible({ timeout: 10000 });
 
-    await page.getByPlaceholder("1234 1234 1234").fill("4242 4242 4242 42424");
-    await page.getByPlaceholder("1234 1234 1234").press("Tab");
-    await page.getByPlaceholder("MM / YY").fill("09 / 29");
-    await page.getByPlaceholder("MM / YY").press("Tab");
-    await page.getByPlaceholder("CVC").fill("454");
-    await page.getByPlaceholder("CVC").press("Tab");
-    await page.getByPlaceholder("Full name on card").fill("teste ");
-    await page.getByPlaceholder("Full name on card").press("Tab");
-    await page.getByLabel("Country or region").selectOption("KH");
-    await page.getByLabel("Country or region").selectOption("CA");
-    await page.locator("body").press("Tab");
-    await page.getByPlaceholder("Postal code").click();
-    await page.getByPlaceholder("Postal code").fill("M2P 2P2");
-    await page.getByPlaceholder("Postal code").press("Tab");
-    await page.getByTestId("hosted-payment-submit-button").click();
-    await page.getByLabel("Email").fill("[email protected]");
-    await page.getByTestId("hosted-payment-submit-button").click();
-    //wait for a redirection to the dashboard
+    // Check for the error message
+    const errorMessage = page.locator(
+      "text=Failed to create user. Please try again."
+    );
+    if (await errorMessage.isVisible()) {
+      // Navigate to the login page and log in
+      await page.goto("http://localhost:3000/sign-in");
+      await page.getByPlaceholder("Enter your email").fill("[email protected]");
+      await page.getByPlaceholder("Enter your password").fill("12345678");
+      await page.getByRole("button", { name: "Sign in" }).click();
+    } else {
+      // Continue with the sign-up process
+      await page.waitForSelector("text=Enter payment details", {
+        timeout: 20000,
+      });
+      await page.getByPlaceholder("1234 1234 1234").fill("4242 4242 4242 4242");
+      await page.getByPlaceholder("1234 1234 1234").press("Tab");
+      await page.getByPlaceholder("MM / YY").fill("09 / 29");
+      await page.getByPlaceholder("MM / YY").press("Tab");
+      await page.getByPlaceholder("CVC").fill("454");
+      await page.getByPlaceholder("CVC").press("Tab");
+      await page.getByPlaceholder("Full name on card").fill("teste ");
+      await page.getByPlaceholder("Full name on card").press("Tab");
+      await page.getByLabel("Country or region").selectOption("KH");
+      await page.getByLabel("Country or region").selectOption("CA");
+      await page.locator("body").press("Tab");
+      await page.getByPlaceholder("Postal code").click();
+      await page.getByPlaceholder("Postal code").fill("M2P 2P2");
+      await page.getByPlaceholder("Postal code").press("Tab");
+      await page.getByTestId("hosted-payment-submit-button").click();
+      await page.getByLabel("Email").fill("[email protected]");
+      await page.getByTestId("hosted-payment-submit-button").click();
+    }
+
+    // Wait for a redirection to the dashboard
     await page.waitForURL("http://localhost:3000/dashboard");
     await expect(
       page.getByRole("heading", { name: "Bar Exam Practice Dashboard" })
     ).toBeVisible({ timeout: 15000 });
     await expect(
       page.getByRole("main").getByRole("button", { name: "Create a New Test" })
-    ).toBeVisible();
-  });
+    ).toBeVisible({ timeout: 15000 });
 
-  test("should delete account", async ({ page }) => {
+    // Proceed to delete the account
     await page.goto("http://localhost:3000/sign-in");
     await page.getByPlaceholder("Enter your email").fill("[email protected]");
     await page.getByPlaceholder("Enter your email").press("Tab");
     await page.getByPlaceholder("Enter your password").fill("12345678");
     await page.getByRole("button", { name: "Sign in" }).click();
+
+    // Check if login was successful
+    const loginError = page.locator("text=Invalid email or password.");
+    if (await loginError.isVisible()) {
+      // Navigate to the sign-up page and sign up
+      await page.goto("http://localhost:3000/sign-up");
+      await page.getByPlaceholder("Enter your email").fill("[email protected]");
+      await page.getByPlaceholder("Enter your password").fill("12345678");
+      await page.getByRole("button", { name: "Sign up" }).click();
+
+      // Continue with the sign-up process
+      // Wait for a redirection to the dashboard
+      await page.waitForURL("http://localhost:3000/dashboard");
+      await expect(
+        page.getByRole("heading", { name: "Bar Exam Practice Dashboard" })
+      ).toBeVisible({ timeout: 25000 });
+      await expect(
+        page
+          .getByRole("main")
+          .getByRole("button", { name: "Create a New Test" })
+      ).toBeVisible({ timeout: 25000 });
+    }
+
+    // Proceed to delete the account
+    await page.waitForURL("http://localhost:3000/dashboard");
     await page.getByRole("button", { name: "Settings" }).click();
     await page.getByLabel("Confirm Password").click();
     await page.getByLabel("Confirm Password").fill("12345678");
     await page.getByRole("button", { name: "Delete Account" }).click();
     await expect(
       page.getByRole("heading", { name: "Sign in to your account" })
-    ).toBeVisible();
+    ).toBeVisible({ timeout: 15000 });
   });
 });