Testing for the Modern Web with Playwright

Rate this content
Bookmark

The modern web platform is continuously evolving. Today's web apps are more sophisticated than ever before and testing for the modern web requires modern primitives. In this talk, we will cover how Playwright is uniquely enabling web developers to ship faster and more confidently.

This talk has been presented at TestJS Summit - January, 2021, check out the latest edition of this JavaScript Conference.

FAQ

Playwright is a cross-browser end-to-end testing library for web applications, developed by Microsoft. It enables automation of browser interactions across Chromium, Firefox, and WebKit.

Playwright is built on three core ideas: capable automation without trade-offs, reliable automation without flakiness, and fast execution akin to unit tests. These principles are designed to address the challenges faced in modern web testing.

Yes, Playwright can automate tests across the three main browser engines: Chromium (used in Google Chrome and Microsoft Edge), Firefox, and WebKit (used in Apple Safari).

Yes, Playwright supports emulation of mobile environments. For instance, it can emulate devices like the iPhone 11, enabling developers to test mobile-specific features and interactions.

Playwright enhances test reliability by listening to browser events and eliminating the need for arbitrary sleep timers. It uses event-driven interactions to ensure that tests only proceed when specific conditions are met.

Playwright supports multiple programming languages including JavaScript, Python, Java, and C#. This flexibility allows teams to choose the language that best fits their existing stack and expertise.

Yes, Playwright is designed to be integrated with continuous integration and continuous deployment (CI/CD) pipelines, facilitating automated testing as part of the release process.

Browser contexts in Playwright are isolated environments that can host multiple web pages. They allow for parallelized execution and isolation of tests, which can run concurrently without interfering with each other, significantly speeding up test execution.

Arjun Attam
Arjun Attam
30 min
15 Jun, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Arjun introduces Playwright, a library for cross-browser end-to-end testing of web applications. The challenges in modern web testing include the evolving web platform and reactive frameworks. Playwright provides capable, reliable, and fast automation, with the ability to capture events and enhance test reliability. It uses browser contexts for faster execution and supports multiple languages and frameworks. Playwright is used by companies like VS Code, Bing, Adobe, and material UI, and offers cross-browser support and an improving roadmap.

1. Introduction to Testing the Modern Web

Short description:

Hi, my name is Arjun, and I'm excited to be here at Test.js and talk to you about testing. I'm a program manager at Microsoft where my team is building Playwright. Playwright is a new library for cross-browser end-to-end testing of web applications. In this talk I'm going to talk to you about testing the modern web. My team and I have interacted with hundreds of testers and developers that are building modern web applications, and we've shaped Playwright for their needs.

Hi, my name is Arjun, and I'm excited to be here at Test.js and talk to you about testing. I'm a program manager at Microsoft where my team is building Playwright. Playwright is a new library for cross-browser end-to-end testing of web applications.

In this talk I'm going to talk to you about testing the modern web. My team and I have interacted with hundreds of testers and developers that are building modern web applications, and we've shaped Playwright for their needs. I'm also going to show you the core ideas behind Playwright and hopefully convince you why Playwright is the right testing tool if you're building a modern web application.

Let's jump right in. Let's start by talking about the modern web platform. The modern web platform is more capable than ever before. Web browsers have matured significantly over the last few years. They run on every device we have, including our desktop, our phones, and smart TVs. There's also been a continuous inflow of new features on the web platform. For example, the web can now detect your current location, it can connect to Bluetooth devices, and also interact with your file system. The pace of innovation in the web platform has been incredible.

2. Challenges in Modern Web Testing

Short description:

These changes in the web platform have powered innovation in the application world. Web applications of today are full-blown applications with rich and responsive interactions. Teams are struggling to automate all parts of their application due to the evolving web platform and the challenges posed by reactive frameworks. This has resulted in end-to-end tests slowing teams down instead of helping them move faster. Modern web testing needs to be capable, reliable, and fast to keep up with the changing web landscape.

These changes in the web platform have powered innovation in the application world. If you look at desktop applications, they're very similar to what they were 10 years ago, but web applications look very different. Web applications of today are full-blown applications that have rich and responsive interactions. We're building single-page applications that are built with newer reactive JavaScript frameworks. We're also building PWAs that are replacing native applications. The platform and our applications on the web have both evolved significantly.

With these changes, we've also seen changes in how teams are operating. Teams of developers and testers are actually moving faster. Lots of teams are building applications today, and there's competitive pressures which are pushing teams to ship faster, because that is how they achieve their business goals. This has led to teams adopting newer workflows like CI, CD, and continuous deployment. And teams are also looking for automated testing solutions so that they can release even faster. Unfortunately, end-to-end testing has not evolved as quickly as the web itself. Let's talk a little bit more about that.

End-to-end testing needs to actually evolve for the changes that we talked about in the modern web. For example, tests need to be able to automate newer platform features that are showing up across browsers. These include capabilities that are available on desktop browsers, capabilities that are available on mobile browsers, and even capabilities that are being powered in smart TVs. Teams are actually struggling to be able to automate all parts of their application because their tests cannot actually cover all the capabilities that they're using. The applications of today are also harder to automate. Tests cannot keep up with how reactive frameworks work. And so teams that are building rich single-page applications find that their end-to-end tests are flaky. They're not able to reliably automate user interactions on their applications. What happens as a result is that end-to-end tests that are actually supposed to help you move faster are actually slowing teams down. Teams end up having to add sleep timeouts or retries to be able to manage reliability issues. Teams are struggling with coverage issues because they're not able to automate all parts of their application. And therefore, end-to-end tests are actually slowing teams down when they actually need to be able to ship faster. These three problems are actually the reason why end-to-end testing has not been able to evolve for the modern web. And these three actually give us really the three pillars of modern web testing. Modern web testing needs to be capable so that it can actually automate all possible capabilities of the modern web platform. Modern web testing also needs to be reliable, which means it needs to be able to reliably automate user interactions with highly rich and responsive web applications. And finally, modern web testing needs to be fast, which means it needs to be able to speed up our shipping and release processes instead of slowing them down.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Testing Web Applications with Playwright
TestJS Summit 2022TestJS Summit 2022
20 min
Testing Web Applications with Playwright
Top Content
Watch video: Testing Web Applications with Playwright
Testing web applications with Playwright, a reliable end-to-end testing tool. Playwright offers fast execution, powerful tooling, and support for multiple languages. It provides precise selectors, web-first assertions, and code generation for easy testing. Playwright also offers features like live debugging, tracing, and running tests on CI. The future of Playwright aims to make testing easy and fun, with a focus on creating frustration-free web experiences.
Full-Circle Testing With Cypress
TestJS Summit 2022TestJS Summit 2022
27 min
Full-Circle Testing With Cypress
Top Content
Cypress is a powerful tool for end-to-end testing and API testing. It provides instant feedback on test errors and allows tests to be run inside the browser. Cypress enables testing at both the application and network layers, making it easier to reach different edge cases. With features like AppActions and component testing, Cypress allows for comprehensive testing of individual components and the entire application. Join the workshops to learn more about full circle testing with Cypress.
Everyone Can Easily Write Tests
TestJS Summit 2023TestJS Summit 2023
21 min
Everyone Can Easily Write Tests
Playwright is a reliable end-to-end testing tool for modern web apps that provides one API, full isolation, fast execution, and supports multiple languages. It offers features like auto-weighting, retrying assertions, seamless testing of iframes and shadow DOM, test isolation, parallelism, and scalability. Playwright provides tools like VS Code extension, UiMode, and Trace Viewer for writing, debugging, and running tests. Effective tests prioritize user-facing attributes, use playwright locators and assertions, and avoid testing third-party dependencies. Playwright simplifies testing by generating tests, providing code generation and UI mode, and allows for easy running and debugging of tests. It helps in fixing failed tests and analyzing DOM changes, fixing locator mismatches, and scaling tests. Playwright is open source, free, and continuously growing.
Tiny Tests, Large Results
TestJS Summit 2022TestJS Summit 2022
21 min
Tiny Tests, Large Results
Automated atomic tests are a great way to improve UI tests by making them less brittle and faster. The tests focus on testing a single feature or component and have minimal UI interactions. The Talk explores examples of automated atomic tests and their implementation on web applications. It also discusses the analysis of atomic tests, login tests, and working with JSON Web Tokens for authentication and authorization. The Talk concludes by highlighting the use of UI and web requests in automated atomic testing.
We May Not Need Component Testing
Vue.js Live 2024Vue.js Live 2024
26 min
We May Not Need Component Testing
Component testing is a gray area between integration and unit testing. The demo app focuses on the cart component and writing test cases for Playwright component test and VTest. The first cart test encounters a bug with the invisible method in View Test.
Testing Mail Service With Playwright
TestJS Summit 2022TestJS Summit 2022
17 min
Testing Mail Service With Playwright
Top Content
Watch video: Testing Mail Service With Playwright
This Talk discusses how to test mail service with Playwright, covering e-mail verification, reset password user journey, and more. It explores the use of third-party providers for reliable e-mail delivery and demonstrates how Playwright can help perform checks on e-mail content. The Talk also introduces the concept of a fake SMTP server and showcases how fixtures can be used to access the SMTP server and perform assertions on the HTML body of emails. Playwright's HTML rendering feature allows for interaction with email content as if it were a regular web page. It highlights the ability to render HTML from API calls, perform assertions on the rendered page, and exclude dynamically generated data from visual regression tests.

Workshops on related topic

Detox 101: How to write stable end-to-end tests for your React Native application
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
Testing Web Applications Using Cypress
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
Top Content
WorkshopFree
Gleb Bahmutov
Gleb Bahmutov
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Building out a meaningful test suite that's not all E2E
TestJS Summit 2023TestJS Summit 2023
89 min
Building out a meaningful test suite that's not all E2E
Workshop
David Burns
David Burns
We're all taught to follow the Testing Pyramid but the reality is that we build out the Testing Christmas Tree. In this workshop, David will talk you through how to break down projects and put the tests where they need to be. By the end of the workshop you will be able to update your projects so that anyone and everyone can start contributing and truly living up to "Quality is everyone job".
He will walk you through:- Component Testing- API Testing- Visual Regression Testing- A11Y testing
He will also talk you through how to get these all setup in your CI/CD pipeline so that you can get shorter and faster feedback loops.
Live e2e test debugging for a distributed serverless application
TestJS Summit 2021TestJS Summit 2021
146 min
Live e2e test debugging for a distributed serverless application
WorkshopFree
Serkan Ozal
Oguzhan Ozdemir
2 authors
In this workshop, we will be building a testing environment for a pre-built application, then we will write and automate end-to-end tests for our serverless application. And in the final step, we will demonstrate how easy it is to understand the root cause of an erroneous test using distributed testing and how to debug it in our CI/CD pipeline with Thundra Foresight.

Table of contents:
- How to set up and test your cloud infrastructure
- How to write and automate end-to-end tests for your serverless workloads
- How to debug, trace, and troubleshot test failures with Thundra Foresight in your CI/CD pipelines
Uniform Browser Automation Infrastructure
TestJS Summit - January, 2021TestJS Summit - January, 2021
127 min
Uniform Browser Automation Infrastructure
Workshop
Ivan Krutov
Ivan Krutov
In this workshop, I will show you how to quickly deploy and use browser automation infrastructure with Moon solution. We will start deploying everything on your workstation and will soon be able to run Selenium, Playwright and Puppeteer tests in parallel in the same cluster. Then I will demonstrate how to easily deliver the same experience for your team using a remote cluster in the cloud platform.