Playwright E2E Testing: Say Goodbye to Manual Regression Testing

Manual testing is slow, error-prone, and doesn't scale. Here's how we set up Playwright at iDev.

Why Playwright Over Cypress/Selenium

• Tri-engine support: Chromium, Firefox, WebKit in one framework
• Auto-waiting: No manual sleep/wait calls needed
• Multi-page testing: Tabs, popups, iframes all supported
• Codegen recorder: Record interactions, auto-generate test code
• Speed: 3-5x faster than Selenium

What We Test

For our admin dashboard, core test cases include:

1. Login flow: Correct credentials -> verify Dashboard redirect
2. Create article: Fill title + content -> save -> verify in list
3. Edit article: Modify title -> save -> verify change
4. Delete article: Confirm delete -> verify removal from list
5. Pagination: Navigate pages -> verify data changes

CI Integration

Playwright runs in GitHub Actions on every PR:

• Tests must pass before merge is allowed
• Failed tests auto-capture screenshots of the failure state
• Test reports uploaded as artifacts

Best Practices We Follow

1. Independent test data: Clean up before each test to avoid cross-test interference
2. Selector strategy: Always use data-testid attributes, never CSS classes or XPath
3. Parallel execution: Multiple workers run tests simultaneously. 30 tests finish in 2 minutes
4. Visual regression: Playwright's screenshot comparison catches unintended UI changes
5. Retry on flake: Configure 1 retry for known flaky tests, but fix the root cause ASAP

Getting Started

The fastest path: install Playwright, run npx playwright codegen to record a test, then refine the generated code. You'll have your first E2E test running in under 10 minutes.

---

Small team, big output. iDev builds web apps, AI solutions and custom systems with startup speed and enterprise quality. Based in Malaysia, serving Southeast Asia. Free consultation.