Struktur Deployment Playwright ke Jenkins

Bagus! Sekarang kita bahas cara mengintegrasikan Playwright dengan Jenkins, step-by-step, mulai dari Jenkins freestyle job biasa sampai Jenkins Pipeline (file Jenkinsfile).

---

🎯 Tujuan:

• Jenkins bisa menjalankan test Playwright secara otomatis.

• Playwright menghasilkan report HTML yang bisa dilihat di Jenkins.

• Tidak perlu klik manual — cukup push code atau jalankan pipeline.

---

✅ 1. Prasyarat Sebelum Integrasi

A. Jenkins sudah siap:

• ✅ Jenkins terinstal dan berjalan

• ✅ Node.js sudah disiapkan (via plugin NodeJS)

• ✅ Plugin tambahan:

  • NodeJS Plugin

  • HTML Publisher Plugin

B. Jenkins Agent/Server:

• Harus bisa menjalankan Playwright (Linux CLI OK, Windows pun bisa)

• Jika Linux: pastikan dependencies sudah terinstall → atau jalankan:

npx playwright install --with-deps

---

🧩 2. Opsi Integrasi: Freestyle Job atau Pipeline

✅ A. Jenkins Freestyle Job (paling simpel)

1. Buat Job Baru: pilih “Freestyle project”

2. Source Code Management: pilih Git, isi URL repo kamu

3. Build Environment: aktifkan Provide Node & npm bin/folder to PATH, pilih NodeJS (misal “NodeJS 18”)

4. Build Steps: tambahkan:

   npm ci
   npx playwright install --with-deps
   npx playwright test
   

5. Publish HTML Report:

   • Aktifkan Publish HTML reports

   • Report directory: playwright-report

   • Report file: index.html

   • Report name: Playwright Report

6. Save dan Build Now 🎉

---

✅ B. Jenkinsfile (Declarative Pipeline)

Kalau kamu pakai Jenkins Pipeline (lebih modern & powerful), integrasi seperti ini:

Langkah:

1. Tambahkan file Jenkinsfile ke root project kamu.

2. Isi seperti ini:

pipeline {
  agent any

  tools {
    nodejs 'NodeJS 18'
  }

  environment {
    CI = 'true'
  }

  stages {
    stage('Checkout') {
      steps {
        git branch: 'main', url: 'https://github.com/your-org/your-playwright-project.git'
      }
    }

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

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

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

3. Di Jenkins:

   • Buat job baru → pilih Pipeline

   • Source-nya: SCM → Git

   • Isi URL + credentials

   • Save → klik “Build Now”

---

🖼️ Hasil Akhir:

• Jenkins akan:

  • Checkout repo

  • Install dependencies

  • Jalankan test Playwright (headless)

  • Simpan dan tampilkan laporan test (HTML)

• Kamu bisa klik "Playwright Report" di sidebar Jenkins

---

🔐 Tips Tambahan

Tips	Penjelasan
CI=true	Wajib untuk Playwright jalan sebagai test CI
Headless	Playwright default jalan headless, cocok untuk server
npm ci	Lebih cepat dan konsisten dari npm install
Docker	Bisa dibuat Jenkins agent khusus berbasis Playwright
Retry	Tambahkan retries: 1 di playwright.config.ts untuk stabilitas

---