App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

Home Guide Cross Browser Testing using Playwright: Tutorial

Cross Browser Testing using Playwright: Tutorial

By Manish Saini, Community Contributor -

Table of Contents

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 this state of the browser because it is sending its commands.
  •  It caused frustration because of timing issues producing false failures
  • A limited feature set because of not interacting directly with the browser
  • Wishing for the upkeep of an outsized 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 have a quick look into this popular automation framework that can streamline your 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.

Cross Browser Testing using Playwright

Key Features of Playwright

The most powerful argument for using Playwright is the new features that it introduces. Because Playwright can actually 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 for testing persistent sessions between tabs and ensuring that the website can function in incognito mode.
  • Permissions: Permissions like notifications and geolocation are often enabled and simulated; user settings like the color scheme being changed to the dark mode or print.
  • Browser Support: Currently, Playwright supports Chromium, Firefox, and Web Toolkit (Safari)
  • CI/CD Integration: CI/CD integration merely is 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 just by employing 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, the Playwright is additionally providing.
  • Allure Report: Playwright is providing an Allure Report Integration feature, which many are trying to find.

Rather than restricting, Playwright gives users more features, which stands for Playwright as a singular framework. The playwright is aggressively delivering features and fixing 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 in a straightforward way.

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 completely 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

To run our test script in the specific browser, we need to change the browser name in our code.

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 you with instant feedback. In addition, cross-browser testing helps ensure your application works consistently across different browsers and operating systems.

Cross Browser Testing using Playwright: Tutorial

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.

Cross Browser Testing with Playwright on BrowserStack

You can easily 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

Playwright cross-browser testing with BrowserStack Here is an example to run 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 run test scripts on BrowserStack with different sets of browsers on different OS.

To summarize,

Even though Playwright is a new tool in comparison to Selenium, it solves some major problems faced in Selenium architecture. It supports multiple languages which gives an upper hand when compared with 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 instant, on-demand testing.
  • Access a cloud Selenium grid for automated testing, which can be further 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

Tags
Automation Testing Cross browser testing Playwright

Featured Articles

How to start with Playwright Debugging

Page Object Model with Playwright: Tutorial

Playwright Framework Tutorial: Learn Basics and Setup