Cross Browser Testing using Playwright

Cross-browser testing ensures that web applications function smoothly across different browsers. Playwright, a powerful automation framework, simplifies this process by enabling you to write tests that run across multiple browsers (Chrome, Firefox, and WebKit) with a single codebase. It offers fast, reliable, and efficient testing, supporting features like parallel test execution, headless mode, and browser context isolation.

This article dives into how Playwright can streamline cross-browser testing and help developers achieve consistent performance across diverse web environments.

What is Playwright?

Playwright is a web test automation library that tests against the underlying engine for the foremost popular browsers: Chromium for Chrome and Edge, Webkit for Safari, and Gecko for Firefox. Test scripts are often written in JavaScript, Python, C#, and Go. Playwright leverages the DevTools protocol.

Key Features of Playwright

The most powerful argument for using Playwright is the new features that it introduces. Because Playwright can see into and control the browser instead of counting on a middle translation layer, it allows for the simulation of more insightful and relevant user scenarios. We’ll explore some of these key features below.

• Auto-Waits: instead of managing the waiting-through code in test scripts, Playwright does various actionability checks on elements before performing certain actions. This makes the tests more reliable and easier to take care of.
• Network Control: Test scripts can vary conditions for the application under test by simulating file uploads and downloads, handling various authentication methods, intercepting network requests, and mocking out request responses.
• Browser Contexts: Browser contexts also allow the simulation of incognito sessions as multi-page scenarios. This permits testing persistent sessions between tabs and ensuring the website can function in incognito mode.
• Permissions: Permissions like notifications and geolocation are often enabled and simulated; user settings like the color scheme are changed to the dark mode or print.
• Browser Support: Currently, Playwright supports Chromium, Firefox, and Web Toolkit (Safari)
• CI/CD Integration: CI/CD integration is merely like several other testing frameworks it runs smoothly there further.

Few Novel Features of Playwright Automation

Here are some of the key features of Playwright Automation

• Multi-Language Support: Playwright Supports JavaScript, C#, Java, and Python programming languages. You’re not restricted to one language.
• CodeGen: you’ll be able to record your tests with Playwright Code Gen. Once you start with CodeGen it’ll generate a tests script for you.
• Testing Safari on Windows: After installing Playwright Framework, it’ll also install a collection of browsers like Chrome, Firefox, Webkit, etc. The Webkit browser is an open-source version of Safari, you’ll run the Webkit browser on a windows machine, which implies you’re testing Safari features on a windows machine.
• Emulate Devices: Emulate devices and run your tests using a single command with Playwright.
• Generate PDF: Generate PDF using Playwright, which is often a novel feature compared to a different framework.
• Test Retries: Specify the number of retries for your tests; this can be a typical feature, though Playwright is additionally providing.
• Allure Report: Playwright provides an Allure Report Integration feature, which many are trying to find.

Rather than restricting, Playwright gives users more features, representing Playwright as a singular framework. It aggressively delivers features and fixes issues, so we cannot stop expecting more features.

Getting Started with Playwright Setup for Cross Browser Testing

In this tutorial for cross-browser testing using Playwright, we’ll go step-by-step to set up Playwright with Python straightforwardly.

Pre-Requisites

• Install any suitable IDE for Python.
• Install Python3:  Download Python3 and install it.

How to Install and run Playwright Test Script

• Step 1 – Create a new Python Package Playwright_python.
• Step 2 – Add a new virtual environment using virtualenv.
• Step 3 – Install the playwright plugin using pip.

pip install playwright

• Step 4 – Install Browsers binaries using Playwright CLI.

playwright install

• Step 5 – Create python test script test_bsdemo.py

Let’s add some steps inside our test script test_bsdemo.py.

Scenario:

1. Navigate to https://bstackdemo.com/
2. Click on Add to cart button.
3. Click on the Checkout button.
4. Enter username.
5. Enter Password.
6. Click Login Button.
7. Verify added item in the cart.

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
page = browser.new_page()
page.goto("https://bstackdemo.com/")
page.click("div[id='1'] div[class='shelf-item__buy-btn']")
page.click(".buy-btn")
page.type("#react-select-2-input", "demouser\n")
page.type("#react-select-3-input", "testingisfun99\n")
page.click("#login-btn")
page.is_visible("//h5[normalize-space()='iPhone 12']")
browser.close()

• Step 6 – Running your test case

To run our test script we can run this as a usual python script.

python test_bsdemo.py

• Step 7 – Checking the results

Once our script runs entirely and without any error means, there is no failure.

Running Test Scripts on Multiple Browsers

Playwright supports all modern browsers like Chrome, Firefox, Safari, WebKit, etc. We need to install their specific binaries using

playwright install

We need to change the browser name in our code to run our test script in the specific browser.

browser = p.firefox.launch()

Why is Cross-Browser Testing Needed?

Cross-browser automation testing has many advantages. It allows you to test your web application on multiple browsers simultaneously and provides instant feedback. In addition, cross-browser testing helps ensure your application works consistently across different browsers and operating systems.

The users use multiple versions of every browser at every time. Testing every available browser version with the different OS on our local machines is very difficult. The best way to do it is by running your automation test on a grid with all browsers with different versions and multiple OS platforms.

Must-Read: Playwright vs Selenium: A Comparison

Cross Browser Testing with Playwright on BrowserStack

You can efficiently run your Playwright test scripts on BrowserStack by specifying any browser with a combination of multiple OS. Your teams get the out-of-the-box capabilities such as:

• Cross-browser Testing support
• High-scale parallelization
• Seamless CI/CD integration with tools like Jenkins, Azure Pipelines, and GitHub
• Easy Debugging
• Testing on Real Devices

Here is an example of running our test script on BrowserStack. You can find the additional details here and on this Github repo.

import json
import urllib
import subprocess
from playwright.sync_api import sync_playwright

desired_cap = {
'browser': 'chrome', # allowed browsers are `chrome`, `edge`, `playwright-chromium`, `playwright-firefox` and `playwright-webkit`
'browser_version': 'latest', # this capability is valid only for branded `chrome` and `edge` browsers and you can specify any browser version like `latest`, `latest-beta`, `latest-1` and so on.
'os': 'osx',
'os_version': 'catalina',
'name': 'Branded Google Chrome on Catalina',
'build': 'playwright-python-1',
'browserstack.username': 'BROWSERSTACK_USERNAME',
'browserstack.accessKey': 'BROWSERSTACK_ACCESS_KEY'
}

def run_session(playwright):
clientPlaywrightVersion = str(subprocess.getoutput('playwright --version')).strip().split(" ")[1]
desired_cap['client.playwrightVersion'] = clientPlaywrightVersion

cdpUrl = 'wss://cdp.browserstack.com/playwright?caps=' + urllib.parse.quote(json.dumps(desired_cap))
browser = playwright.chromium.connect(cdpUrl)
page = browser.new_page()
try:
page.goto("https://bstackdemo.com/")
page.click("div[id='1'] div[class='shelf-item__buy-btn']")
page.click(".buy-btn")
page.type("#react-select-2-input", "demouser\n")
page.type("#react-select-3-input", "testingisfun99\n")
page.click("#login-btn")
if page.is_visible("//h5[normalize-space()='iPhone 12']"):
# following line of code is responsible for marking the status of the test on BrowserStack as 'passed'. You can use this code in your after hook after each test
mark_test_status("passed", "Item matched", page)
else:
mark_test_status("failed", "Item did not match", page)
except Exception as err:
mark_test_status("failed", str(err), page)

browser.close()

def mark_test_status(status, reason, page):
page.evaluate("_ => {}", "browserstack_executor: {\"action\": \"setSessionStatus\", \"arguments\": {\"status\":\""+ status + "\", \"reason\": \"" + reason + "\"}}")

with sync_playwright() as playwright:
run_session(playwright)

Using the above, we can test scripts on BrowserStack with different sets of browsers on different OS.

To summarize,

Even though Playwright is a new tool compared to Selenium, it solves some major problems faced in its architecture. It supports multiple languages, which gives an upper hand compared to Cypress and Puppeteer. It has robust support with BrowserStack for cross-browser testing. Here’s what makes cross-browser testing using Playwright a breeze:

• BrowserStack’s Real Device Cloud provides 3000+ real browsers and devices for an instant, on-demand testing.
• Access a cloud Selenium grid for automated testing, which can be accelerated by 10X with parallel testing.
• Securely test websites hosted on local machines, dev, or staging environments.
• Easy Playwright debugging with video recordings, logs, and test reporting features.

With BrowserStack infrastructure, focus on testing with zero setups and maintenance on BrowserStack.

Run Playright on BrowserStack Automate