Mastering Web Automation with Playwright: A Guide with Practical Examples

Playwright is an open-source automation tool developed by Microsoft for testing web applications across different browsers. Designed with modern web technologies in mind, Playwright enables developers to write tests in JavaScript, TypeScript, Python, C#, and Java. It supports testing in Chromium, Firefox, and WebKit, making it a versatile tool for ensuring web application functionality across multiple browsers and platforms.

Key Features of Playwright

- Cross-Browser Support: Playwright provides a single API to automate Chromium (Google Chrome and Microsoft Edge), Firefox, and WebKit (Safari) browsers, making cross-browser testing more straightforward.

- Headless and Headed Modes: Tests can be run in a headless mode (without a GUI) for faster execution or in a headed mode for debugging.

- Multiple Languages Support: Offers APIs in JavaScript, TypeScript, Python, C#, and Java, catering to a wide range of developers.

- Auto-Wait: Automatically waits for elements to be ready before executing actions, reducing flakiness and the need for manual waits or sleeps in tests.

- Network Interception: Allows intercepting and modifying network requests and responses, enabling testing of offline scenarios, speed throttling, and more.

- Built-in Test Runner: Comes with its test runner, which supports parallel test execution, sharding, and test retries.

Examples of Playwright in Action

Example 1: Opening a Page and Taking a Screenshot

const { chromium } = require('playwright');

(async () => {

  const browser = await chromium.launch();

  const page = await browser.newPage();

  await page.goto('https://example.com');

  await page.screenshot({ path: 'example.png' });

  await browser.close();

})();        

This example demonstrates opening a Chromium browser, navigating to "https://example.com", taking a screenshot of the webpage, and then closing the browser.

Example 2: Testing a Login Form

from playwright.sync_api import sync_playwright

def run(playwright):

    browser = playwright.chromium.launch()

    page = browser.new_page()

    page.goto('https://example.com/login')

    page.fill('input[name="username"]', 'user123')

    page.fill('input[name="password"]', 'password')

    page.click('text="Log in"')

    assert page.url == 'https://example.com/dashboard'

    browser.close()

with sync_playwright() as playwright:

    run(playwright)        

This Python example automates testing a login form by navigating to the login page, filling in the username and password fields, clicking the login button, and asserting that the page redirects to the dashboard.

Example 3: Intercepting and Modifying Network Requests

const { webkit } = require('playwright');

(async () => {

  const browser = await webkit.launch();

  const page = await browser.newPage();

  // Intercept network requests

  await page.route('**/*', route => {

    // Modify the request header

    const headers = Object.assign({}, route.request().headers(), {

      'X-Custom-Header': 'Playwright'

    });

    route.continue({ headers });

  });

  await page.goto('https://example.com');

  await browser.close();

})();        

In this example, a WebKit browser instance intercepts all network requests made by the page, adds a custom header to each request, and then proceeds to navigate to "https://example.com".

Conclusion

Playwright is a powerful tool for web application testing, providing comprehensive features for cross-browser testing, automation, and debugging. With support for multiple programming languages and a plethora of features to simulate real-world user interactions, Playwright enables developers and testers to create robust, reliable tests, improving the quality and performance of web applications. Whether you're testing a simple web page or a complex web application, Playwright offers the tools and flexibility needed to ensure your application works seamlessly across all major browsers and platforms.