JIPRAKS Classroom

Cara Bangun AI Agent untuk Otomasi Pengujian UI dengan Playwright + n8n (Tanpa Coding Berat)

· 3 menit baca

Cara Bangun AI Agent untuk Otomasi Pengujian UI dengan Playwright + n8n (Tanpa Coding Berat)

Pain point: Tim dev sering terhambat karena harus menulis skrip pengujian UI manual, mengupdate kalau UI berubah, dan hasilnya tersebar di spreadsheet. Akibatnya, regresi bug lewat, deadline meleset, dan QA jadi bottleneck.

Kenapa Pakai AI Agent + n8n?

  • AI Agent meng‑generasi atau memperbaiki skrip Playwright berdasarkan deskripsi fitur, jadi tidak perlu menulis kode.
  • n8n meng‑orchestrasi semua langkah: trigger, generate script, execute, collect hasil, dan kirim notifikasi.
  • Integrasi low‑code ini mengurangi waktu setup test suite dari minggu menjadi hari.

Arsitektur Workflow

[GitHub Push] → n8n Trigger → AI Agent (OpenAI) → Generate Playwright Script → n8n Execute (Docker) → Capture Screenshot & JSON Result → Slack / Email Report

Diagram di atas dapat dibangun dalam 5 node n8n:

  1. Webhook (atau GitHub trigger) – mendeteksi perubahan pada branch feature/*.
  2. OpenAI Node – prompt: "Buat skrip Playwright untuk menguji fitur X pada aplikasi React". Prompt meng‑include URL, selector, dan expected outcome.
  3. Function Node – menyimpan script ke file test.spec.js di volume Docker.
  4. Docker Node – image mcr.microsoft.com/playwright, mount volume, jalankan npx playwright test.
  5. IF / Slack Node – bila gagal, kirim screenshot + error stack; bila sukses, kirim ringkasan.

Langkah Praktis Implementasi

1. Siapkan n8n (Docker Compose)

version: '3'
services:
  n8n:
    image: n8nio/n8n
    ports:
      - "5678:5678"
    environment:
      - N8N_BASIC_AUTH_ACTIVE=true
      - N8N_BASIC_AUTH_USER=admin
      - N8N_BASIC_AUTH_PASSWORD=secret
    volumes:
      - ./data:/home/node/.n8n
      - ./scripts:/scripts   # tempat simpan test script

2. Buat OpenAI Credentials di n8n

Masuk ke Settings → API Credentials → Add New → OpenAI. Simpan API_KEY Anda.

3. Rancang Prompt yang Efisien

You are a senior QA engineer. Write a Playwright test in JavaScript for the following user story:
{{user_story}}
Use selectors based on data-test-id. Include expect statements for navigation and content verification. Return only the code block.

Gunakan {{ $json.user_story }} dari trigger payload.

4. Node Detail

  • Webhook Node: menerima {"user_story":"User bisa menambah item ke keranjang"}.
  • OpenAI Node: model gpt-4o-mini, temperature 0.2.
  • Function Node (JS): 
    const fs = require('fs');
const script = $json.response;
fs.writeFileSync('/scripts/test.spec.js', script);
return { success: true };
  • Docker Node: 
    image: mcr.microsoft.com/playwright
command: npx playwright test /scripts/test.spec.js --reporter=json
volumes:
  - ./scripts:/scripts
  • IF Node: cek status keluar (0 = success).
  • Slack Node: kirim message dengan attachments yang berisi screenshot (jika ada) dan summary.

5. Jalankan & Debug

Set Execution mode: Run Once di UI n8n, kirim POST ke webhook dengan payload contoh. Lihat log di Docker container, perbaiki prompt bila script gagal compile.

Use Case Real: Deploy di CI/CD

Integrasikan workflow di atas ke pipeline GitHub Actions:

name: UI Test
on: [push]
jobs:
  ui-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Trigger n8n
        run: |
          curl -X POST https://n8n.example.com/webhook/xyz \
            -H 'Content-Type: application/json' \
            -d '{"user_story":"User can reset password via email"}'

Setelah workflow selesai, Slack channel #qa‑reports otomatis menampilkan hasil. Tim tidak perlu menulis satu baris kode Playwright lagi.

Strategi & Insight

  • Prompt‑as‑Code: treat prompt sebagai kode yang version‑controlled. Simpan di repo prompts/qa.yml dan gunakan n8n Execute Command untuk load secara dinamis.
  • Cache Script: tambahkan hash dari user_story; jika sudah pernah diuji, skip eksekusi dan pakai hasil cached (mengurangi biaya LLM).
  • Human‑in‑the‑Loop: tambahkan approval node sebelum execution. QA dapat review script di UI n8n dan approve dengan satu klik.
  • Scale dengan Queue: gunakan n8n Queue Mode + Redis untuk handle ratusan push sekaligus tanpa overload Docker runner.

Penutup & Call to Action

Dengan AI Agent + n8n, Anda mengubah proses QA dari hard‑coded menjadi self‑generating. Coba buat webhook sederhana di akun n8n Anda, hubungkan ke OpenAI, dan lihat hasilnya dalam 5 menit. Jika sudah nyaman, integrasikan ke CI/CD dan rasakan kecepatan build‑test‑deploy yang sebenarnya.

🚀 Challenge: Bangun workflow yang meng‑generate UI test untuk tiga fitur sekaligus, cache hasil, dan kirim laporan mingguan ke tim. Share hasilnya di komunitas JIPRAKS Classroom!

Artikel terkait