Test Automation for

WebApps with Playwright

Nico Orschel
DevOps Whisperer
2

Disclaimer

Several other good E2E test

frameworks exist. This presentation
shows one “new” alternative.

Unit tests should be the basis of

the test pyramid regardless of
the E2E framework.
3

Who are you dealing with?

Mobile: +49 173 510 1479 Mail: norschell@xpirit.com

https://twitter.com/nicoorschel @nicoorschel@masto.ai

https://de.linkedin.com/in/nico-orschel https://mvp.microsoft.com

Nico
Orschel https://www.orschel.info https://www.xpirit.com

DevOps Whisperer,
Xpirit Germany
4

Playwright is a

Cross-browser

Cross-language (Open Source) Web Testing and Automation Framework

Cross-platform …by Microsoft

…and the people who made Puppeteer

https://github.com/microsoft/playwright https://playwright.dev/
5

The State of JS survey

6
7

Very active on GitHub

https://github.com/
microsoft/playwright
8

Why Playwright?

01 Dependable 02 Efficient 03 Capable

04 Ubiquitous 05 Delightful 06 Lively

Source: https://www.slideshare.net/Applitools/playwright-a-new-test-automation-framework-for-the-modern-web
9

Playwright Architecture

JavaScript

Python
Java
Language Bindings

C#
Single Automation Protocol Unify all debugging protocols Common Driver API

(Native) browser debugging e.g. ChromeDevTools Protocol, Chromium Webkit Firefox

protocols, (Safari) Web Inspector

OS: Windows, Linux, macOS

10

Basic building blocks

Actions Locators Assertions

Playwright can interact with HTML Locators are the central piece of Playwright includes test assertions in
Input elements such as text inputs, Playwright's auto-waiting and retry- the form of expect function. To make
checkboxes, radio buttons, select ability. In a nutshell, locators an assertion, call expect(value) and
options, mouse clicks, type represent a way to find element(s) choose a matcher that reflects the
characters, keys and shortcuts as on the page at any moment. expectation. There are many generic
well as upload files and focus matchers like toEqual, toContain, toB
elements. eTruthy that can be used to assert
any conditions.
11

Toolset for
Debugging Tests
Screenshots
• https://playwright.dev/docs/screenshots

Videos
• https://playwright.dev/docs/videos

Visual Studio Code debugger

• https://playwright.dev/docs/debug#vs-code-debugger

Inspector
• https://playwright.dev/docs/debug#playwright-inspector

Traceviewer
• https://playwright.dev/docs/trace-viewer
• Playwright Trace Viewer is a GUI tool that helps you explore recorded
Playwright traces after the script has ran. You can open
traces locally or in your browser on trace.playwright.dev.
This Photo by Unknown Author is licensed under CC BY-SA
12

Test generator
Playwright comes with the ability to
generate tests for you as you
perform actions in the browser and
is a great way to quickly get started
with testing. Playwright will look at
your page and figure out the best
locator, prioritizing role, text and test
id locators. If the generator finds
multiple elements matching the
locator, it will improve the locator to
make it resilient that uniquely
identify the target element.

https://playwright.dev/docs/codegen
13

How to create a test? (1/2)

Browser needs to be
Playwright
inialized only once

Sharing of browsers
Browser using isolated
BrowserContext’s is
possible and fast
BrowserContext
Each BrowserContext
has it’s own cache and
Page cookies

Locators / Actions / Asserts

14

How to create a test? (2/2)

Playwright

Browser

BrowserContext 1 BrowserContext 2 BrowserContext 3

Page Page Page Page

Locators / Locators / Locators / Locators /

Actions / Asserts Actions / Asserts Actions / Asserts Actions / Asserts
15

Demo
16

Differences between Selenium and

Playwright
Browser-Isolation
01 Async-API 02
(BrowserContext)

03 Autowait enabled by default 04 Headless by Default

05 WebSockets vs. HTTP 06 Debugging Tools

17

Selenium

HTTP Over
HTTP Server

Wire Protocol HTTP Over

over HTTP HTTP Server

Selenium Browsers
Browsers
Client Library Driver
18

Playwright

WebSockets

All Commands

Tests Playwright
19

Playwright vs. Selenium

WebSocket Connection

Request

HandShake

Web Socket
Client

VS
HTTP Connection

Request

Response

Client Connection Terminated

20

Summary

Playwright does not reinvent the wheel A good addition to the older
of end-2-end testing, but makes some frameworks

• things simpler and faster

• Auto await
It still makes sense to use
• Browser Context
architecture patterns like
• Helper APIs Page Objects together with
• Debugging tools Playwright
Thank
You
22

Get in touch
Mobile: +49 173 510 1479 Mail: norschell@xpirit.com

https://twitter.com/nicoorschel @nicoorschel@masto.ai

https://de.linkedin.com/in/nico-orschel https://mvp.microsoft.com

Nico
Orschel https://www.orschel.info https://www.xpirit.com

DevOps Whisperer,
Xpirit Germany
23

Additional information
01 https://playwright.dev/ 05 https://www.programsbuzz.com/article/playwright
-architecture

02 https://www.slideshare.net/Applitools/
playwright-a-new-test-automation- 06 https://www.youtube.com/watch?v=15DcaG1EnyU
framework-for-the-modern-web

07 https://2023.boosterconf.no/program/friday/1_sho
04 https://medium.com/version- rt_talks_and_workshops/dr%C3%A6ggen_4/133-
1/playwright-vs-selenium-which-is- climbing-to-the-top-of-the-testing-pyramid-
faster-and-more-stable- with-playwright/Playwright_Booster_2023.pptx
c41ba1a89c0a#:~:text=What%20is%20Pl
aywright%3F,in%20testing%20complex%
08 https://www.lambdatest.com/playwright
20testing%20projects
24

Additional information
Democode -
09
https://github.com/norschel/Playwrigh
tDemos

10 Playwright in CI Pipelines -
https://github.com/norschel/Playwrigh
tDemos/tree/Topic/Playwright_in_CI/.
github/workflows