Navigating the World of Testing with Playwright

Setting up Playwright

Playwright installs native dependencies on the host system, which can sometimes lead to compatibility issues. One temporary workaround for this problem is to update your sources.list to include the following:
 

Next, install the necessary fonts:

$ sudo apt install fonts-unifont

A more robust, although not ideal solution during development, involves using Docker. The Playwright Inspector, a visual debugging tool, does not work as effectively in a Docker environment. Here is a sample Docker script you can use:

Conversely, Cypress offers a significantly streamlined setup process. You can add it as an npm dependency, and Cypress will then autonomously handle the installation of all necessary components. It utilizes your existing browsers for testing purposes and features a self-contained runner. Additionally, Cypress provides Docker images, facilitating its usage in pipelines. Additionally, NX automatically installs and configures Cypress for new projects by default, further simplifying the initial setup.
 

Experiences and Impressions

Advantages

Playwright brings to the table several strengths that set it apart:

• One of the standout features is its lighter memory footprint, which, coupled with its ability to run tests in parallel, significantly speeds up the testing process. To put it in our perspective, this gave us a 2-4x improvement in pipeline length.
• Playwright has a cleaner separation between tests. Combined with test parallelization, this makes it harder to write inter-dependent tests, which should result in reduced test flakiness by default.
• The language used by Playwright is more straightforward and intuitive, leveraging standard JavaScript 'await' syntax as opposed to the more complex chains used by Cypress.
• Playwright has the advantage of out-of-the-box TypeScript support, simplifying the setup process and enhancing type safety. While Cypress comes with JavaScript out of the box, it can be configured to work with TypeScript.
• Playwright's default settings are more developer-friendly. For instance, it automatically records videos of failed tests (instead of all the tests) and can prevent the pipeline from passing if any tests are ignored. This ensures comprehensive test coverage.
• The platform supports multi-browser and mobile device testing directly through its configuration, thereby broadening the scope of its testing capabilities.
• Playwright also supports testing in iframes and tabs, as well as conditional testing. Moreover, it allows for context switching in the middle of a test, providing more flexibility in test scenarios.
• Each test in Playwright operates within a separate context, which effectively mitigates test leakage issues commonly encountered in Cypress.
• Lastly, Playwright's toolset, including its trace viewer for debugging slow tests, exceeds the offerings of Cypress, thereby providing developers with enhanced debugging capabilities.

Challenges

Despite its promising capabilities, Playwright does present a few challenges:

• One of the primary limitations is the lack of a native watch mode for change tracking. Watching for file changes requires the integration of external libraries.
• Similarly, Playwright does not natively support reading environment files. To accomplish this, developers must turn to third-party tools such as `dotenv` and parse JSON, adding an extra step in the development process.
• Additionally, Playwright's documentation could be improved. It's less descriptive than its competitor, Cypress, which can make initial setup and troubleshooting more difficult for developers new to the platform. Cypress’ documentation provides a list of best practices, as well as common pitfalls - which is particularly helpful for beginners.
• Searching for solutions to issues can also be challenging. This is mainly because Playwright, being relatively new, lacks the extensive resources and community support that mature platforms like Cypress enjoy.
• As a relatively young library, Playwright does not officially support certain features, such as setting local storage, though workarounds do exist. However, the necessity for these workarounds can add complexity to the development process.
• Configuring shared authentication with contexts also presents challenges in Playwright. This was particularly difficult to configure initially, leading to potential inefficiencies in the development workflow - but it is definitely possible to set it up (and is a one-time cost).
• Finally, Playwright does not offer the ability to “revert” or view previous user states - a feature readily available in the Cypress development environment. This limitation can complicate debugging and the iterative development process. In my experience, this wasn't a significant issue, but if you’re working with an external QA team unfamiliar with the app's internals, it could increase the cost of writing tests.

Other considerations

Support and community

Playwright has made impressive strides in community engagement despite its relative youth. In fact, it has already surpassed Cypress in terms of GitHub stars, and it's on the verge of matching the number of total forks. While these metrics don't tell the whole story, they do serve as strong indicators of community acceptance and popularity. It's clear that Playwright is being embraced by the tech community, a positive sign for developers seeking support and collaboration.

Learning Curve

Every testing framework comes with its unique syntax and learning curve, and Playwright is no exception. However, it does have an edge over Cypress in this regard. Cypress uses its own chaining syntax for assertions and actions in tests, which can initially pose a challenge for developers due to its asynchronous nature and potential for ambiguity.

In contrast, Playwright uses JavaScript's async/await syntax, a more familiar and straightforward approach for those accustomed to modern JavaScript development. This familiarity likely translates to a smoother learning curve for newcomers to Playwright, enabling quicker onboarding and test implementation.

Features for Different Test Types

Playwright shines in its ability to cater to different types of testing. It offers excellent support for end-to-end testing, ensuring the complete functionality of your application. But it doesn't stop there. Playwright is also quite capable when it comes to unit testing. Its multi-browser testing capability and support for mobile devices make it a robust tool for comprehensive test coverage. You can easily switch contexts mid-test, perform conditional testing, and even use multiple contexts within the same test. Its support for iframe and tab testing further enhances its adaptability. These features, combined with its straightforward syntax, make Playwright a highly customizable tool, able to bend to the specific needs of your project.

Verdict

Cypress may be the more mature product, but it's slower. Playwright, while still young, is faster and has sensible defaults.

For existing projects facing slow pipelines, I recommend considering a migration to Playwright. The speed, flexibility, and sensible defaults it offers make it a promising alternative. If there are already a lot of tests written in Cypress, you could also consider writing new tests with Playwright and slowly porting over the older tests in Cypress.