Cross Browser Testing using Playwright

As web automation has become more common over the last decade, WebDriver has been the underlying protocol leveraged by tools like Selenium, Protractor, and WebdriverIO. Using this protocol, commands are sent from the test script to a driver that’s specific to the browser under test. WebDriver provided a revolution in web automation, but it has multiple downsides also.

•  The driver is a middleman who translates the commands from the test script and sends them to the browser for execution.  Thus, the test script and browser don’t seem to be directly conscious of one another, which limits the features that may be used and introduce timing issues because the test script doesn’t know the state of the browser because it is sending its commands.
• It caused frustration because timing issues produced false failures
• A limited feature set because of not interacting directly with the browser
• Wishing for the upkeep of an excessive number of web drivers for every browser.

Within the quest to put in writing scalable, reliable, and fast test automation, new tools such as Playwright are routinely introduced into the market. Let’s quickly look into this popular automation framework that can streamline cross-browser testing. 

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

• 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