feat(e2e): update github workflow to use matrix with playwright tags, cache workflow setup steps

.github/workflows/playwright-tests.yml

@@ -37,9 +37,12 @@ env:
 
 jobs:
   playwright-test-runner:
+    strategy:
+      matrix:
+        test_case: ['@login']
     timeout-minutes: 20
     runs-on:
-      - ubuntu-latest
+      - ubuntu-22.04
     services:
       postgres:
         image: postgres:16-alpine
@@ -62,6 +65,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: "18"
+          cache: 'yarn'
 
       - name: Initialize PostgreSQL
         run: |
@@ -72,7 +76,17 @@ jobs:
       - name: Install packages
         run: yarn install -y
 
+      - name: Cache playwright browsers
+        id: cache-playwright
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
       - name: Install playwright
+        if: steps.cache-playwright.outputs.cache-hit != 'true'
         run: yarn playwright install --with-deps
 
       - name: Setup project
@@ -85,7 +99,7 @@ jobs:
         run: yarn start &
 
       - name: Run Tests
-        run: yarn e2e
+        run: npx playwright test --grep ${{ matrix.test_case }}
 
       - uses: actions/upload-artifact@v3
         if: always()

e2e/tests/public/login.spec.ts

@@ -1,32 +1,50 @@
-import { expect, test } from "../../index"
+import { expect, test } from "../../index";
 
-test("Logging in without credentials displays an error", async ({ loginPage }) => {
+test.describe(
-  await loginPage.submitLoginButton.click()
+  "Login test suite",
-  const toast = await loginPage.getLatestToast()
+  {
-  await expect(toast.locator).toBeVisible()
+    tag: "@login",
-  await expect(toast.locator).toHaveAttribute("data-type", "error")
+  },
-})
+  async () => {
+    test("Logging in without credentials displays an error", async ({
+      loginPage,
+    }) => {
+      await loginPage.submitLoginButton.click();
+      const toast = await loginPage.getLatestToast();
+      await expect(toast.locator).toBeVisible();
+      await expect(toast.locator).toHaveAttribute("data-type", "error");
+    });
 
-test("Logging in with an erroneous password displays an error", async ({ loginPage }) => {
+    test("Logging in with an erroneous password displays an error", async ({
-  await loginPage.usernameInput.fill(process.env['TEST_USERNAME'] || "")
+      loginPage,
-  await loginPage.passwordInput.fill("NOT_MY_PASSWORD_DNE_ERROR")
+    }) => {
-  await loginPage.submitLoginButton.click()
+      await loginPage.usernameInput.fill(process.env["TEST_USERNAME"] || "");
-  const toast = await loginPage.getLatestToast()
+      await loginPage.passwordInput.fill("NOT_MY_PASSWORD_DNE_ERROR");
-  await expect(toast.locator).toBeVisible()
+      await loginPage.submitLoginButton.click();
-  await expect(toast.locator).toHaveAttribute("data-type", "error")
+      const toast = await loginPage.getLatestToast();
-})
+      await expect(toast.locator).toBeVisible();
+      await expect(toast.locator).toHaveAttribute("data-type", "error");
+    });
 
-test("Logging in without valid credentials displays an error", async ({ loginPage }) => {
+    test("Logging in without valid credentials displays an error", async ({
-  await loginPage.submitLoginButton.click()
+      loginPage,
-  const toast = await loginPage.getLatestToast()
+    }) => {
-  await expect(toast.locator).toBeVisible()
+      await loginPage.submitLoginButton.click();
-  await expect(toast.locator).toHaveAttribute("data-type", "error")
+      const toast = await loginPage.getLatestToast();
-})
+      await expect(toast.locator).toBeVisible();
+      await expect(toast.locator).toHaveAttribute("data-type", "error");
+    });
 
-test("Logging in with a valid username and password works as expected", async ({ page, loginPage, dashboardPage }) => {
+    test("Logging in with a valid username and password works as expected", async ({
-  await loginPage.usernameInput.fill(process.env['TEST_USERNAME'] || "")
+      page,
-  await loginPage.passwordInput.fill(process.env['TEST_PASSWORD'] || "")
+      loginPage,
-  await loginPage.submitLoginButton.click()
+      dashboardPage,
-  await expect(loginPage.loginForm).not.toBeVisible()
+    }) => {
-  await expect(dashboardPage.container).toBeVisible()
+      await loginPage.usernameInput.fill(process.env["TEST_USERNAME"] || "");
-})
+      await loginPage.passwordInput.fill(process.env["TEST_PASSWORD"] || "");
+      await loginPage.submitLoginButton.click();
+      await expect(loginPage.loginForm).not.toBeVisible();
+      await expect(dashboardPage.container).toBeVisible();
+    });
+  }
+);