Testing Responsive Designs with Playwright in Python

Responsive design testing is crucial for modern web development. It ensures that your websites look and function properly across a wide range of devices, from mobile phones to large monitors. One powerful tool for testing responsive design is Playwright, a Node library that provides a high-level API to automate browsers through the use of Chromium, Firefox, and WebKit. In this article, we will explore how to use Playwright with Python to test responsive designs efficiently.

Setting Up Your Environment

Before diving into code, it's important to ensure your environment is properly set up. Start by installing Playwright’s Python package:

pip install playwright

Once installed, you’ll need to download the browser binaries:

import playwright
playwright = playwright.sync_playwright().start()
playwright.chromium.install()

Creating Your First Responsive Test

Let's begin by opening a webpage and testing various viewport sizes. First, import the required modules and set up your Playwright instance:

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()

Next, navigate to the page you want to test. For example, here's how you can open the Playwright homepage:

page.goto("https://playwright.dev")

Testing Different Viewports

To simulate different devices, set the viewport to corresponding dimensions. Here's how you can test for a mobile device:

# iPhone 12 dimensions
page.set_viewport_size({"width": 390, "height": 844})
# Interact with the page here

After setting the viewport, perform any interactions or checks needed for your tests.

Automating Responsive Testing

Next, automate the process to run your responsive tests for multiple devices. Define a list of common device viewports:

devices = [
    {"name": "Desktop", "width": 1920, "height": 1080},
    {"name": "Tablet", "width": 768, "height": 1024},
    {"name": "Mobile", "width": 390, "height": 844}
]

Iterate through each device, setting the viewport and running your test logic:

for device in devices:
    page.set_viewport_size({"width": device["width"], "height": device["height"]})
    page.goto("https://example.com")
    # Example of an automated test step
    print(f"Testing on {device['name']}...")
    assert "Example Domain" in page.title()

Taking Screenshots for Visual Regression Tests

Screenshots are invaluable for visual regression testing, helping to spot layout issues. Playwright makes capturing screenshots simple:

for device in devices:
    page.set_viewport_size({"width": device["width"], "height": device["height"]})
    page.goto("https://example.com")
    page.screenshot(path=f"screenshot_{device['name']}.png")

These screenshots can then be compared with baselines to detect unexpected changes in design.

Advanced Responsive Testing Features

For more advanced testing scenarios, consider using CSS media queries and JavaScript console methods to simulate conditions that may trigger responsive behaviors:

page.evaluate("matchMedia('(max-width: 600px)').matches")

You can then verify that the page responds appropriately to these queries.

Conclusion

Responsive design testing using Playwright in Python allows for automated, repeatable checks across diverse device setups, ensuring your application not only works but looks as expected on any device format. This simple guide will get you started on ensuring that your web applications deliver a consistent user experience, regardless of the viewing environment.