use playwright e2e (#244)

* add playwright test

* add tests

* no open reporter when finished

* show videos always

* use base url

* print baseurl

* use sandbox name

* fix format

* print routing key

* fix routing key

* ignore sandbox name scapping

* print routing key

* add reloads

* add second reload

* add hard reload

* use context for new page

* trace on

* trace on

* clean files

* clean files

* update playwright job

* remove unused playwright file

* ignore playwright results

* remove console log

* remove bad config

* add demo job

* remove sandbox from demo

* add sandbox routing context

.gitignore

@@ -4,4 +4,8 @@ dist/
 node_modules/
 hotrod
 .idea/
-.nocover
+.nocover
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.signadot/testing/demo-playwright-job.yaml

@@ -0,0 +1,33 @@
+spec:
+  namePrefix: hotrod-playwright-e2e
+  runnerGroup: playwright
+  script: |
+    #!/bin/bash
+    set -e
+    
+    # Clone the git repo
+    echo "Cloning signadot repo"
+    git clone --single-branch -b "@{branch}" \
+      https://github.com/signadot/hotrod.git
+
+    # Run all playwright tests
+    cd hotrod
+    
+    export HOTROD_NAMESPACE="@{namespace}"
+    export CI=true
+    
+    npm ci
+    set +e
+    npm run e2e:playwright --spec playwright-tests/basic.spec.ts
+    E2E_EXIT_CODE=$?
+    set -e
+
+    tar czf playwright-report.tar.gz playwright-report
+
+    exit $E2E_EXIT_CODE
+  routingContext:
+    sandbox: "@{sandbox}"
+  uploadArtifact:
+    - path: hotrod/playwright-report/index.html
+    - path: hotrod/playwright-report.tar.gz
+

.signadot/testing/e2e-playwright-job.yaml

@@ -0,0 +1,38 @@
+spec:
+  namePrefix: hotrod-playwright-e2e
+  runnerGroup: playwright
+  script: |
+    #!/bin/bash
+    set -e
+    
+    # Clone the git repo
+    echo "Cloning signadot repo"
+    git clone --single-branch -b "@{branch}" \
+      https://github.com/signadot/hotrod.git
+
+    # Run all playwright tests
+    cd hotrod
+    
+    export HOTROD_NAMESPACE="@{namespace}"
+    export CI=true
+    
+    export SANDBOXED_FRONTEND="@{sandboxed_frontend}"
+    export SANDBOXED_LOCATION="@{sandboxed_location}"
+    export SANDBOXED_ROUTE="@{sandboxed_route}"
+    export SANDBOXED_DRIVER="@{sandboxed_driver}"
+    
+    npm ci
+    set +e
+    npm run e2e:playwright --spec playwright-tests/basic.spec.ts
+    E2E_EXIT_CODE=$?
+    set -e
+
+    tar czf playwright-report.tar.gz playwright-report
+
+    exit $E2E_EXIT_CODE
+
+  routingContext:
+    sandbox: "@{sandbox}"
+  uploadArtifact:
+    - path: hotrod/playwright-report/index.html
+    - path: hotrod/playwright-report.tar.gz

.signadot/testing/playwright-runner.yaml

@@ -0,0 +1,11 @@
+name: playwright
+spec:
+  cluster: "@{cluster}"
+  labels:
+    env: "@{env}"
+  namespace: signadot-tests
+  jobTimeout: 30m
+  image: mcr.microsoft.com/playwright:v1.45.1-jammy
+  scaling:
+    manual:
+      desiredPods: 1

package.json

@@ -1,5 +1,10 @@
 {
   "devDependencies": {
+    "@playwright/test": "^1.45.1",
+    "@types/node": "^20.14.9",
     "cypress": "^13.11.0"
+  },
+  "scripts": {
+    "e2e:playwright": "playwright test "
   }
 }

playwright-tests/basic.spec.ts

@@ -0,0 +1,42 @@
+import { test, expect } from "@playwright/test";
+
+test("request ride and check routing context", async ({ page }) => {
+	const sandboxName = process.env.SIGNADOT_SANDBOX_NAME;
+
+	await page.goto("/");
+	await page.waitForLoadState();
+
+	await page.getByRole("combobox").first().selectOption("1");
+	await page.getByRole("combobox").nth(1).selectOption("123");
+	await page.getByRole("button", { name: "Request Ride" }).click();
+
+	const getSandboxName = (
+		service: "browser" | "frontend" | "location" | "driver" | "route",
+	): RegExp => {
+		if (!sandboxName) return /baseline/;
+
+		const serviceValue = process.env["SANDBOXED_" + service.toUpperCase()];
+
+		if (serviceValue !== "1") {
+			return /baseline/;
+		}
+
+		return new RegExp(`${sandboxName}`);
+	};
+
+	await expect(
+		page.locator('//*[@id="accordion-panel-:r0:"]/div/div[1]'),
+	).toHaveText(getSandboxName("browser"));
+	await expect(
+		page.locator('//*[@id="accordion-panel-:r0:"]/div/div[2]'),
+	).toHaveText(getSandboxName("frontend"));
+	await expect(
+		page.locator('//*[@id="accordion-panel-:r0:"]/div/div[3]'),
+	).toHaveText(getSandboxName("location"));
+	await expect(
+		page.locator('//*[@id="accordion-panel-:r0:"]/div/div[4]'),
+	).toHaveText(getSandboxName("driver"));
+	await expect(
+		page.locator('//*[@id="accordion-panel-:r0:"]/div/div[5]'),
+	).toHaveText(getSandboxName("route"));
+});

playwright.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const BASE_URL = `http://frontend.${process.env.HOTROD_NAMESPACE}:8080`;
+
+export default defineConfig({
+	testDir: "./playwright-tests",
+	fullyParallel: true,
+	forbidOnly: !!process.env.CI,
+	retries: process.env.CI ? 0 : 0,
+	workers: process.env.CI ? 1 : undefined,
+	reporter: [["html", { open: "never" }]],
+	use: {
+		baseURL: BASE_URL,
+		trace: "on",
+		video: "on",
+		extraHTTPHeaders: {
+			baggage: `sd-routing-key=${process.env.SIGNADOT_ROUTING_KEY}`,
+		},
+	},
+	projects: [
+		{
+			name: "chromium",
+			use: {
+				...devices["Desktop Chrome"],
+				baseURL: BASE_URL,
+			},
+		},
+	],
+});