Cross Browser Testing using Playwright

ensures that web applications function smoothly across different browsers., a powerful mechanisation framework, simplifies this summons by enabling you to write exam that run across multiple browsers (Chrome, Firefox, and WebKit) with a single codebase. It proffer tight, reliable, and efficient testing, supporting features like parallel tryout execution, headless mode, and browser context isolation.

This article dives into how Playwright can streamline cross-browser testing and help developers achieve coherent execution across various web environs.

What is 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 nigh knock-down argument for using Playwright is the new features that it acquaint. Because Playwright can see into and control the browser alternatively of numerate on a middle rendering layer, it allows for the simulation of more insightful and relevant exploiter scenarios. We & # 8217; ll search some of these key features below.

• Auto-Waits: rather of managing the waiting-through code in, Playwright perform respective actionability cheque on constituent before performing certain actions. This do the tests more honest and easier to take precaution of.
• Network Control: Test scripts can vary conditions for the application under test by simulating file uploads and downloads, handling various authentication methods, intercepting meshwork request, and mocking out request reply.
• Browser Contexts: Browser contexts also let the model of incognito sessions as multi-page scenario. This permits testing haunting sessions between tabs and ensuring the website can function in incognito mode.
• Permissions: Permissions like notifications and are often enabled and imitate; user settings like the color scheme are changed to the dark mode or mark.
• Browser Support: Currently, Playwright supports Chromium, Firefox, and Web Toolkit (Safari)
• CI/CD Integration: CI/CD integration is but same several early testing frameworks it runs swimmingly there farther.

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 & # 8217; re not restricted to one language.
• CodeGen: you & # 8217; ll be able to record your trial with Playwright Code Gen. Once you start with CodeGen it & # 8217; ll generate a tests hand for you.
• Testing Safari on Windows: After installing Playwright Framework, it & # 8217; ll too install a collection of browsers like Chrome, Firefox, Webkit, etc. The Webkit browser is an open-source version of Safari, you & # 8217; ll run the Webkit browser on a windows machine, which implies you & # 8217; re testing Safari characteristic on a windows machine.
• Emulate Devices: Emulate device and run your tests using a single command with Playwright.
• Generate PDF: Generate PDF using Playwright, which is much a novel feature liken to a different fabric.
• Test Retries: Specify the number of retries for your tests; this can be a typical lineament, though Playwright is additionally providing.
• Allure Report: Playwright provides an Allure Report Integration feature, which many are trying to find.

Rather than curtail, Playwright gives exploiter more features, representing Playwright as a remarkable framework. It sharply render features and fixes issues, so we can not stop expecting more lineament.

Getting Started with Playwright Setup for Cross Browser Testing

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

Pre-Requisites

• Install any suited IDE for Python.
• Install Python3: DownloadPython3and install it.

How to Install and run Playwright Test Script

• Step 1& # 8211; Create a new Python Package Playwright_python.
• Step 2& # 8211; Add a new virtual environment usingvirtualenv.
• Step 3& # 8211; Install the playwright plugin expend pip.

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

pip install playwright

• Step 4& # 8211; Install Browsers binaries using Playwright CLI.

playwright install

• Step 5 & # 8211;Create python test booktest_bsdemo.py

Let & # 8217; s add some stairs inside our test scripttest_bsdemo.py.

Scenario:

1. Navigate to https: //bstackdemo.com/
2. Click on Add to cart push.
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& # 8211; Running your test case

To run our trial playscript we can run this as a common python hand.

python test_bsdemo.py

• Step 7& # 8211; Checking the solvent

Once our script bunk entirely and without any mistake 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 establish their specific binary expend

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?

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

The users use multiple versions of every browser at every time. Testing every available browser variation 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:

Cross Browser Testing with Playwright on BrowserStack

You can efficiently BrowserStack by specifying any browser with a combination of multiple OS. Your team get the out-of-the-box capacity such as:

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

Here is an example of running our tryout script on BrowserStack. You can find the extra details and on this repo.

import json import urllib import subprocess from playwright.sync_api import sync_playwright desired_cap = {'browser ': 'chrome ', # allow browsers are ` chrome `, ` edge `, ` playwright-chromium `, ` playwright-firefox ` and ` playwright-webkit ` 'browser_version ': 'latest ', # this capability is valid only for branded ` chrome ` and ` edge ` browser and you can specify any browser variation like ` late `, ` 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 codification is responsible for marking the status of the trial on BrowserStack as 'passed '. You can use this code in your after sweetener after each tryout mark_test_status (`` surpass '', `` Item matched '', page) else: mark_test_status (`` failed '', `` Item did not jibe '', page) demur Exception as err: mark_test_status (`` neglect '', str (err), page) browser.close () def mark_test_status (status, intellect, page): page.evaluate (`` _ = & gt; {} '', `` browserstack_executor: {\ '' action\ '': \ '' setSessionStatus\ '', \ '' arguments\ '': {\ '' status\ '': \ '' '' + status + `` \ '', \ '' reason\ '': \ '' '' + intellect + `` \ ''}} '') with sync_playwright () as playwright: run_session (playwright)

Using the above, we can prove book on BrowserStack with different set of browsers on different OS.

To summarize,

Even though Playwright is a new tool compared to Selenium, it solves some major problems look in its architecture. It supports multiple lyric, which gives an upper hand compare to and. It has full-bodied support with BrowserStack for cross-browser examination. Here & # 8217; s what get cross-browser testing using Playwright a cinch:

• ply 3000+ real browsers and devices for an clamant, on-demand testing.
• Access a for automated testing, which can be speed by 10X with parallel testing.
• Securely test websites hosted on local machines, dev, or present environments.
• Easy with video recordings, logs, and trial coverage features.

With BrowserStack infrastructure, focus on essay with nil setups and maintenance on BrowserStack.

Related Guides