browser-automation-expert ยท diff
git:20260808.52c4c5f to git:20260813.bd123bf
20 added, 0 removed. Audit A to A.
---
name: browser-automation-expert
description: "Expert guide for autonomous browser automation, Playwright/Browser-Use web agent execution, visual E2E testing, and UI regression workflows / Panduan ahli otomatisasi browser otonom, Playwright/Browser-Use agent, dan pengujian visual E2E."
author: "Roedy Rustam"
---
# Browser Automation & Web Agent Expert
[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
---
<a name="english"></a>
## English
### Purpose & Overview
Production-grade guidelines for integrating autonomous browser automation, Playwright v1.48+, Browser-Use LLM web agents, visual regression testing, and automated end-to-end user flow execution.
### Key Capabilities
- **Playwright Automation**: Headless & headful browser control, multi-tab context isolation, locator strategies, auto-waiting, and network interception.
- **LLM Web Agents**: Browser-Use & Playwright MCP integration for AI-driven web tasks, dynamic element interaction, and autonomous page navigation.
- **Visual E2E & Regression**: Screenshot diffing, pixel-match assertions, video recording, and CI/CD artifact attachment.
```typescript
import { test, expect } from '@playwright/test';
test('Autonomous User Signup & Checkout Flow', async ({ page }) => {
await page.goto('https://app.example.com/signup');
await page.getByPlaceholder('Enter your email').fill('agent@example.com');
await page.getByRole('button', { name: 'Get Started' }).click();
await expect(page.getByText('Welcome to Dashboard')).toBeVisible();
});
```
+ ### Implementation Checklist
+ - [ ] Install Playwright (`npm init playwright@latest`) and configure required browsers.
+ - [ ] Set up the `playwright.config.ts` for parallel execution and retries.
+ - [ ] Use user-facing locators (e.g., `getByRole`, `getByText`) instead of unstable CSS/XPath selectors.
+ - [ ] Configure trace viewers and video recording for CI/CD pipeline failures.
+ - [ ] If building an LLM agent, pass the Playwright Page context to the Browser-Use MCP tool.
+
+ ## Orchestration & Integration
+ - Integrates with: `e2e-testing-expert`, `visual-qa-vision-agent`, `mcp-client-orchestrator`.
+
---
<a name="bahasa-indonesia"></a>
## Bahasa Indonesia
### Deskripsi
Panduan tingkat produksi untuk otomatisasi browser otonom, Playwright v1.48+, agen web LLM Browser-Use, pengujian visual regression, dan eksekusi alur pengguna E2E otomatis.
### Fitur Utama
- **Otomatisasi Playwright**: Kontrol browser headless/headful, isolasi konteks multi-tab, auto-waiting, dan intersepsi jaringan.
- **Agen Web LLM**: Integrasi Browser-Use & Playwright MCP untuk tugas web berbasis AI dan navigasi dinamis.
- **Visual E2E & Regresi**: Perbandingan screenshot, rekaman video, dan pengunggahan artefak di CI/CD.
+
+ ### Checklist Implementasi
+ - [ ] Instal Playwright (`npm init playwright@latest`) dan konfigurasi browser yang diperlukan.
+ - [ ] Atur `playwright.config.ts` untuk eksekusi paralel dan retries.
+ - [ ] Gunakan locator berbasis pengguna (misal: `getByRole`, `getByText`) sebagai pengganti selektor CSS/XPath yang tidak stabil.
+ - [ ] Konfigurasi trace viewer dan perekaman video untuk mendebug kegagalan di pipeline CI/CD.
+ - [ ] Jika membangun agen LLM, lewatkan konteks Playwright Page ke tool Browser-Use MCP.
+
+ ## Integrasi Orkestrasi
+ - Terintegrasi dengan: `e2e-testing-expert`, `visual-qa-vision-agent`, `mcp-client-orchestrator`.