Playwright

repository·main·Indexed 11 days ago

https://github.com/microsoft/playwright

A comprehensive framework for web automation and testing supporting Chromium, Firefox, and WebKit. It provides a high-level API for end-to-end testing via @playwright/test, programmatic browser scripting, and integration with AI agents through a CLI and Model Context Protocol (MCP) server. Features include browser isolation, auto-waiting, web-first assertions, and a Chrome extension for connecting AI assistants to existing browser sessions.

Tokens
388.8K
Snippets
1.4K
Records
1.7K
Agent score
99%

What's inside Playwright

  1. Overview of Playwright locators

    main
    While Playwright recommends using high-level locators like Page.getByRole and Page.getByText for most testing scenarios, it also supports a wide variety of other locator strategies including CSS selectors with advanced matching capabilities (text matching, visibility filtering, and relational selectors).
  2. Advantages of Playwright Test over Puppeteer

    main

    Playwright Test is the recommended first-party test runner for Playwright. It offers several 'super powers' compared to standard Puppeteer setups:

    • Zero-config TypeScript: Full support out of the box.
    • Cross-Engine/OS Testing: Run tests across all web engines (Chromium, Firefox, WebKit) on any major OS (Windows, macOS, Ubuntu).
    • Isolation & Parallelism: Run tests in isolation and in parallel across multiple browsers.
    • Advanced Features: Built-in support for multiple origins, iframes, tabs, and contexts.
    • Tooling Bundle: Includes the Playwright Inspector, Test Code Generation (codegen), and Playwright Tracing for post-mortem debugging.
    • Artifact Collection: Built-in recording of test artifacts.
  3. Use playwright-webkit for WebKit automation

    main

    The playwright-webkit package provides the WebKit browser engine implementation for Playwright.

    Note: If your goal is to write end-to-end tests, it is highly recommended to use @playwright/test instead of this package directly, as @playwright/test provides a comprehensive test runner and framework built on top of Playwright.

  4. Perform API testing with Playwright Python

    main

    Playwright allows you to interact directly with a REST API using the APIRequestContext class. This is useful for:

    • Testing your server's API directly.
    • Preparing server-side state (e.g., creating users or data) before running browser-based tests.
    • Validating server-side post-conditions after performing actions in the browser.

    These examples assume you are using the pytest-playwright package, which provides Playwright fixtures to the Pytest test runner.

  5. Choose a Playwright language and test runner

    main

    Playwright supports multiple programming languages that share the same underlying browser automation implementation. While all core features are available across all languages, the testing ecosystem and recommended runners vary:

    • JavaScript/TypeScript: Use the built-in Playwright Test runner for features like parallelization, screenshot assertions, HTML reporting, and automatic tracing.
    • Python: Use the Playwright Pytest plugin for context isolation and multi-browser configuration support.
    • Java: Compatible with standard frameworks like JUnit or TestNG.
    • .NET: Provides base classes for MSTest, NUnit, xUnit, and xUnit v3.
  6. Use playwright-chromium for Chromium automation

    main

    The playwright-chromium package provides the Chromium flavor of the Playwright library. It is intended for direct automation of Chromium-based browsers.

    Note: If your goal is to write end-to-end tests, it is highly recommended to use @playwright/test instead of this package, as it provides a more comprehensive testing framework.

  7. Use the playwright-firefox package

    main

    The playwright-firefox package provides the Firefox implementation of the Playwright library.

    Note: If your goal is to write end-to-end tests, it is highly recommended to use @playwright/test instead of using this package directly. @playwright/test provides a comprehensive test runner and framework built on top of Playwright's browser implementations.

  8. Use the no-browser flavor of Playwright via playwright-core

    main
    The playwright-core package provides the core Playwright API without including any browser binaries (Chromium, Firefox, or WebKit). This is intended for users who want to manage their own browser installations or connect to existing browser instances (e.g., via a remote WebSocket endpoint) to reduce package size and installation overhead.
  9. Explore Playwright Trace Viewer features

    main

    The Playwright Trace Viewer provides a comprehensive interface for debugging tests by visualizing actions, snapshots, and logs. Key features include:

    • Actions: View the locator used, duration, and visual DOM changes for every action. Selecting an action reveals its snapshots, log, and source code location.
    • Screenshots: A film strip of the test execution. Hovering over the film strip provides magnified views. You can double-click an action to see its specific time range or use the timeline slider to filter all logs (Console, Network, etc.) to a specific selection.
    • Snapshots: Complete DOM snapshots captured for each action. Depending on the action type, it captures Before (at call time), Action (at the moment of input/click), and After (after completion).
    • Source: Highlights the specific line of code in your test file corresponding to the selected action.
    • Call: Displays technical details of an action, such as duration, the locator used, strict mode status, and keys used.
    • Log: Shows internal Playwright operations (e.g., scrolling into view, waiting for stability, performing clicks/fills).
    • Errors: Displays error messages and highlights the failure point on the timeline and in the source code.
    • Console: Shows both browser and test console logs. You can filter these logs by selecting an action in the sidebar or by using the timeline slider.
    • Network: Displays all network requests. You can sort by status, method, type, etc., and inspect headers and bodies. Like the console, network logs can be filtered by action or timeline selection.
    • Metadata: Provides test context such as Browser type, viewport size, and total test duration.
    • Attachments: Allows viewing of test attachments. For visual regression testing, you can compare image diffs, actual images, and expected images using a slider.
  10. What is a Locator and how to use it

    main

    Locators are the central piece of Playwright's auto-waiting and retry-ability. They represent a way to find element(s) on the page at any moment. You can create a locator using the Page.locator method.

    Locators do not represent a single element at a specific point in time, but rather a way to find elements that Playwright will automatically wait for and retry against when performing actions.

  11. What is a Page and how to use it

    main

    A Page refers to a single tab or a popup window within a BrowserContext. You use it to navigate to URLs and interact with page content (e.g., filling inputs, clicking elements).

    Key operations:

    • Create a page: Use context.newPage().
    • Explicit navigation: Use page.goto(url) to navigate to a specific URL.
    • Implicit navigation: Trigger navigation by interacting with elements, such as page.locator(selector).click().
    • Get current URL: Use page.url() to retrieve the current URL of the page.
    // Create a page.
    const page = await context.newPage();
    
    // Navigate explicitly
    await page.goto('http://example.com');
    
    // Fill an input
    await page.locator('#search').fill('query');
    
    // Navigate implicitly by clicking a link
    await page.locator('#submit').click();
    
    // Get current url
    console.log(page.url());