What is Playwright – How it is different from other Frameworks ?
Challenges Of Modern Browser Applications
- Today’s web applications tend to be extremely rich and responsive. Additionally, developers are mainly building single-page applications that do a lot more in a browser tab than web applications used to do a decade ago.
- The highly responsive behavior of web app is primarily powered by handling asynchronous events. For example, say you're picking a particular button on a page, and then stuff happens on the page.
- These web applications are rarely isolated and usually, involve your backend services talking over the network.
- There are lots of asynchronous events that are happening inside a web application and being able to automate these things predictably is hard. You may run into cases where a network takes slightly longer and prohibits the UI from being ready for a script to interact with it because it's still loading behind the scenes. Or you might be expecting a new popup window to be released, and you may have to switch context and automate that window.
Of course, most existing frameworks and drivers are doing what they can to improve things, but given the requirements of web applications today, it's a tough problem.
Because of this, the Microsoft Playwright JS team saw a need for a tool that could keep up and handle this newer approach to web development.
Playwright enables reliable end-to-end testing for modern web apps.
What is Playwright?
Why Playwright?
Playwright tries to approach the problem by introducing intelligence defaults that make things easy right out of the box. It's easy to install playwright and it also includes the capabilities required for more advanced scenarios.
When you create and run a Playwright script, it runs through a bunch of checklists and ensures that the UI is ready for the test to execute the actions.
As users, we're naturally hardwired to wait for these things, but many tools require you to code for these scenarios. Instead, Playwright tries to handle these types of issues for you automatically.
For example, actions in Microsoft's Playwright auto wait for elements to be ready before your test interacts with them.
What Makes Playwright Different than other Frameworks?
- Any browser • Any platform • One API
- Resilient • No flaky tests
- No trade-offs • No limits
- Full isolation • Fast execution
- Powerful Tooling
Any browser • Any platform • One API
Cross-browser. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox.
Cross-platform. Test on Windows, Linux, and macOS, locally or on CI, headless or headed.
Cross-language. Use the Playwright API in TypeScript, JavaScript, Python, .NET, Java.
Test Mobile Web. Native mobile emulation of Google Chrome for Android and Mobile Safari. The same rendering engine works on your Desktop and in the Cloud.
Resilient • No flaky tests
Auto-wait. Playwright performs a range of actionability checks on the elements before making actions to ensure these actions behave as expected. It auto-waits for all the relevant checks to pass and only then performs the requested action. If the required checks do not pass within the given timeout, action fails with the TimeoutError.
For example, for page.click(selector[, options]), Playwright will ensure that:
element is Attached to the DOM
element is Visible
element is Stable, as in not animating or completed animation
element Receives Events, as in not obscured by other elements
element is Enabled
Web-first assertions. Playwright assertions are created specifically for the dynamic web. Checks are automatically retried until the necessary conditions are met.
Tracing. Configure test retry strategy, capture execution trace, videos, screenshots to eliminate flakes.
No trade-offs • No limits
Browsers run web content belonging to different origins in different processes. Playwright is aligned with the modern browsers architecture and runs tests out-of-process. This makes Playwright free of the typical in-process test runner limitations.
Multiple everything. Test scenarios that span multiple tabs, multiple origins and multiple users. Create scenarios with different contexts for different users and run them against your server, all in one test.
Trusted events. Hover elements, interact with dynamic controls, produce trusted events. Playwright uses real browser input pipeline indistinguishable from the real user.
Test frames, pierce Shadow DOM. Playwright selectors pierce shadow DOM and allow entering frames seamlessly.
Full isolation • Fast execution
Browser contexts. Playwright creates a browser context for each test. Browser context is equivalent to a brand new browser profile. This delivers full test isolation with zero overhead. Creating a new browser context only takes a handful of milliseconds.
Log in once. Save the authentication state of the context and reuse it in all the tests. This bypasses repetitive log-in operations in each test, yet delivers full isolation of independent tests.
Powerful Tooling
Codegen. Generate tests by recording your actions. Save them into any language.
Playwright inspector. Inspect page, generate selectors, step through the test execution, see click points, explore execution logs.
Trace Viewer. Capture all the information to investigate the test failure. Playwright trace contains test execution screencast, live DOM snapshots, action explorer, test source, and many more.
What are the languages supported by Playwright?
- Javascript and TypeScript
- Python
- Java
- .Net
Playwright vs Cypress?
Cypress
➕ A broader community and easier to find answers about specific issues
➕ Easier to understand for people new to testing
➕ You only have to read up on one framework as Cypress has everything included.
➖ More extensive and with more dependencies
➖ Generates several example files and folders
➖ You have to re-run tests to run in another browser.
Playwright
➕ Fewer dependencies than Cypress
➕ Supports multi-page and third-party implementations
➕ Lets you choose your test runner.
➕ Doesn’t generate any files.
➕ You can run multiple browsers using the same test.
➖ Newer and with a smaller community
Size and Performance
When it comes to size and performance, it’s a bit of a mixed bag. Since Cypress has a built-in test runner, Jest has been added to the comparison, as it’s the most popular Javascript test runner, and needed to achieve similar functionality to Cypress in Playwright. Looking at the minified size, Cypress is technically smaller with it’s 1.6MB against the 2.85MB of Playwright + Jest, but where Playwright + Jest shine is when you look at the dependencies where Playwright + Jest has 14, compared to the 125(!) of Cypress.
Final Thoughts
As you've seen, Playwright is built to be extremely modular and focused on being an automation driver that works nicely with other parts of your testing stack.
It also provides some niche capabilities which has been challanging in other testing framework.
In my opinion, Playwright is going to be dominant in all other browser automation framworks.
Comments
Post a Comment