Cross‑Browser Testing, Browser Configuration, Visual Regression, and Mobile Emulation with Playwright

Introduction With the evolution of web technologies, users access sites from a variety of browsers and devices, making cross‑browser testing essential for a consistent user experience. Playwright simplifies this process by allowing the same test cases to run across Chromium, Firefox, and WebKit, and also supports visual regression testing and mobile device emulation.

1. Running the Same Test Case Across Different Browsers Playwright supports Chromium (Chrome, Edge), Firefox, and WebKit (Safari) under a single API. The following Python code demonstrates how to launch each browser and execute the same test steps:

from playwright.sync_api import sync_playwright

def run_on_browser(playwright, browser_type):
    browser = getattr(playwright, browser_type).launch(headless=False)
    page = browser.new_page()
    page.goto("https://example.com")
    print(f"{browser_type.capitalize()} Title: {page.title()}")
    browser.close()

def run(playwright):
    for browser_type in ["chromium", "firefox", "webkit"]:
        run_on_browser(playwright, browser_type)

with sync_playwright() as playwright:
    run(playwright)

This script runs the same navigation and title‑printing logic on Chromium, Firefox, and WebKit.

2. Browser Settings and Option Configuration Specific test scenarios may require custom browser settings such as viewport size or a custom user‑agent. The example below shows how to launch Chromium with a defined viewport and user‑agent, and how to ignore HTTPS errors when needed:

browser = playwright.chromium.launch(headless=False)
context = browser.new_context(
    viewport={"width": 1280, "height": 720},
    user_agent="Custom User Agent"
)
page = context.new_page()
page.goto("https://example.com")
# Example of ignoring HTTPS errors:
# context = browser.new_context(ignore_https_errors=True)

3. Introduction to Visual Regression Testing Visual regression testing captures screenshots of a page and compares them against baseline images to detect unintended UI changes. Playwright can take screenshots, while image‑comparison can be performed with libraries such as Pillow:

def run_visual_test(page):
    page.goto("https://example.com")
    # Save current page screenshot as baseline
    page.screenshot(path="baseline.png")
    # Modify page then screenshot and compare
    page.click('button.change-theme')
    new_screenshot = page.screenshot()
    # Use Pillow for image comparison
    from PIL import ImageChops, Image
    import io
    baseline_img = Image.open("baseline.png")
    diff = ImageChops.difference(baseline_img, Image.open(io.BytesIO(new_screenshot)))
    if diff.getbbox():
        print("Visual changes detected!")
    else:
        print("No visual changes.")

Playwright itself does not provide built‑in visual diffing, so integrating a third‑party image library is necessary.

4. Mobile Device Emulation To verify responsive designs, Playwright can emulate mobile devices by setting viewport dimensions, enabling touch, and flagging the context as mobile. The following code emulates an iPhone X:

browser = playwright.chromium.launch(headless=False)
context = browser.new_context(
    viewport={"width": 375, "height": 812},  # iPhone X size
    is_mobile=True,
    has_touch=True
)
page = context.new_page()
page.goto("https://example.com")
print("Mobile emulation complete.")

Conclusion By following this guide you should now be able to run identical test cases across major browsers, customize browser launch options, perform basic visual regression checks, and emulate mobile devices with Playwright. These techniques help ensure that web applications deliver a consistent and high‑quality experience on a wide range of platforms.