AI Class

Membangun RPA Berbasis AI dengan n8n: Orkestrasi Playwright/Puppeteer + Vision untuk Automasi UI Tahan Banting

· 8 menit baca

Membangun RPA Berbasis AI dengan n8n: Orkestrasi Playwright/Puppeteer + Vision untuk Automasi UI Tahan Banting

Ringkas: Artikel ini membahas cara membangun Robotic Process Automation (RPA) berbasis AI dengan n8n yang mengorkestrasi Playwright/Puppeteer dan modul Computer Vision (OCR, template matching, hingga multimodal LLM). Hasilnya adalah automasi UI yang lebih tangguh daripada sekadar selektor statis (XPath/CSS), lengkap dengan strategi fallback, observability, dan best practice keamanan.

Mengapa RPA Berbasis AI di Atas n8n?

Banyak proses bisnis masih bertumpu pada antarmuka UI web/desktop yang tidak menyediakan API resmi atau akses integrasi memadai. Di titik inilah RPA menjadi penyelamat: robot meniru interaksi manusia—membuka halaman, mengetik, mengklik, mengunduh file—untuk menyelesaikan pekerjaan. Namun, RPA tradisional kerap rapuh: perubahan kecil pada DOM, teks tombol, atau tata letak dapat mematahkan automasi.

Dengan n8n sebagai orkestrator dan AI (Computer Vision + LLM) sebagai otak pencari konteks UI, Anda dapat membangun automasi yang:

  • Tahan perubahan UI: tidak bergantung penuh pada XPath/CSS; gunakan OCR, template matching, dan captioning.
  • Lebih adaptif: ketika elemen sulit ditemukan, AI memberi alternatif (mis. cari tombol dengan ikon keranjang).
  • Terukur & terkelola: n8n memberi logging, retry, branching, persetujuan manusia (human-in-the-loop), serta integrasi multi-channel (Slack, Email, WhatsApp).

Arsitektur Solusi: Komponen & Alur

Desain referensi berikut memisahkan orkestrasi, eksekusi UI, dan visi komputer agar fleksibel dan mudah di-maintain:

  • n8n Orchestrator: workflow, state, retry, SLA, dan notifikasi. Memecah tujuan bisnis menjadi langkah-langkah RPA.
  • RPA Worker (Node.js/TypeScript dengan Playwright atau Puppeteer, bisa juga Python Playwright): menjalankan aksi UI—open page, click, type, wait, screenshot, download.
  • Vision Service (Python/Node): OCR (Tesseract/PaddleOCR), template matching (OpenCV), object detection/elements, serta opsional multimodal LLM untuk grounding elemen berdasarkan screenshot + instruksi.
  • Storage & Observability: simpan screenshot, video, dan log (S3/MinIO + ELK/ClickHouse/Grafana).
  • Secrets & Policy: kredensial di n8n Credentials, kebijakan akses, masking PII.

Alur tinggi: n8n menerima perintah (mis. “buat lead di CRM”), memecahnya menjadi langkah aksi. Untuk setiap langkah, n8n memanggil RPA Worker. Jika elemen tidak ditemukan, n8n meminta bantuan Vision Service/LLM, lalu mencoba ulang dengan strategi fallback. Jika tetap gagal, lakukan eskalasi human-in-the-loop via Slack dengan screenshot.

Prasyarat Teknis

  • n8n v1.x atau terbaru, self-hosted (Docker) atau cloud.
  • Node.js 18+ dan/atau Python 3.10+.
  • Playwright/Puppeteer terpasang di RPA Worker (headless disarankan).
  • Tesseract/PaddleOCR + OpenCV untuk Vision Service.
  • Opsi multimodal LLM (mis. OpenAI GPT-4o mini, Gemini, atau LLaVA lokal) untuk deteksi kontekstual.

Menyiapkan RPA Worker (Playwright)

Contoh minimal RPA Worker berbasis Playwright (Node.js). Worker ini menyediakan endpoint HTTP yang dipanggil n8n:

// server.js (Node.js + Express + Playwright)
import express from 'express'
import { chromium } from 'playwright'

const app = express()
app.use(express.json())

let browser
let context
let page

async function ensurePage() {
  if (!browser) browser = await chromium.launch({ headless: true })
  if (!context) context = await browser.newContext({
    viewport: { width: 1366, height: 768 },
    recordVideo: { dir: 'videos' }
  })
  if (!page) page = await context.newPage()
}

app.post('/open', async (req, res) => {
  await ensurePage()
  const { url } = req.body
  await page.goto(url, { waitUntil: 'networkidle' })
  res.json({ ok: true })
})

app.post('/type', async (req, res) => {
  await ensurePage()
  const { selector, text } = req.body
  await page.fill(selector, text)
  res.json({ ok: true })
})

app.post('/click', async (req, res) => {
  await ensurePage()
  const { selector } = req.body
  await page.click(selector)
  res.json({ ok: true })
})

app.post('/screenshot', async (req, res) => {
  await ensurePage()
  const path = `shots/${Date.now()}.png`
  await page.screenshot({ path, fullPage: true })
  res.json({ ok: true, path })
})

app.listen(8080, () => console.log('RPA Worker on 8080'))

Di produksi, tambahkan auth token, rate limiting, isolasi per-job (satu context per eksekusi), serta pembersihan sumber daya setelah selesai.

Menyiapkan Vision Service

Vision Service bertugas mencari elemen saat selektor gagal. Ia bisa menggunakan OCR untuk menemukan teks tombol, atau template matching untuk ikon. Contoh minimal (Python + FastAPI):

# vision.py (FastAPI + Tesseract + OpenCV)
from fastapi import FastAPI
from pydantic import BaseModel
import cv2, pytesseract

app = FastAPI()

class FindRequest(BaseModel):
    image_path: str
    query: str  # contoh: "Cari tombol 'Kirim'"

@app.post('/find')
async def find(req: FindRequest):
    img = cv2.imread(req.image_path)
    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
    text = pytesseract.image_to_data(gray, output_type=pytesseract.Output.DICT)
    # Cari kemunculan kata dari query sederhana
    tokens = req.query.lower().replace("'", "").split()
    matches = []
    for i, w in enumerate(text['text']):
        if w.lower() in tokens:
            x, y, w_, h_ = text['left'][i], text['top'][i], text['width'][i], text['height'][i]
            matches.append({ 'x': x, 'y': y, 'w': w_, 'h': h_ })
    # Kembalikan bounding box paling besar sebagai kandidat
    if matches:
        m = max(matches, key=lambda b: b['w']*b['h'])
        return { 'found': True, 'bbox': m }
    return { 'found': False }

Dengan multimodal LLM, Anda dapat mengirim screenshot + instruksi (mis. “klik tombol tambahkan ke keranjang”) dan menerima koordinat/label elemen. Ini meningkatkan robustnes pada UI dinamis atau multi-bahasa.

Membangun Workflow n8n: Orkestrasi Langkah RPA

Struktur workflow umum:

  1. Trigger: Webhook, Schedule, atau event (mis. ada tiket baru).
  2. Task Planner (opsional, AI): Ubah tujuan (goal) menjadi langkah-langkah UI (open → login → cari menu → isi form → submit).
  3. Executor Loop: Untuk setiap langkah, panggil RPA Worker. Jika gagal menemukan selektor, minta bantuan Vision Service dan ulangi.
  4. Observability: Screenshot setiap fase, logging, dan upload ke storage.
  5. Human-in-the-loop: Jika dua kali gagal, kirim screenshot ke Slack/Email untuk review dan persetujuan manual.
  6. Cleanup: Tutup page/context, arsipkan log, kirim ringkasan.

Contoh pola fallback di n8n (pseudocode logika):

// Node Function (pseudocode)
try {
  await callRPA('/click', { selector: "text=Kirim" })
} catch (e) {
  const shot = await callRPA('/screenshot')
  const vision = await callVision('/find', { image_path: shot.path, query: "tombol Kirim" })
  if (vision.found) {
    await callRPA('/clickByCoord', { x: vision.bbox.x + vision.bbox.w/2, y: vision.bbox.y + vision.bbox.h/2 })
  } else {
    await notifySlack("Gagal menemukan tombol Kirim", shot.path)
    throw e
  }
}

Contoh Kasus Nyata

  • Entri data ke aplikasi lama: Tidak ada API, UI sering berubah. OCR membantu menemukan label field, LLM memetakan nama field → posisi.
  • Download laporan periodik: Login, navigasi, pilih rentang tanggal, klik unduh. Tangani dialog unduhan Playwright dan arsipkan file.
  • Sinkronisasi CRM vs portal mitra: Baca tiket baru dari CRM via API, lalu buat data padanan di portal mitra yang hanya punya UI.

Desain DSL Aksi (Opsional)

Agar fleksibel, definisikan DSL JSON untuk instruksi RPA yang bisa dibangkitkan AI:

{
  "goal": "Buat lead baru di CRM",
  "steps": [
    { "action": "open", "url": "https://crm.example.com" },
    { "action": "type", "selector": "#email", "text": "user@example.com" },
    { "action": "type", "selector": "#password", "text": "••••••" },
    { "action": "click", "selector": "text=Masuk", "fallback": { "query": "tombol Masuk" } },
    { "action": "click", "selector": "text=Tambah Lead", "fallback": { "query": "Tambah Lead" } },
    { "action": "type", "selector": "[name=nama]", "text": "Budi" },
    { "action": "type", "selector": "[name=email]", "text": "budi@example.com" },
    { "action": "click", "selector": "text=Simpan", "fallback": { "query": "Simpan" } }
  ]
}

n8n membaca DSL ini, menjalankan langkah berurutan, dan menerapkan fallback saat selektor gagal.

Strategi Ketahanan: Fallback Berlapis

  1. Selektor semantik Playwright: getByRole, getByLabel, getByText (lebih stabil daripada CSS/XPath).
  2. Heuristik teks: Cari teks terdekat + jarak spasial dengan label (OCR).
  3. Template matching: Cocokkan ikon/shape (OpenCV) dengan toleransi.
  4. Multimodal LLM: Kirim screenshot + instruksi, terima koordinat/penanda.
  5. Human-in-the-loop: Quick approve/annotate via Slack, simpan anotasi untuk run selanjutnya.

Observability & QA

  • Screenshot per langkah dan video session untuk audit trail.
  • Visual diff: bandingkan screenshot sekarang vs baseline; jika perbedaan di atas ambang, lakukan canary run dulu.
  • Metrics: durasi langkah, rasio fallback, tingkat kegagalan per halaman.
  • Playbooks per error: timeouts, 2FA, pop-up cookie, reCAPTCHA (minta manusia).

Skalabilitas & Kinerja

  • Isolasi per eksekusi: satu konteks browser per job untuk keamanan dan kebersihan state.
  • Headless + GPU opsional untuk CV/LLM agar cepat.
  • Batasan concurrency di n8n Queue Mode + autoscaling RPA Worker (Kubernetes/Nomad).
  • Optimasi Playwright: matikan gambar/video jika tak perlu, atur idle timeout, cache login/cookies jika aman.

Keamanan & Kepatuhan

  • Secrets di n8n Credentials (bukan dalam node Function/plain text).
  • Masking PII pada log/screenshot; gunakan redaksi otomatis (blur area sensitif).
  • Network allowlist untuk RPA Worker/Vision Service; gunakan mTLS/JWT.
  • Sandboxing: jalankan browser dengan user terpisah/namespace; pertimbangkan gVisor/Firejail.
  • Legal & ToS: pastikan automasi UI mematuhi ketentuan layanan, robots, dan perizinan internal.

Contoh Workflow di n8n (Ringkas)

  1. Webhook menerima payload: { goal: "download faktur bulan ini" }.
  2. LLM (Optional) → generate DSL langkah.
  3. HTTP Request Node → POST /open (RPA Worker) dengan URL target.
  4. For Each langkah → try click dengan selektor; jika error → take screenshot, kirim ke Vision. Jika Vision sukses → clickByCoord; jika gagal → send Slack + stop/resume.
  5. Finalize → kompres artefak, unggah ke S3, kirim laporan.

Tips Praktik Terbaik

  • Gunakan selector semantik Playwright terlebih dahulu, baru fallback ke Vision.
  • Desain idempotensi: cek apakah data sudah ada sebelum membuat ulang.
  • Kelola waktu: gunakan waitForLoadState('networkidle') dan auto-wait Playwright.
  • Sediakan “Pause/Resume” via n8n untuk intervensi manual.
  • Versi-kan DSL & anotasi agar perubahan UI bisa diikuti secara terkontrol.

FAQ

1) Apa bedanya automasi RPA vs automasi API?
Automasi API berinteraksi langsung dengan endpoint resmi—lebih cepat, andal, dan aman. RPA meniru interaksi manusia pada UI. Gunakan RPA ketika API tidak tersedia atau aksesnya terbatas.

2) Kapan memakai Vision vs XPath/CSS?
Mulai dengan selektor semantik (role/label). Pakai Vision saat UI dinamis, bahasa berubah, atau elemen non-tekstual (ikon). Vision juga membantu ketika struktur DOM obfuscated.

3) Bisakah mengotomasi aplikasi desktop?
Bisa, dengan alat seperti Playwright untuk Electron atau pywinauto/AutoIt/RobotJS. Prinsip orchestration sama; Vision (OCR/OpenCV) membantu menemukan elemen non-HTML.

4) Bagaimana dengan CAPTCHA?
Ikuti kebijakan. Umumnya, lakukan human-in-the-loop untuk menyelesaikan CAPTCHA. Hindari solusi yang melanggar ToS.

5) Bagaimana menekan biaya?
Gunakan headless, cache session, batasi resolusi, kompres artefak, dan hanya aktifkan multimodal LLM saat fallback diperlukan.

Penutup

Menggabungkan n8n + Playwright/Puppeteer + Vision/LLM membuka era baru RPA yang lebih tahan banting, adaptif, dan terukur. Dengan orkestrasi yang tepat, fallback berlapis, dan observability menyeluruh, Anda bisa meng-otomasi proses yang tadinya mustahil tanpa API—sekaligus menjaga kualitas, keamanan, dan biaya.

Mulailah dari pilot kecil (mis. mengunduh laporan bulanan), ukur keberhasilan, perbaiki pipeline, lalu skala ke proses bernilai tinggi. Selamat membangun RPA berbasis AI Anda!

Artikel terkait