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 How to perform End to End Testing using Playwright

How to perform End to End Testing using Playwright

By Manish Saini, Community Contributor -

Table of Contents

End-to-end testing is a fascinating entity. It is often used in agile and many other methodologies, but it is still not easy to understand. It is like unit testing and functional testing, but your tests go beyond individual units. An example: writing a test summary report for your project manager, who needs to see how everything works together. Against this need, you could perform end-to-end testing by creating mock objects for each other object in your system – this way you can simulate the entire system and test it (among other things) from one place.

In this article, you’ll discover end-to-end testing and how to implement it using Playwright. You will learn how Playwright can help you write end-to-end automated tests and how testing with Playwright can help improve your app quality.

What is End-to-End Testing?

Before going further, let’s learn about End-to-End testing (E2E Testing). E2E Testing is a method for determining whether an application’s flow functions as expected from beginning to end. End-to-end testing is done to find system dependencies and ensure data integrity is upheld between systems and system components.

Every application is connected to and integrated with multiple systems and databases outside its own environment. Needless to say, this makes the app’s workflow fairly complicated. This type of testing determines if app dependencies are working accurately and also checks if accurate information is being communicated between multiple system components.

What is Playwright?

Microsoft created and maintains Playwright, a relatively recent open-source cross-browser testing automation platform. It had been an evolution of the Puppeteer tool but quickly superseded it. It was first introduced to test Visual Studio Code but was soon recognized as a valuable tool. It is designed to be a framework that addresses the testing requirements of today’s web apps and tests across all current browsers.

Top Features of Playwright

  • It supports 3 browser engines (Chromium, Firefox, and WebKit)
  • We can use JavaScript, TypeScript, Python, .NET, and Java for writing test cases.
  • We can execute tests parallelly using Browserstack, which makes it time efficient.
  • Playwright on BrowserStack Automate supports over 30 versions of Google Chrome, Microsoft Edge, Playwright-Chromium, Playwright-Firefox & Playwright-Webkit on Windows 10, macOS Mojave, Catalina, and Big Sur
  • Playwright allows us to capture videos, screenshots, and other artifacts on failure, making tracing too easy.
  • We can use various element selectors (CSS, text, X-path, and more).
  • Playwright waits for elements to be actionable before performing actions. This feature is termed auto wait.
  • It includes a powerful tool named Codegen which can generate code from user interactions with resilient text-based selectors.  To use it, we need to run the below command first-

playwright codegen URL

  • Playwright can depend on user-facing strings, like text content and accessibility labels to pick out elements.
  • Shadow-piercing selectors, geolocation, permissions, web workers, and other contemporary web APIs are supported by Playwright for web components.
  • Capabilities to cover all scenarios. Support native input events, out-of-process iframes, file downloads and uploads, and even dark mode.

Setting up Playwright for E2E Test

This tutorial will lead you through installing Playwright with Python step-by-step.

Pre-Requisites

We need a few tools to work seamlessly, and we will install them on our machine.

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

Installing Playwright

After completing the above steps, we’ve to run the below commands for playwright installation.

  • pip3 install playwright
  • playwright install

Example: End to End testing in Playwright using Python

For example, we are automating a demo e-shopping website where we’ll place an order.

At first, we have to create a python test script test_demo.py

Scenario

These test steps will be followed for testing the complete flow:

  1. Open demo web page https://bstackdemo.com/
  2. Click on Add to cart.
  3. Click on Checkout.
  4. Enter Username.
  5. Enter Password
  6. Click on Log In
  7. Fill up First Name
  8. Fill up Last Name
  9. Fill up address
  10. Fill the State/Province
  11. Fill up Postal Code
  12. Click on Submit button
  13. Assert order confirmation

Test Script

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.type("#firstNameInput","John")
page.type("#lastNameInput","Doe")
page.type("#addressLine1Input","123 Main St")
page.type("#provinceInput","Anytown")
page.type("#postCodeInput","12345")
page.click("#checkout-shipping-continue")
page.wait_for_selector("#confirmation-message")
assert page.is_visible("#confirmation-message")
browser.close()

Code Snippet

Screenshot 2022 08 30 at 12.24.48 PM

Our test script is ready, and we can easily run it as a usual python script.

Python test_demo.py

Running Playwright End-to-End Tests on BrowserStack

Playwright allows us to perform the E2E testing across all browsers and we can run our script on BrowesrStack for cross-browser testing. Giving you an example of running the above test script on BrowserStack, more info can be found here also sharing the github repo.

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

#setting up the capabilities
desired_cap = {
'browser': 'chrome', # works with chrome, edge, playwright-chromium, playwright-firefox and playwright-webkit
'browser_version': 'latest', # 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")
page.type("#firstNameInput", "John")
page.type("#lastNameInput", "Doe")
page.type("#addressLine1Input", "123 Main St")
page.type("#provinceInput", "Anytown")
page.type("#postCodeInput", "12345")
page.click("#checkout-shipping-continue")
page.wait_for_selector("#confirmation-message")

if page.is_visible("#confirmation-message"):
#marking the status of the test on BrowserStack
mark_test_status("passed", "Confirmation Message is visible", page)
else:
mark_test_status("failed", "Confirmation Message is not visible", 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)

By using the above script, we can execute our test on BrowserStack with different capabilities on different browsers and OS combinations.

Conclusion

Playwright is made to be extremely modular and focused on being an automation driver that works nicely with other parts of your testing stack.  It’s versatile, feature-rich, and backed by a growing community and a strong partner. Right now, we can say it is one of the best end-to-end testing tools for web applications.

To make our execution faster, Parallel testing can truly accelerate the Automation Testing process.

Run tests on vanilla browsers as well as Playwright’s bundled browsers on Windows and macOS. BrowserStack always provides pristine, fault-free browsers for every single test.

Run Playwright Tests on Cloud

Tags
Automated UI Testing Automation Testing Playwright

Featured Articles

Cross Browser Testing using Playwright: Tutorial

How to start with Playwright Debugging

Curated for all your Testing Needs

Actionable Insights, Tips, & Tutorials delivered in your Inbox
By subscribing , you agree to our Privacy Policy.
thank you illustration

Thank you for Subscribing!

Expect a curated list of guides shortly.