Working Playwright test with workflow

.github/workflows/playwright.yml

@@ -7,21 +7,61 @@ on:
 jobs:
   test:
     timeout-minutes: 60
-    runs-on: ubuntu-latest
+    runs-on: [self-hosted, linux]
+    defaults:
+      run:
+        working-directory: ./leaky-ships
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - name: Install Node.js
+      uses: actions/setup-node@v3
       with:
         node-version: 18
+
+    - uses: pnpm/action-setup@v2
+      name: Install pnpm
+      with:
+        version: 8.6.10
+        run_install: false
+
+    - name: Get pnpm store directory
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - uses: actions/cache@v3
+      name: Setup pnpm cache
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('./leaky-ships/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: Add FA token
+      run: |
+        echo "@fortawesome:registry=https://npm.fontawesome.com/" > .npmrc
+        npm config set '//npm.fontawesome.com/:_authToken' "${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}"
+
     - name: Install dependencies
-      run: pnpm install
+      run: pnpm install --frozen-lockfile
+
     - name: Install Playwright Browsers
-      run: pnpm exec playwright install --with-deps
+      run: pnpm playwright install --with-deps
+
+    - name: 'Compiling page'
+      run: |
+        echo "${{ secrets.ENV_FILE }}" > .env
+        pnpm prisma generate
+        pnpm run build
+
     - name: Run Playwright tests
-      run: pnpm exec playwright test
+      run: pnpm playwright test
+
     - uses: actions/upload-artifact@v3
       if: always()
       with:
         name: playwright-report
-        path: playwright-report/
+        path: leaky-ships/playwright-report/
         retention-days: 30

leaky-ships/e2e/auth.spec.ts

@@ -8,63 +8,66 @@ test.describe.serial("Check Azure AD auth", () => {
   test.beforeAll(async ({ browser }) => {
     context = await browser.newContext()
     page = await context.newPage()
+    page.route(/Regelwerk\.mp4/, (route) => route.abort())
   })
 
   test.afterAll(async () => {
     await context.close()
   })
 
-  test("Login process...", async ({ browser }) => {
+  test("Login process...", async () => {
     await page.goto(callbackUrl + "signin")
 
-    await page
-      .getByRole("button", { name: "Microsoft_icon Sign in with Microsoft" })
-      .click()
+    await page.waitForLoadState("domcontentloaded")
 
-    const emailLocator = page.locator(
-      `[data-test-id="${process.env.AUTH_EMAIL ?? ""}"]`,
-    )
-    if (await emailLocator.isVisible()) {
-      await emailLocator.click()
-      await new Promise((resolve) => setTimeout(resolve, 1000))
-    } else {
-      console.log(
-        "The email locator is not present on the page. Skipping this step.",
-      )
-      // Optionally, you can throw an error, fail the test, or take any other desired action here.
-    }
+    await page.click("button#microsoft")
 
-    await page
-      .getByLabel("someone@example.com")
-      .fill(process.env.AUTH_EMAIL ?? "")
+    // Indicates email can be filled in
+    await page.waitForSelector("a#cantAccessAccount")
+    // Fill email input
+    await page.fill("input#i0116", process.env.AUTH_EMAIL ?? "")
 
-    await page.getByRole("button", { name: "Next" }).click()
-    await new Promise((resolve) => setTimeout(resolve, 1000))
+    // Click the "Next" button
+    await page.click("input#idSIButton9")
 
-    await page.getByLabel("Password").fill(process.env.AUTH_PW ?? "")
-    await page.getByRole("button", { name: "Sign in" }).click()
-    await new Promise((resolve) => setTimeout(resolve, 1000))
+    // Indicates password can be filled in
+    await page.waitForSelector("a#idA_PWD_ForgotPassword")
+    // Fill password input
+    await page.fill("input#i0118", process.env.AUTH_PW ?? "")
 
-    await page.getByRole("button", { name: "No" }).click({})
-    await new Promise((resolve) => setTimeout(resolve, 1000))
+    // Click the "Sign in" button
+    await page.click("input#idSIButton9")
 
-    await page.waitForURL(
-      callbackUrl + (browser.browserType().name() === "webkit" ? "#" : ""),
-    )
+    // Click the "No" button
+    await page.click("input#idBtn_Back")
+
+    await page.waitForSelector("#start")
   })
 
   test("Is logged in", async () => {
     await page.goto(callbackUrl + "signin")
-    await page.waitForURL(callbackUrl)
-    expect(await page.screenshot()).toMatchSnapshot("1.png")
+    await page.waitForSelector("#start")
+    await page.evaluate(() => document.fonts.ready)
+
+    expect(await page.screenshot()).toMatchSnapshot("1.png", {
+      maxDiffPixelRatio: 0.02,
+    })
   })
 
   test("Is logged out", async () => {
+    await page.goto(callbackUrl + "signout")
+
+    await page.waitForLoadState("domcontentloaded")
+
+    await page.click("button#signout")
+
+    await page.waitForSelector("#start")
+
     await page.goto(
       "https://login.microsoftonline.com/common/oauth2/v2.0/logout",
     )
 
-    await page.waitForLoadState("domcontentloaded")
+    await page.waitForSelector("div#loginHeader")
 
     const emailLocator = page.locator(
       `[data-test-id="${process.env.AUTH_EMAIL ?? ""}"]`,
@@ -78,8 +81,6 @@ test.describe.serial("Check Azure AD auth", () => {
       // Optionally, you can throw an error, fail the test, or take any other desired action here.
     }
 
-    await page
-      .getByRole("heading", { name: "You signed out of your account" })
-      .click()
+    await page.waitForSelector("div#SignOutStatusMessage")
   })
 })

leaky-ships/e2e/email.spec.ts

@@ -27,12 +27,15 @@ test.describe.serial("Check Email auth", () => {
   test("Email login process...", async ({ browser }) => {
     await page.goto(callbackUrl + "signin")
 
-    await page.getByPlaceholder("user@example.com").fill(player1Email(browser))
-    await page.getByRole("button", { name: "Sign in with Email" }).click()
+    await page.waitForSelector("input#email")
+    await page.fill("input#email", player1Email(browser))
+    await page.click("button#email-submit")
 
     await page.waitForURL(
       callbackUrl + "api/auth/verify-request?provider=email&type=email",
     )
+
+    await page.waitForLoadState("domcontentloaded")
   })
 
   test("Verify Email...", async ({ browser }) => {

leaky-ships/pages/index.tsx

@@ -11,10 +11,7 @@ export default function Home() {
         <Logo />
         <BurgerMenu />
         <div className="flex h-36 w-64 items-center justify-center overflow-hidden rounded-xl border-8 border-black bg-[#2227] sm:h-48 sm:w-96 md:h-72 md:w-[32rem] md:border-[6px] xl:h-[26rem] xl:w-[48rem]">
-          <video controls preload="metadata">
-            <source src="/Regelwerk.mp4" type="video/mp4" />
-            Your browser does not support the video tag.
-          </video>
+          <video controls preload="metadata" src="/Regelwerk.mp4" />
         </div>
         <button
           id="start"

leaky-ships/styles/globals.scss

@@ -6,6 +6,7 @@
 @font-face {
   font-family: "CP_Font";
   src: url("/fonts/cpfont_ote/CP Font.otf") format("opentype");
+  font-display: swap;
 }
 
 .pixelart {