included screenshot on failure

.github/workflows/playwright.yml

@@ -5,7 +5,8 @@ on:
   workflow_dispatch:
     inputs:
       environment:
-        description: "Deployment environment"
+        description: "Select the environment to execute test"
+        required: true
         type: choice
         default: "live"
         options:
@@ -19,15 +20,15 @@ jobs:
   setup:
     timeout-minutes: 60
     runs-on: ubuntu-latest
+    environment: ${{ github.event.inputs.environment }}
+    env:
+      BASE_URL: ${{ vars.URL }}
+      ADMIN_USER_PASSWORD: ${{secrets.ADMIN_USER_PASSWORD}}
     steps:
+      - name: Set BASE_URL
+        run: echo "$BASE_URL"
       - name: Checkout code
         uses: actions/checkout@v4
-      - name: Set Environment Variables
-        uses: ./.github/actions/set-environment-variables
-        with:
-          environment: ${{ github.event.inputs.environment }}
-        env:
-          ADMIN_USER_PASSWORD: ${{secrets.ADMIN_USER_PASSWORD}}
   test:
     runs-on: ubuntu-latest
     needs: setup

playwright.config.ts

@@ -27,7 +27,7 @@ export default defineConfig({
   /* 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://apichallenges.herokuapp.com",
+    baseURL: process.env.BASE_URL || "http://localhost:3000",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",

tests/base.ts

@@ -1,11 +1,12 @@
 import {
   test as base,
   expect as baseExpect,
+  Locator,
   Page,
   TestInfo,
 } from "@playwright/test";
 import { requestWithHeader } from "../utils/request.helper";
-
+import { takeScreenshot } from "../utils/screenshot.helper";
 import { getLocatorBasedOnTitle } from "../utils/assert.helper";
 
 const test = base.extend<{
@@ -24,18 +25,15 @@ const test = base.extend<{
 export const expect = baseExpect.extend({
   async toBeSuccessful(page: Page, testInfo: TestInfo) {
     let pass: boolean;
-    const title = testInfo.title;
-
+    const title: string = testInfo.title;
+    let locator: Locator | null = null;
     try {
-      const locator = await getLocatorBasedOnTitle(page, title);
+      locator = await getLocatorBasedOnTitle(page, title);
       await expect(locator, title).toHaveCSS(
         "background-color",
         "rgb(152, 251, 152)"
       );
-      await testInfo.attach("screenshot", {
-        body: await locator.screenshot(),
-        contentType: "image/png",
-      });
+
       pass = true;
       return {
         message: () =>
@@ -45,6 +43,7 @@ export const expect = baseExpect.extend({
         pass,
       };
     } catch (error) {
+      await takeScreenshot(locator, page, testInfo);
       return {
         message: () => `${error.message} for the test case: "${title}".`,
         pass: false,

utils/screenshot.helper.ts

@@ -0,0 +1,20 @@
+import { Locator, Page, TestInfo } from "@playwright/test";
+
+export async function takeScreenshot(
+  locator: Locator | null,
+  page: Page,
+  testInfo: TestInfo
+) {
+  if (locator) {
+    await testInfo.attach("screenshot", {
+      body: await locator.screenshot(),
+      contentType: "image/png",
+    });
+  } else {
+    const screenshot = await page.screenshot({ path: "screenshot.png" });
+    testInfo.attach("screenshot", {
+      body: screenshot,
+      contentType: "image/png",
+    });
+  }
+}