15. CI/CD | Playwright Academy

CI (Continuous Integration) menjalankan semua test setiap kali ada kode baru, dan memberi tanda sebelum kode yang rusak sampai ke pengguna. Di GitHub, layanannya disebut GitHub Actions.

Di dunia QA

CI seperti regression test yang otomatis dimulai setiap kali developer menyerahkan build baru, tanpa perlu ada yang mengingatkan. Hasilnya langsung terlihat di pull request.

Istilah penting

Istilah	Artinya
Workflow	File YAML di `.github/workflows/` yang berisi daftar tugas CI
Trigger (`on`)	Kapan workflow jalan: saat `push`, `pull_request`, sesuai jadwal, atau ditekan manual
Job	Sekumpulan langkah yang dikerjakan di satu mesin
Runner	Komputer sewaan yang menjalankan job (misalnya `ubuntu-latest`)
Step	Satu perintah atau action di dalam job
Artifact	File hasil kerja yang disimpan (report, trace, video)
Secret	Nilai rahasia yang disimpan terkunci (password, token)

Workflow untuk project kamu

Simpan file ini di folder .github/workflows/ di root repository. Nama file-nya bebas, misalnya playwright.yml.

.github/workflows/playwright-python.yml.github/workflows/playwright-typescript.yml

name: Playwright Python

on:
  push:
    branches: [main]
  pull_request:

jobs:
  test:
    runs-on: ubuntu-latest
    timeout-minutes: 20
    steps:
      - uses: actions/checkout@v6

      - uses: astral-sh/setup-uv@v9
      - run: uv sync

      - name: Install browser + dependency OS
        run: uv run playwright install --with-deps chromium

      - name: Jalankan test
        run: uv run pytest
        env:
          TOKOQA_USERNAME: ${{ secrets.TOKOQA_USERNAME }}
          TOKOQA_PASSWORD: ${{ secrets.TOKOQA_PASSWORD }}

      - name: Simpan artefak (trace, video, screenshot)
        if: ${{ !cancelled() }}
        uses: actions/upload-artifact@v4
        with:
          name: test-results
          path: test-results/
          retention-days: 14

name: Playwright TypeScript

on:
  push:
    branches: [main]
  pull_request:

jobs:
  test:
    runs-on: ubuntu-latest
    timeout-minutes: 20
    steps:
      - uses: actions/checkout@v6

      - uses: actions/setup-node@v6
        with:
          node-version: lts/*
          cache: npm

      - run: npm ci

      - name: Install browser + dependency OS
        run: npx playwright install --with-deps

      - name: Jalankan test
        run: npx playwright test
        env:
          TOKOQA_USERNAME: ${{ secrets.TOKOQA_USERNAME }}
          TOKOQA_PASSWORD: ${{ secrets.TOKOQA_PASSWORD }}

      - name: Simpan HTML report
        if: ${{ !cancelled() }}
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 14

Bagian yang perlu kamu pahami:

on: workflow jalan setiap ada push ke main dan setiap ada Pull Request.
--with-deps: menginstall browser beserta library Linux yang dibutuhkannya.
env + secrets: username dan password diambil dari Settings → Secrets and variables → Actions. Kode test tidak berubah (os.environ / process.env, Modul 11).
if: !cancelled(): hasil test tetap disimpan walaupun test gagal, saat trace paling dibutuhkan.
Variabel CI=true otomatis tersedia di GitHub Actions. Config TS kamu memakainya untuk retries: 2, workers: 1, dan forbidOnly.

Alternatif: jalankan di container Docker resmi

Image Docker resmi sudah berisi browser dan semua kebutuhannya, jadi tidak perlu install --with-deps. Versi image harus sama dengan versi Playwright di project.

jobs:
  test:
    runs-on: ubuntu-latest
    container:
      image: mcr.microsoft.com/playwright/python:v1.63.0-noble
    steps:
      - uses: actions/checkout@v6
      - run: pip install uv && uv sync && uv run pytest

jobs:
  test:
    runs-on: ubuntu-latest
    container:
      image: mcr.microsoft.com/playwright:v1.63.0-noble
    steps:
      - uses: actions/checkout@v6
      - run: npm ci && npx playwright test
        env:
          HOME: /root

Coba juga di laptopmu (kalau Docker sudah diinstall):

docker run --rm -it -v "${PWD}:/work" -w /work mcr.microsoft.com/playwright/python:v1.63.0-noble bash  # masuk ke image Playwright Python, folder project dipasang di /work

docker run --rm -it -v "${PWD}:/work" -w /work mcr.microsoft.com/playwright:v1.63.0-noble bash  # masuk ke image Playwright Node.js

Linting: menjaga kualitas kode test

Linter menemukan kesalahan kecil sebelum test dijalankan: import yang tidak terpakai, await yang terlupa, atau test.only yang tertinggal.

Ruff adalah linter sekaligus formatter Python yang sangat cepat:

bash

uv add --dev ruff  # pasang linter dan formatter Python
uv run ruff check .          # cari masalah
uv run ruff format .         # rapikan format kode

Tambahkan langkah - run: uv run ruff check . di workflow sebelum menjalankan test.

ESLint ditambah plugin Playwright buatan komunitas:

bash

npm i -D eslint typescript-eslint eslint-plugin-playwright  # pasang ESLint dengan aturan Playwright

TypeScript

// eslint.config.mjs
import tseslint from 'typescript-eslint';
import playwright from 'eslint-plugin-playwright'; // aturan khusus test Playwright

export default tseslint.config( // konfigurasi ESLint
  ...tseslint.configs.recommended,
  {
    files: ['tests/**/*.ts'],
    ...playwright.configs['flat/recommended'],
    languageOptions: { parserOptions: { projectService: true } },
    rules: {
      '@typescript-eslint/no-floating-promises': 'error', // menangkap await yang terlupa!
      'playwright/no-focused-test': 'error',              // melarang test.only
    },
  },
);

Tambahkan langkah - run: npx eslint . di workflow sebelum menjalankan test.

Tips CI untuk tahap berikutnya

Sharding: bagi test ke beberapa mesin sekaligus. TS: npx playwright test --shard=1/4 (dengan strategy.matrix). Python: plugin pytest-xdist untuk jalan paralel di satu mesin.
Matrix browser: jalankan job terpisah untuk setiap browser dengan strategy: matrix: browser: [chromium, firefox, webkit].
Jadwal: on: schedule: - cron: '0 1 * * *' menjalankan regression setiap malam.
Badge: tampilkan badge status workflow di README, supaya status test terlihat semua orang.

Lebih jauh (opsional)Trik komunitas

Sharding + gabung report (TypeScript): bagi test ke beberapa mesin dengan --shard=1/4, simpan hasilnya dengan reporter blob, lalu gabungkan dengan npx playwright merge-reports.
--only-changed=origin/main di Pull Request: jalankan dulu test yang berhubungan dengan perubahan, supaya hasilnya cepat ketahuan.
Python paralel: pytest -n auto (pytest-xdist) di satu mesin.
Tidak perlu menyimpan cache folder browser. Lebih aman memakai Docker image resmi atau playwright install --with-deps di setiap run.
Taruh HTML report di GitHub Pages supaya tim bisa membuka laporan tanpa harus mengunduh artefak.

Latihan

Latihan ini butuh akun GitHub.

Latihan 1

Workflow CI pertamamu

Buat repository baru di GitHub dan push project-mu (lihat Modul 14).
Salin workflow untuk bahasa pilihanmu ke .github/workflows/.
Isi Secrets TOKOQA_USERNAME (customer) dan TOKOQA_PASSWORD di Settings repository.
Push, lalu buka tab Actions.

Hasilmuncul centang hijau. Di TypeScript, artefak playwright-report bisa diunduh. Di Python, artefak test-results hanya muncul kalau ada test yang gagal, karena folder itu kosong saat semua test lulus

Sudah dicoba

Latihan 2

Buktikan CI menangkap kesalahan

Buat branch baru, lalu ubah satu nilai expected di test supaya salah.
Push dan buka Pull Request.
Lihat hasil CI di halaman Pull Request, lalu unduh trace-nya.

HasilPR menunjukkan tanda gagal (merah), dan trace menunjukkan langkah yang gagal

Sudah dicoba