Playwright

Overview

This guide explains how to run Playwright tests against Signadot sandboxes. You can run these tests either:

• Directly in your CI pipeline
• Using Signadot Jobs for sandbox-aware test execution

Set Up Routing Context

To run tests against sandboxes, you'll need to configure Playwright to include the appropriate routing headers. This is required regardless of whether you're running tests in CI or using Signadot Jobs.

You have two options for setting up routing:

Using Playwright Config (Recommended)

Use the extraHTTPHeaders option in your Playwright config:

your_project/playwright.config.ts

import { defineConfig, devices } from "@playwright/test";

const BASE_URL = 'https://yourwebsite.com';

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,
			},
		},
	],
});

Using Route Interception

For more granular control, use page.route:

your_project/tests/basePage.ts

await page.route(
	(url: URL) => {
		// Only add the routing key if the url contains mydomain.com
		return url.href.includes("mydomain.com");
	},
	async (route, request) => {
		const headers = await request.allHeaders();

		// You can also use previous headers.baggage if need to
		await route.continue({
			headers: {
				...headers,
				baggage: `sd-routing-key=${routingKey}`,
			},
		});
	}
);

Running Tests in CI

To run tests directly in your CI pipeline:

1. Create a sandbox for testing
2. Get the sandbox's routing key
3. Set the environment variable and run tests:

   export SIGNADOT_ROUTING_KEY=<your-sandbox-routing-key>
   npx playwright test

Running Tests as Signadot Jobs

For sandbox-aware test execution, you can run tests as Signadot Jobs. This provides additional benefits:

• Automatic test failure if the sandbox is terminated or fails
• Built-in artifact collection
• Integrated test reporting

Create Job Runner Group

First, create a Job Runner Group:

your_project/.signadot/testing/playwright-runner.yaml

name: playwright
spec:
  cluster: "@{cluster}"
  labels:
    env: "@{env}"
  namespace: <namespace where run tests>
  jobTimeout: 30m
  image: mcr.microsoft.com/playwright:v1.45.1-jammy
  scaling:
    manual:
      desiredPods: 1

Create Job Specification

your_project/.signadot/testing/e2e-demo-playwright.yaml

spec:
  namePrefix: playwright-e2e
  runnerGroup: playwright
  script: |
    #!/bin/bash
    set -e
    
    # Clone the git repo
    echo "Cloning repo"
    git clone --single-branch -b "@{branch}" \
      https://github.com/<org>/<repo>.git

    # Run all playwright tests
    cd <repo>
    
    export CI=true
    
    npm ci
    set +e
    npm run e2e:playwright # Change with your corresponding npm command or npx playwright test
    E2E_EXIT_CODE=$?
    set -e

    # Compress the playwright-report directory so that it can be uploaded as a single artifact.
    tar czf playwright-report.tar.gz playwright-report

    exit $E2E_EXIT_CODE
  routingContext:
    sandbox: "@{sandbox}"
  uploadArtifact:
    - path: <repo>/playwright-report.tar.gz

Exit Code Handling

    set +e
    npm run e2e:playwright # Change with your corresponding npm command or npx playwright test
    E2E_EXIT_CODE=$?
    set -e
    
    ... more script
    
    exit $E2E_EXIT_CODE

If you want to make sure the job doesn't terminate when the tests fail, we save the exit code and return it at the very end.

Report Handling

As of now, directory upload is not supported. So we compress the playwright-report directory so that all the artifacts are available as a single file.