5 Ways Playwright is Awesome
Edit (7/22): This article was written in the early days of Playwright and is only referencing the browser automation part and not the playwright test, which is awesome by itself. Also the Playwright browser automation, a.k.a Playwright Library, got tons of goodies. A new article would be more like “50 Ways Playwright is Awesome”.
Playwright is Microsoft’s new alternative to browser-based test automation. We have recently switched from Webdriverio / Selenium to Playwright. Here are the top reasons:
1 — Selectors
I just love PW selectors! Playwright selectors are built as strings comprised of sections where each section is a selector by itself. A selector looks like this:
css=#menu >> css=div.menu-item>> text="Books" This will search the top for the menu element, a menu item inside that contains the text “Books”.
Moreover, if you are using Web Components on your website, you can decide if the selectors will pierce the shadow DOM or not. Piercing the Shadow Dom works with the syntax above and it will pierce all the shadow roots along the way. (For us, this was a winning feature!)
2 — Auto Waiting
Yet another winning feature of Playwright. PW has rules on waiting for specific actions. Clicking on an element ensures that it is:
- Stable: animation has finished
- Visible: not hidden by any other element
- Enabled: not disabled,
- Receives events: not hidden by any other element.
PW will also scroll the element into viewport if it is outside of it.
When entering data, PW also verifies that the element is editable.
All of the above make the test code shorter and reliable.
3 — Single Browser Launch
Playwright introduces the concept of a browser context. For each browser engine (PW supports Chrome, Firefox, and Safari), you can launch the browser only once and open multiple contexts.
Each context can be configured differently. It can be personalized or incognito, have its own viewport size (or device emulation), and store its own data, locale, location, or timezone.
Single browser launch with multiple contexts makes Playwright go really fast when running multiple tests.
4 — Video Capturing
Capturing the session flow can be easily achieved by setting a parameter on the browser context. The whole session is then automatically recorded and can be used to investigate problems’ root causes.
5 — Development Experience
Initially, Playwright supported Typescript with types definition, so you could use your IDE auto-complete. Newer versions also support Python, Java, and C#.
Playwright has excellent debugging options, so you can see in detail the API calls to the browser. You can also launch the browser from the command line, (or halt it during a debug session) so you test your selectors, as you can see in the video.
Playwright has lots of other goodies. Network requests interceptions, multiple tabs, easy installation, docker support, and the list goes on…
