← L11↩ All
Lesson 12

CI/CD Pipelines

What is CI · GitHub Actions · Workflow file structure · Running Playwright in the cloud

→ next slide  |  ESC overview

Lesson Plan
Lesson 12: CI/CD Pipelines

1. What is CI and why it matters

2. GitHub Actions — how it works

3. Workflow file structure

4. Each step explained

5. Reading results and downloading the report

Homework — Task 3: Complete the scaffolded .github/workflows/playwright.yml file so your tests run automatically on every push and PR. Paste the link to a passing run in your PR description.
Concept

What Is CI?

CI — Continuous Integration — means every code change automatically triggers a build and test run in the cloud.

Without CI Tests only run when someone remembers to run them locally. Broken code reaches main. The next person pulls a broken branch.
With CI Every push and every PR triggers an automated run. If tests fail, the PR is blocked before anyone reviews it.
What you get A green or red status badge on every PR. A downloadable HTML report. A permanent link to prove your tests passed.
CI does not replace local testing — it is the safety net that catches what slips through.
GitHub Actions

Where the Workflow Lives

playwright-kriso/
  .github/
    workflows/
      playwright.yml ← the pipeline
  tests/
  pages/
  package.json
  playwright.config.ts
GitHub reads this automatically Any .yml file inside .github/workflows/ becomes a workflow. No registration needed — just push the file.
Already scaffolded for you The file exists in your repo with # TODO comments. Your job is to fill in the blanks — each TODO explains exactly what to add.
Runs on GitHub's servers You don't need a build server. GitHub spins up a fresh Linux VM, runs your steps, then shuts it down.
Structure

Workflow File — Top Level

name: Playwright E2E Tests

on:           # when to run
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  e2e:
    runs-on: ubuntu-latest
    timeout-minutes: 15

    steps:
      - uses: actions/checkout@v4
      - # ... more steps
name What this workflow is called. Shows up in the GitHub Actions tab.
on When GitHub triggers the workflow. Here: on every push to main and on every PR targeting main.
jobs → steps A job is a list of steps that run in order on one machine. Steps are the actual commands — install, run, upload.
Triggers

When Should the Pipeline Run?

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
push: branches: [main] Runs when you push a commit directly to main. Catches anything merged in.
pull_request: branches: [main] Runs when someone opens or updates a PR that targets main. This is where the green/red check appears on the PR page — before anyone merges.
Both triggers together mean: tests always run, whether you push directly or open a PR.
Runner

Where the Job Runs

jobs:
  e2e:
    runs-on: ubuntu-latest
    timeout-minutes: 15
runs-on: ubuntu-latest GitHub spins up a fresh Ubuntu Linux VM for this job. It is wiped after the run — no leftover state between runs.
timeout-minutes: 15 If the job gets stuck (infinite wait, hanging browser), GitHub kills it after 15 minutes. Without this, a stuck job can block your quota for hours.
Steps

Install Steps

steps:
  # 1 — check out your code
  - uses: actions/checkout@v4

  # 2 — set up Node.js
  - uses: actions/setup-node@v4
    with:
      node-version: '20'
      cache: 'npm'

  # 3 — install npm packages
  - name: Install dependencies
    run: npm ci

  # 4 — install Playwright + browser
  - name: Install Playwright browsers
    run: npx playwright install --with-deps chromium
actions/checkout@v4 Clones your repository onto the runner. Already pre-filled in the scaffold — no changes needed.
actions/setup-node@v4 Installs Node 20 and enables npm caching so repeated runs don't re-download packages from scratch.
npm ci Like npm install but reads package-lock.json exactly — reproducible installs, no version drift.
--with-deps chromium Installs Chromium only (not Firefox/WebKit) and its OS dependencies. Faster than installing all browsers.
Steps

Run Tests & Upload Report

  # 5 — run all tests
  - name: Run Playwright tests
    run: npx playwright test

  # 6 — upload the HTML report
  - name: Upload test report
    if: always()
    uses: actions/upload-artifact@v4
    with:
      name: playwright-report
      path: playwright-report/
      retention-days: 14
npx playwright test Runs all tests found by playwright.config.ts. The step fails if any test fails, which marks the whole job red.
if: always() Without this, step 6 is skipped when tests fail — and you lose the report exactly when you need it most. always() forces it to run regardless.
retention-days: 14 GitHub keeps the artifact for 14 days. After that it is deleted automatically. Download it before then if you need it.
Results

Reading the Pipeline Results

1. Open the Actions tab In your GitHub repo, click Actions. Each push and PR shows up as a workflow run with a green ✓ or red ✗.
2. Click into the run Open the run → open the e2e job → see each step expand. Failed steps show the error output inline.
3. Download the report Scroll to the bottom of the run page → Artifacts → download playwright-report. Unzip and open index.html.
4. Copy the run URL The URL in your browser on the run page is the link to paste into your PR description — it proves the run passed.
Red run = blocked PR A failing run does not merge automatically. Fix the tests, push again — a new run starts and the status updates.
Check on PRs too Open your PR → scroll down — the checks section shows the run status directly. Reviewers see it before reading a single line of code.

Homework — Task 3: CI Pipeline

Complete the scaffolded workflow file so your Playwright tests run automatically in the cloud.

What to fill in:
  • Triggers — push + pull_request on main
  • Runner — ubuntu-latest, timeout 15 min
  • Node setup — version 20, npm cache
  • Install — npm ci
  • Browsers — npx playwright install --with-deps chromium
  • Run — npx playwright test
  • Upload — artifact, if: always(), 14 days
How to submit:
  • Push the completed playwright.yml to your fork
  • Open the Actions tab — wait for the run to go green
  • Copy the URL of the passing run
  • Open a PR to tanjaq/playwright-kriso
  • Paste the Actions run URL in the PR description

The scaffold file is at .github/workflows/playwright.yml — each step has a # TODO comment explaining what to add.