This post was originally published on the Learn Playwright blog. Reference the original post to get the most updated version of this content.

Let's Learn: End-to-End Testing With Playwright

It's December 1! The new year is just over 30 days away so it's the perfect time to make a learning resolution, get started on it now - and then check it off the very first day of the New Year! So what do you want to learn this year?

I've decided to invest this month exploring a topic that fascinates me - end-to-end testing for modern web apps. I want to go from learning core concepts and tools, to implementing efficient cross-browser testing strategies in my web app development workflows. And I want to do this using Playwright by default.

So join me as I begin my #30DaysOfPlaywright learning journey - and let's explore the tools, API and best practices, one test scenario at a time!

What is Playwright?

Playwright is an open source framework for Web Testing and Automation that enables cross-browser testing and web automation across Chromium, Firefox and WebKit, with a single API.

Want to get a rapid introduction to Playwright and fundamental concepts? Watch this excellent 45-minute "Introduction to Playwright test runner" from Andrey Lushnikov of the Playwright team - and look out for a future blog post that dives into some of these fundamental concepts in more detail.

Why Cross-Browser Testing?

A key benefit of web apps over platform-specific apps is in their reach. Users can access web apps simply by discovering and accessing the related link (URL) from any modern browser, on a variety of device form factors (mobile, desktop, embedded, TV) with no added effort.

The challenge is that users expect a consistent experience (user interface and interaction behaviors) across the diverse browser and device platforms, despite inherent differences in their supported capabilities.

Cross-Browser Testing makes sure your application works as expected across a reasonable subset of modern web browsers so that the designed user experience lives up to the reality of user expectations. This can include testing for criteria in performance, accessibility, responsiveness and data integrity - across browsers, and across operating systems (for a given browser).

Why Test Automation?

As app developers, we are likely familiar with writing and executing unit and integration tests on a manual basis, as part of our developer workflows. But scaling the testing strategy becomes challenging with increasing test frequency (e.g., system has more feature commits or bug fixes) or test granularity (e.g., need to validate against more browser and device platforms).

Web Automation or Automated testing is the process of using task runners alongside our testing tools, to speed up execution and automate developer workflows to suit the granularity and frequency of testing needed - in a reliable and efficient manner.

Why Playwright?

According to the documentation, Playwright is designed to be fast, reliable, capable - and evergreen, with iterative updates that flatten the learning curve.

From a modern web app development perspective, useful features include:

• A built-in test runner (Playwright Test) with a rich API.
• A Playwright Library option for use with 3rd party test runners.
• With API support for JavaScript, TypeScript, Python, Java & .NET.
• Flexibility of use with headless and headed testing modes.
• Browser binaries available for Linux, MacOS and Windows.
• Device emulation support to validate mobile user experiences.

Over the next 30 days, we'll unpack the Playwright API, exploring relevant tools and examples that put these features to use in a real-world testing context.

Relevant Resources

Some resources worth bookmarking at the start of this journey:

• The Playwright website - explore docs and examples.
• The Playwright repository - explore source, submit issues.
• The Playwright channel - for "What's New In Playwright" updates.
• Use Playwright to automate and test in Microsoft Edge

And don't forget to follow @playwrightweb on Twitter for updates.

Day 0: Review

• ✅ Visit and bookmark links in Relevant Resources
• ✅] Star or Watch Playwright Repo
• ✅ Watch Introducing Playwright Test runner
• ✅ Watch What's New In Playwright: v1.17

Day 1: Up Next

The best way to learn something is to take it for a spin with code. In the next blog post we'll dive into how you can Get Started With Playwright. At the end of that exercise, you should have:

• Installed the Playwright Test runner
• Written and executed your first test script
• Explored headless and headed modes for testing
• Explored core configuration options
• Used fundamental concepts like assertions, fixtures and test hooks
• Explored command-line options

Get a head start exploring that tutorial, then check back for my walkthrough and learnings in the next post.