step-by-step flow cara kerja Playwright dari sudut pandang praktis QA/DevOps/Developer

Tentu! Di bawah ini adalah step-by-step flow cara kerja Playwright dari sudut pandang praktis QA/DevOps/Developer, termasuk bagaimana test dijalankan sampai bisa diintegrasikan ke CI/CD seperti Jenkins:

---

✅ Step-by-Step Flow Cara Kerja Playwright

💡 Gambar Besarnya:

[1] Tulis Skenario Test  -->  [2] Jalankan Test di Browser Otomatis
           ↓                             ↓
[3] Verifikasi Hasil Otomatis  -->  [4] Buat Laporan
           ↓                             ↓
     (Optional) Integrasi ke CI/CD seperti Jenkins

---

🧩 Detail Step-by-Step

---

1. Install dan Setup Project

Pertama, siapkan project Playwright (biasanya 1x saja):

npm init -y
npm install -D @playwright/test
npx playwright install

Ini akan:

• Install test runner @playwright/test

• Download browser binaries: Chromium, Firefox, WebKit

---

2. Tulis Skenario Test

Buat file test (misal login.spec.ts atau .js):

import { test, expect } from '@playwright/test';

test('login success', async ({ page }) => {
  await page.goto('https://app.example.com/login');
  await page.fill('#username', 'widi');
  await page.fill('#password', 'rahasia123');
  await page.click('button[type=submit]');
  await expect(page).toHaveURL('https://app.example.com/dashboard');
});

📌 Bisa nulis test per fitur: login, form, filter data, dll.

---

3. Jalankan Test Secara Manual (Dev/QA Lokal)

npx playwright test

• Test akan membuka browser otomatis (headless atau headful)

• Simulasi user klik, isi form, dan verifikasi hasil

• Keluar PASS/FAIL di terminal

---

4. Generate Report Otomatis

Secara default, Playwright membuat HTML report:

npx playwright show-report

Output ada di playwright-report/index.html.

---

5. (Opsional) Konfigurasi Tambahan

Kamu bisa konfigurasi di playwright.config.ts:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    headless: true,
    baseURL: 'https://app.example.com',
  },
  reporter: [['html', { outputFolder: 'playwright-report' }]],
});

---

6. Integrasi ke CI/CD (contoh Jenkins)

Flow-nya:

Push code ke Git → Jenkins jalan → npm install → run playwright → buat report

Contoh Jenkinsfile:

pipeline {
  agent any

  tools {
    nodejs "NodeJS 18"
  }

  stages {
    stage('Install') {
      steps {
        sh 'npm ci'
        sh 'npx playwright install --with-deps'
      }
    }

    stage('Run Tests') {
      steps {
        sh 'npx playwright test'
      }
    }

    stage('Report') {
      steps {
        publishHTML(target: [
          reportDir: 'playwright-report',
          reportFiles: 'index.html',
          reportName: 'Playwright Report',
          keepAll: true
        ])
      }
    }
  }
}

---

🧪 Final Output:

• Test dijalankan otomatis

• Laporan dibuat

• Hasil test (pass/fail) muncul di Jenkins

• Jika ada bug → cepat diketahui sebelum sampai ke production

---

🧭 Ringkasan:

Langkah	Tujuan
1. Install Playwright	Siapkan tools dan browser
2. Tulis Test	Definisikan skenario user
3. Run Test	Jalankan test lokal/CI
4. Cek Report	Lihat hasil test
5. Integrasi CI/CD	Automasi test di Jenkins, GitLab, dll

---