Get started with end-to-end testing: Playwright | Episode 1 - Introduction

Introduction to the series, Get started with end to end testing: Playwright. Playwright is an an open source, end to end testing framework by Microsoft for testing your modern web applications. It works across all modern browsers and on all platforms. Playwright can automate what a user does, such as clicking on elements and filling out forms. As Playwright is like a really fast user, it waits for elements to be actionable before it clicks on them and retries when making assertions to ensure you

How to Run Tests in Playwright with the VS Code Extension

In this video let's look at how to run tests in Playwright with the VS Code Extension and showcase how you can easily select which browsers known as projects, to run your tests on, how to run your setup tests, such as login tests, only once and how to switch between different configs.

How to Generate Tests in Playwright with the VS Code Extension

Playwright will record your actions and generate the test code directly in VS Code. You can also generate assertions by choosing one of the icons in the toolbar and then clicking on an element on the page to assert against.

Exploring Playwright's Trace Viewer for debugging locally and on CI

In this video let's look at Playwright's trace viewer, a GUI tool that helps you explore recorded Playwright traces after the script has ran. Traces are a great way for debugging your tests locally or when they fail on CI. The trace viewer shows you a timeline of your tests actions, a DOM snapshot which you can pop out and explore, network requests, console, source code and more.

Playwright's UI Mode: Watch mode and time travel debugging

Playwright's new UI Mode brings a watch mode together with the trace viewer to create a time-travel debugging experience. Edit your tests in watch mode and upon saving your file the tests are rerun with a new trace of the tests. Walk through each action of your test and visually see what happened before and after each step of the test. Inspect the DOM snapshot, see network requests, the console and the log of your test.