How to perform End to End Testing using Playwright

End to End testing (E2E testing) is a comprehensive testing method that evaluates the entire software application, from start to finish, simulating real user scenarios. It ensures all components work together as expected, validating workflows, integrations, and system dependencies, guaranteeing the application performs correctly in a production-like environment.

This article explores implementing end to end testing 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?

End to End 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.

End to end testing verifies all the necessary elements and connected peripherals are working together to achieve the purpose of the application that is being tested. Usually end to end flows are based on the user interactions and how they perform various actions on the application.

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)
• You can use JavaScript, TypeScript, Python, .NET, and Java for writing test cases.
• You 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.
• You 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, you 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

• Install Python
• Install any suitable IDE for Python.

Installing Playwright

After completing the above steps, run the below commands for Playwright installation.

pip3 install playwright

playwright install

Talk to an Expert

Example: End to End testing in Playwright using Python

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

At first, 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()

Run this test script

Benefits of End to End Testing in Playwright

The benefits of End to End (E2E) testing in Playwright include:

1. Cross Browser Testing: Playwright supports testing on multiple browsers (Chromium, Firefox, WebKit), ensuring cross-browser compatibility.
2. Fast Execution: Playwright offers parallel test execution, improving testing speed and efficiency.
3. Real World Scenarios: Tests simulate real user interactions, validating end-to-end workflows in a production-like environment.
4. Automatic Waiting: Playwright automatically waits for elements to appear or actions to complete, reducing flaky tests and enhancing reliability.
5. Headless and Headed Modes: Playwright allows testing in both headless (no UI) and headed (with UI) modes for flexibility in testing environments.
6. Advanced Debugging: Integrated tools for capturing screenshots, videos, and detailed logs provide robust debugging capabilities.
7. Easy Setup and Automation: Playwright provides easy setup for automation, allowing smooth integration into CI/CD pipelines for continuous testing.
8. Cross Platform Support: It runs on various platforms (Windows, macOS, Linux), enabling testing across different operating systems.

Best Practices for Playwright 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 you to perform the E2E testing across all browsers and you 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, you can execute our test on BrowserStack Automate with different capabilities on different browsers and OS combinations.

Why perform Playwright End to End Testing on BrowserStack?

You should perform Playwright End to End Testing on a real device cloud like BrowserStack Automate for below reasons:

• Realistic Testing Conditions: Real device clouds provide access to a broad spectrum of devices and environments, ensuring tests reflect actual user conditions accurately.
• Enhanced Security: Maintained with high security standards, real device clouds offer secure, isolated testing environments, minimizing data breach risks.
• Broad Browser and OS Coverage: Helps identify compatibility issues across various browsers and operating systems, enhancing user experience.
• Performance Insights: Real devices yield authentic performance data essential for optimizing application responsiveness.
• Scalability and Accessibility: Facilitates scalable and accessible testing, suitable for distributed teams.
• CI/CD Integration: Integrates smoothly with CI/CD pipelines for continuous testing and early issue detection.
• Cost-Effectiveness: Although initially more costly, it saves on long-term expenses related to fixes and support.

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, Playwright 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