How to perform End to End Testing using Playwright

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.

What is Playwright End to End Testing?

Playwright end-to-end testing or Playwright e2e testing allow developers and QAs to simulate real user interactions with web applications. It includes automating interactions such as clicking buttons, filling forms, navigating pages, and validating expected behaviours. It supports Playwright e2e testing with web browsers, including Chrome, Firefox, Safari, and Edge.

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

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

Python test_demo.py

Playwright Best Practices for End-to-End Testing

Here are some of the best practices for Playwright end-to-end testing:

1. Use Waits to handle Asynchronous Tests: Use waitForSelector, waitForNavigation, waitForFunction, waitForRequest, waitForResponse etc. to handle ascynchronities.
2. Test on Real Devices: Use BrowserStack Automate to run Playwright End to End Tests on real Devices and Browsers. BrowserStack allows you to test on 3000+ real devices. By running tests under real user conditions get more accurate test results.
3. Use Page Objects: Implement the Page Object pattern to create a separate class or module for each page or component of your application. Page objects encapsulate the interaction with specific elements and provide a clean and maintainable structure for your tests.
4. Leverage Test Data and Parameters: Use test data and parameters to create reusable test cases and cover different scenarios. This allows you to maximize test coverage without duplicating code.

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.

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