Playwright Cli

Playwright CLI is a community skill for browser automation and testing using the Playwright framework, covering page navigation, element interaction, screenshot capture, network interception, and end-to-end test authoring for web application testing.

What Is This?

Overview

Playwright CLI provides patterns for automating browser interactions and writing end-to-end tests for web applications. It covers multi-browser launching with Chromium, Firefox, and WebKit for cross-browser testing, page navigation and element selection using CSS, XPath, and text-based locators, form filling, clicking, and keyboard input for simulating user interactions, network request interception for mocking API responses during tests, and screenshot and video recording for visual regression testing and debugging. The skill enables QA engineers and developers to write reliable browser tests that verify application behavior across browsers with built-in auto-waiting and retry logic.

Who Should Use This

This skill serves QA engineers writing end-to-end tests for web applications across multiple browsers, developers automating browser workflows like form submission and data extraction, and teams implementing visual regression testing in CI pipelines.

Why Use It?

Problems It Solves

Browser tests are often flaky because elements load asynchronously and selectors may not match immediately. Testing across Chromium, Firefox, and WebKit requires maintaining separate test configurations. Mocking backend API responses during tests needs network layer interception capabilities. Debugging test failures requires visual evidence of what the browser displayed at each step.

Core Highlights

Auto-wait mechanism retries element interactions until elements are visible and actionable. Multi-browser support runs tests on Chromium, Firefox, and WebKit from a single API. Network interception mocks API responses without modifying application code. Trace viewer records browser actions for post-failure debugging with timeline playback.

How to Use It?

Basic Usage

from playwright.sync_api import sync_playwright

def run_test():
    with sync_playwright() as p:
        browser = p.chromium.launch(
            headless=True)
        page = browser.new_page()
        page.goto("https://example.com")
        print(f"Title: {page.title()}")

        page.fill("#search",
                  "playwright testing")
        page.click("button[type=submit]")
        page.wait_for_selector(
            ".results")

        results = page.query_selector_all(
            ".result-item")
        print(f"Results: {len(results)}")

        page.screenshot(
            path="screenshot.png")
        browser.close()

run_test()

Real-World Examples

from playwright.sync_api import (
    sync_playwright, expect)
import json

class E2ETestRunner:
    def __init__(self, base_url: str):
        self.base_url = base_url
        self.pw = sync_playwright().start()
        self.browser = self.pw.chromium\
            .launch(headless=True)

    def test_login_flow(self) -> dict:
        page = self.browser.new_page()
        page.goto(
            f"{self.base_url}/login")
        page.fill(
            "input[name=email]",
            "user@example.com")
        page.fill(
            "input[name=password]",
            "password123")
        page.click(
            "button[type=submit]")
        page.wait_for_url(
            "**/dashboard")
        title = page.title()
        page.close()
        return {"test": "login",
                "passed": "Dashboard"
                    in title}

    def test_with_mock_api(
            self, endpoint: str,
            mock_data: dict) -> dict:
        page = self.browser.new_page()
        page.route(
            f"**{endpoint}",
            lambda route: route.fulfill(
                status=200,
                content_type=(
                    "application/json"),
                body=json.dumps(
                    mock_data)))
        page.goto(self.base_url)
        content = page.text_content(
            "[data-testid=content]")
        page.close()
        return {"test": "mock_api",
                "content": content}

    def close(self):
        self.browser.close()
        self.pw.stop()

runner = E2ETestRunner(
    "https://app.example.com")
result = runner.test_login_flow()
print(f"Login test: {result['passed']}")
runner.close()

Advanced Tips

Use Playwright test generator with codegen to record browser interactions and produce test scripts automatically. Enable tracing in CI to capture timeline recordings that include screenshots, network requests, and console logs for debugging failures. Use page.route to intercept and mock API calls during tests without setting up a separate mock server.

When to Use It?

Use Cases

Build a cross-browser test suite that validates critical user flows like login, checkout, and form submission. Create a visual regression system that compares screenshots across deployments to detect unintended UI changes. Implement a web scraping pipeline that handles JavaScript-rendered pages with dynamic content loading.

Related Topics

Browser automation, end-to-end testing, cross-browser testing, visual regression, and web scraping.

Important Notes

Requirements

Python with the playwright package installed. Browser binaries installed via playwright install command. Node.js runtime for the Playwright server that drives browser instances.

Usage Recommendations

Do: use data-testid attributes for element selection to create stable selectors that survive UI refactoring. Run tests in parallel across browsers to reduce overall test suite execution time. Enable trace recording in CI environments for debugging test failures.

Don't: rely on CSS class names or element positions for selectors that break when styles change. Add arbitrary sleep calls instead of using Playwright built-in auto-wait mechanisms. Run browser tests with headed mode in CI environments where no display server is available.

Limitations

Browser tests are inherently slower than unit tests and should focus on critical user flows rather than exhaustive coverage. Network interception only works for requests made by the page context and does not affect service worker requests by default. Running many browser instances in parallel requires sufficient memory and CPU resources on the test machine.