DevOps & CI/CD for Testers: Where Tests Live in a Pipeline

Hands-on Lab: Create the course project and run a local 4-stage pipeline

You will build qa-ci-demo, a small Playwright + TypeScript project with UI tests on SauceDemo and API tests on Restful Booker. Every later lesson uses it. Prerequisites: Node.js 20 or 22 LTS and Git installed (check with node -v and git --version).

1. Create the project and install Playwright:

   mkdir qa-ci-demo && cd qa-ci-demo
   npm init -y
   npm install -D @playwright/test@1.52.0
   npx playwright install --with-deps chromium
   npm pkg set scripts.test="playwright test"
   mkdir -p tests/ui tests/api

2. Create playwright.config.ts in the project root. Note the separate api project and the CI-aware settings:

   // playwright.config.ts
   import { defineConfig, devices } from '@playwright/test';
   
   export default defineConfig({
     fullyParallel: true,
     forbidOnly: !!process.env.CI,          // a stray test.only fails the CI run
     retries: process.env.CI ? 2 : 0,
     workers: process.env.CI ? 2 : undefined,
     reporter: [
       ['list'],
       ['html', { open: 'never' }],
       ['junit', { outputFile: 'results/junit.xml' }],
     ],
     use: {
       baseURL: process.env.BASE_URL ?? 'https://www.saucedemo.com',
       trace: 'on-first-retry',
       screenshot: 'only-on-failure',
     },
     projects: [
       { name: 'api', testDir: './tests/api' },
       { name: 'chromium', testDir: './tests/ui', use: { ...devices['Desktop Chrome'] } },
       { name: 'firefox', testDir: './tests/ui', use: { ...devices['Desktop Firefox'] } },
       { name: 'webkit', testDir: './tests/ui', use: { ...devices['Desktop Safari'] } },
     ],
   });

3. Create the UI test. The @smoke tag marks tests that must run on every build:

   // tests/ui/login.spec.ts
   import { test, expect } from '@playwright/test';
   
   test.describe('Login', () => {
     test('standard user lands on inventory', { tag: '@smoke' }, async ({ page }) => {
       await page.goto('/');
       await page.locator('[data-test="username"]').fill('standard_user');
       await page.locator('[data-test="password"]').fill('secret_sauce');
       await page.locator('[data-test="login-button"]').click();
       await expect(page).toHaveURL(/inventory\.html/);
       await expect(page.locator('[data-test="title"]')).toHaveText('Products');
     });
   
     test('locked out user sees an error', async ({ page }) => {
       await page.goto('/');
       await page.locator('[data-test="username"]').fill('locked_out_user');
       await page.locator('[data-test="password"]').fill('secret_sauce');
       await page.locator('[data-test="login-button"]').click();
       await expect(page.locator('[data-test="error"]')).toContainText('locked out');
     });
   });

4. Create the API test:

   // tests/api/booking.spec.ts
   import { test, expect } from '@playwright/test';
   
   const API = 'https://restful-booker.herokuapp.com';
   
   test('health check responds 201', { tag: '@smoke' }, async ({ request }) => {
     const res = await request.get(`${API}/ping`);
     expect(res.status()).toBe(201);
   });
   
   test('GET /booking returns a list of ids', async ({ request }) => {
     const res = await request.get(`${API}/booking`);
     expect(res.ok()).toBeTruthy();
     const body = await res.json();
     expect(Array.isArray(body)).toBe(true);
     expect(body[0]).toHaveProperty('bookingid');
   });

5. Run both projects once: npx playwright test --project=api --project=chromium. Expected: 4 passed. Open the report with npx playwright show-report.
6. Create ci.sh with the stages below, then run chmod +x ci.sh && ./ci.sh:

   #!/usr/bin/env bash
   # ci.sh - a "pipeline" you can run on your laptop
   set -euo pipefail
   
   echo "== Stage 1: install (clean, from lockfile) =="
   npm ci
   
   echo "== Stage 2: static check (does every spec compile and load?) =="
   npx playwright test --list > /dev/null
   
   echo "== Stage 3: API smoke (fast, no browser) =="
   npx playwright test --project=api --grep @smoke
   
   echo "== Stage 4: UI smoke on chromium =="
   npx playwright test --project=chromium --grep @smoke
   
   echo "== QUALITY GATE PASSED: build can be promoted =="

7. Expected output ends with QUALITY GATE PASSED. Now prove the gate works: change 'Products' to 'Product' in login.spec.ts and run ./ci.sh; echo "exit code: $?". Stage 4 fails, the script stops, and the exit code is 1. Revert the change.
8. Run ls results — you should see junit.xml. CI servers (Jenkins, GitHub Actions, Azure DevOps, GitLab) all read this JUnit XML format to show pass/fail trends.

You have just built a pipeline in miniature: ordered stages, fail-fast behaviour, machine-readable results and a gate. GitHub Actions and Jenkins do exactly this on a server, triggered automatically.