fix: Removed unneeded e2e tests + improved GH action (#1596)

Author: lamATnginx

.github/workflows/playwright.yml

@@ -1,30 +1,68 @@
-name: UI validation on prod
+name: Running Playwright test on UI
 on: 
-  workflow_dispatch:
-
+  push:
+    branches: [main]
+    paths:
+      - 'static/nginxaas-azure/js/cost-calculator_v2.js'  
+      - 'content/nginxaas-azure/billing/usage-and-cost-estimator.md'
+  pull_request:
+    paths:
+      - 'static/nginxaas-azure/js/cost-calculator_v2.js'
+      - 'content/nginxaas-azure/billing/usage-and-cost-estimator.md'
+permissions:
+  contents: read
 jobs:
+  get-playwright-version:
+    name: Get Playwright Version
+    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.get-playwright-version.outputs.version }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
+      - name: Get version from package.json
+        id: get-playwright-version
+        run: |
+          version=$(jq -r '.devDependencies["@playwright/test"] // .dependencies["@playwright/test"]' package.json)
+          test -n "$version" || { echo "No @playwright/test version found in package.json"; exit 1; }
+          echo "version=$version" >> $GITHUB_OUTPUT
+          echo "Version: " $version
   run-playwright-tests:
+    name: Run Playwright
+    needs: get-playwright-version
     runs-on: ubuntu-latest
+    container:
+          image: mcr.microsoft.com/playwright:v${{needs.get-playwright-version.outputs.version}}-jammy
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v6
+    - name: Checkout code
+      uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
+    - name: Setup Hugo
+      uses: peaceiris/actions-hugo@75d2e84710de30f6ff7268e08f310b60ef14033f # v3.0.0
       with:
-        node-version: lts/*
+        hugo-version: '0.147.8'
+        extended: true
+    - uses: actions/setup-go@44694675825211faa026b3c33043df3e48a5fa00 #v6.0.0
+      with: 
+        go-version: '1.24.6'
     - name: Install dependencies
       run: npm ci
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
     - name: Run Playwright tests
-      run: npx playwright test --retries=2
-    - uses: actions/upload-artifact@v6
-      if: ${{ !cancelled() }}
+      id: test-ui
+      # Check done to set the home variable. Workaround as browser is unable to launch if the $HOME folder isn't owned by the current user.
+      if:  ${{ runner.os == 'Linux' }}
+      env:
+        HOME: /root
+      run: |
+        git config --global --add safe.directory /__w/nginx-hugo-theme/nginx-hugo-theme
+        cd tests && npx playwright test | tee output.log
+        if grep -q "failed" output.log; then
+          echo "Playwright tests failed. Please view the Playwright report to see full error."
+          exit 1
+        fi
+    - uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # v4.5.0
+      id: artifact-upload
+      if: ${{ !cancelled() && failure() && steps.test-ui.conclusion == 'failure' }}
       with:
         name: playwright-report
         path: tests/playwright-report/
-        retention-days: 30
-    - uses: actions/upload-artifact@v6
-      if: ${{ !cancelled() }}
-      with:
-        name: test-results
-        path: tests/test-results/
-        retention-days: 30
+        retention-days: 3

tests/n4a-calculator.spec.ts

@@ -1,10 +1,10 @@
 import { defineConfig, devices } from '@playwright/test';
 export default defineConfig({
-    testDir: 'tests',
+    testDir: './src',
     fullyParallel: true,
     workers: 1,
-    outputDir: 'tests/test-results',
-    reporter: [['html', {  outputFolder: 'tests/playwright-report' }]],
+    outputDir: './test-results',
+    reporter: [['html', {  outputFolder: './playwright-report' }]],
     projects: [
         {
             name: 'chromium',

playwright.config.ts tests/playwright.config.tsplaywright.config.ts renamed to tests/playwright.config.ts

@@ -0,0 +1,28 @@
+import { expect, test } from "@playwright/test";
+import { handleConsentPopup, waitFor } from "../util";
+
+test.describe("Testing for N4A calculator page", () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto("/nginxaas/azure/billing/usage-and-cost-estimator/");
+		await page.waitForLoadState("load");
+		await waitFor(async () => await handleConsentPopup(page));
+	});
+
+	test("calculator renders", async ({ page }) => {
+		const header = page.getByTestId("calculator-section-heading");
+		const content = page.getByTestId("calculator-section-content");
+
+		await expect(header).toBeVisible();
+		await expect(content).toBeVisible();
+	});
+
+	test("calculator values render", async ({ page }) => {
+		// Conjunction - If outputs are rendered, it is safe to say the inputs are rendered.
+		// NOT testing changing numbers will impact the total values as that should be the job of unit tests. This is just a smoke tests.
+		const ncuEstimateValue = page.getByTestId("ncuEstimateValue");
+		const totalValue = page.getByTestId("total-value");
+		
+		expect(await ncuEstimateValue.textContent()).toBeTruthy();
+		expect(await totalValue.textContent()).toBeTruthy();
+	});
+});