As agile teams adopt test automation more frequently, test automation has become an increasingly important part of SDLC. Test automation tools are becoming more prevalent as the scope of the project increases. A new generation of open-source tools has now overtaken Selenium and other proprietary tools on the market. With Playwright, you can automate tests in a similar manner to Puppeteer, but without many of its limitations.
What is Playwright?
Node.js library-based Playwright was built by Microsoft to automate Firefox, Chromium, and WebKit by using one API. Developers can use these APIs to create new browser pages, navigate to URLs, and interact with elements on pages using JavaScript code. Additionally, Playwright is able to automate Microsoft Edge as well, since it resides on the open-source Chromium platform. It has become increasingly popular to perform end-to-end testing with Playwright. The framework is a favorite among many developers.
Specifically designed to cover end-to-end testing needs, Playwright Test enables you to test everything from start to finish. All the basic functions of regular test runners are included, as well as many more. As a result of the Playwright test, you can:
- All browsers can be tested.
- Embrace extensible fixtures in your POMs.
- Parallelize the execution of tests.
- Immediately benefit from context isolation.
- Failure artifacts, including videos and screenshots, can be captured.
When it comes to web automation, why should you use Playwright?
Microsoft released Playwright in 2020, is an open-source framework. Despite its newness, it has quickly gained popularity on the market. Considering how popular Playwright is, we can see that Microsoft continues to improve it based on users’ feedback.
Features of Playwright testing framework
Playwright’s testing framework has the following unique features:
- Choose the environment that suits you while still covering all areas and formats – TypeScript, Python, JavaScript, Java, and .NET.
- Keep track of logs and videos easily with auto-wait, smart assertions, and test data tracing.
- You can interact with multi-page and multi-tab websites like a real user with this application built with modern architecture and no restrictions.
- On Windows, Linux, and macOS, cross-platform execution is supported.
- In Playwright, the in-process test runner is not a limitation since it follows the architecture of the modern browser.
- Chrome, Edge, Firefox, Opera, and Safari can all be developed using the framework, as it supports Chromium, WebKit, and Firefox.
- With Playwright, all tests are isolated without any overhead. It only takes a few milliseconds to create a browser context for each test.
Third-Party Runners in Playwright
Your JavaScript test runner can be easily integrated with Playwright.
- Playwright Test:
Our first-party recommendation for Playwright Test is Playwright Test.
- Jest / Jasmine:
The jest-playwright command can be used with Jest. Nevertheless, requiring Playwright directly works for a light-weight solution. As Jest and Jasmine share the same syntax, this also applies to Jasmine.
- AVA:
Due to AVA’s concurrent testing, a single page variable can’t be shared between tests. Use a macro function instead of creating new pages.
- Mocha:
In terms of appearance and functionality, Mocha is very similar to Jest/Jasmine.
- Vitest:
In terms of functionality and appearance, Vitest is very similar to the Jest/Jasmine setup.
- Multiple Browsers:
An environment variable can be used to support multiple browsers in these simple examples.
How is Playwright different from other testing frameworks?
In this particular section, we will look at how Playwright is different from other frameworks.
- Auto-wait:
When elements become actionable/mounted, the Playwright waits for them and then acts. The tests are performed by other tools as soon as the code is executed, or by attaching separate async functions to only execute tests when elements are active. It is not necessary to write timer functions separately because of the Auto-wait feature.
- Web-First Assertions:
When the Playwright’s assertions meet the necessary conditions, Inspections stop automatically.
- Browser Context:
Run the test, and the Playwright will create a context for you. An entirely new browser profile is a browser context. Browser contexts are created within milliseconds.
- Login Once:
Testing apps with authentication saves the authentication state and reuses it during tests once you submit the details. Each test can be skipped by using authentication states.
- Robust Tooling:
Using the codegen, Playwright creates a recording of actions that can be saved into any programming language. Inspection logs and inspection pages can be viewed and inspected using Playwright inspector.
- Tracing:
The Playwright tracing method can be configured to retry our tests in case of unexpected failures. To remove bugs, screenshots and videos can be captured.
- Limitless:
Multiple scenarios can be created and tested simultaneously using Playwright.
- Trusted Events:
For hover and dynamic input elements, the Playwright uses real browser input that cannot be distinguished from actual user input. It is possible to enter into the frames effortlessly with the Playwright because it is able to pierce the shadow DOM.
- Traceviewer:
The features Playwright offers that separates it from other test frameworks are the ability to capture the recordings, screencast the execution, view live DOM snapshots, identify actions, and view test source
Moving On From Puppeteer
The good parts of Puppeteer are even better with Playwright, which promises to be even better. The Playwright API looks a lot like the Puppeteer API if you look at it on the official Playwright website. You’re right and it’s not by accident. A more testing-friendly API, as well as significant improvements that target multi-page scenario performance, cloud-native operations, and other goodies, are on the Playwright team’s agenda without getting into company politics or open source dynamics. In the meantime, the Puppeteer migration scenario is almost mechanical and straightforward. Puppeteer was forked into Playwright by Microsoft by Microsoft. JavaScript is used to automate Chromium-based browsers using Puppeteer, a node library.
Based on what you can find online, the top two Puppeteer contributors now work for Playwright. Microsoft acquired the Puppeteer team and changed its name to Playwright. Playwright thus shares many similarities with Puppeteer. There are no differences in API methods between the two packages, and both bundle compatible browsers by default.
Its cross-browser compatibility makes Playwright stand out. Firefox, WebKit, and Chromium can all be run on it. Furthermore, Playwright was able to improve ergonomics without breaking Puppeteer by using a new library. A page.click in Playwright, for instance, waits for a default visibility of an element. Despite its shortcomings, Playwright can be more useful in some cases than Puppeteer.
The last noteworthy difference is that Playwright automation platform offers more powerful browser context features, enabling you to simulate multiple devices with a single instance. Each browser context can have multiple pages underneath it, and each context is isolated from other contexts in terms of cookies and local storage.
With Puppeteer testing, browser automation is easy to set up. Because it uses the nonstandard DevTools protocol and intercepts network requests with ease, it provides additional functionality over Selenium, in part due to its ease of use.
Playwright Best Practices
The Playwright tool simplifies end-to-end testing across different browsers by automating tests. Playwright is an excellent tool if you know how to use it properly. We will share some best practices for you in this section
- Playwright should be installed globally
Playwright may be installed globally on your computer, allowing you to access the play command from any directory on your computer. You don’t have to set up a Playwright project every time you want to write a new play, which allows you to create new plays from anywhere.
You can also access several helpful Playwright commands through the playwright command when you install Playwright globally. You can update your installed version of Playwright using the playwright update command, for instance. Playwright automatically installs all necessary files and dependencies in your home directory when it is installed globally. When uninstalling Playwright, you won’t accidentally delete important files because of this. It also makes cleaning up Playwright installations easy.
- Make sure you are using the latest version of Node.js
A new feature or bug fix is released every day in Node.js, which is continuously evolving. Node.js can, therefore, quickly become outdated and no longer supported if older versions are used. Older versions of Playwright can have problems running playwright scripts, as they may not work correctly.
Node.js’s latest version will always be compatible with your playwright scripts, so you don’t have to worry about that. Scripts will work regardless of the new Node.js version, saving you time and frustration in the long run.
- Default to headless browser for your tests
Because there is no need to launch a GUI, headless browsers make test execution faster. This also speeds up your tests’ execution time by enabling you to run them in parallel. Further, you don’t have to manually take screenshots or record videos when running your tests in a headless browser, which eliminates flakiness caused by UI changes.
- Navigation between pages should not be done with await page.goto()
Waiting for a new page to load is required before progressing with await page.goto(). It’s fine if you’re just loading one page, but it can cause a bottleneck if you’re loading several in parallel.
The best way to navigate between pages is to use page.evaluate() instead. The first page may still be loading while Playwright loads other pages.
Conclusion
In addition to its strong test automation capabilities, Playwright is also able to handle cross-browser testing. Playwright offers a variety of features. A cloud-based testing platform like LambdaTest, however, is essential in order to determine the true potential of this technology. You can automate Playwright tests on an online browser farm of 50+ browsers using LambdaTest test automation cloud, including Chrome, Chromium, Edge, Mozilla Firefox, and Webkit.
