Category: Playwright Tutorial 2025

This is the final lesson in this introductory tutorial for Playwright where we look at executing tests. You have a number of options and ways to execute tests in Playwright. Your three main options for executing tests include: Execute from within Visual Studio Code Execute with Trace Viewer Execute from the Command Line We’re going to explore each of these options in the next few sections as well as look at how to debug and select browsers. Executing Playwright Tests in VS Code We’re in our Playwright project, in the Explorer view. You’ll see your individual tests can be executed by pressing the run tests button on the left hand side. However, if you created a new test or you’ve...

We've already seen how to write your first test in Playwright and how to record tests using the “Test Generator" tool. We've seen how to use the pick locator option on our web page to identify objects that we want to interact with too. However, there is another stand alone tool called the “Playwright Inspector". This very useful tool can be used to help you construct your tests and identify locators. This “Inspector" tool is not directly initialized from within Visual Studio Code. However, you can start it from a terminal using npx. Starting Playwright Inspector First open a terminal from within VS Codeview terminal. Then you need to execute this npx command: npx playwright codegen https://www.google.com Using the url...

In this lesson we want to have a look at recording tests with the Playwright test generator. The Playwright “Test Generator” is a tool for recording tests. And I agree with you … recording tests is not a good approach to build automated tests. However, it is a good approach for learning Playwright and working out how Playwright works. It can also help you build chunks of code that you can copy into your projects. Starting the Test Generator You can start the “Test Generator” from the Playwright menu in the test explorer view. From here you should see a browser open with the recording bar displayed. In the background, in VS Code, you should see the creation of an...

In this module we're looking at writing our first tests in Playwright. We'll look at the structure of a a Playwright script and see learn about the basic functions used to construct tests. Keep in mind though, that in many respects Playwright is no different to any other automation tool. Everything always boils down to three parts. You need to… 1. identify objects (use locators to identify an element) 2. interact with objects (use a method to interact) 3. inspect objects (inspect properties to verify) For example you'll want to use selectors to identify an object. Then use object methods to interact with an object. For example click a button. Then you'll need to Inspect an object to check it's...

In this session we look at creating Playwright projects. There’s two ways to create projects. 1. In Visual Studio Code 2. Command Line using `npm` First I'll walk you through the Visual Studio Code approach. Then I'm going to show you, and explain, the command line approach. Creating Playwright Projects with Visual Studio CodeIf we look at Visual Studio code approach first. The simplest way is to create an empty folder and then create a project using the “Command Palette“. In VSC then select the “Open folder option” first Find a location where you want to create your project and add a new folder in here for say, Project 2. We've selected an existing folder, then created a new sub...

In this first lesson, we’re going to go through the process for installing Playwright and setting up your first Playwright project. In the video above, and the detailed steps below, we cover the four steps to getting your first Playwright project up and running: Installing Node JS Installing Visual Studio Installing the Playwright Extension Creating your first Playwright project We’ll be installing Node JS as we’re going to be using TypeScript (a variation on Java Script) for writing and running our tests. The execution of our tests will be in this Node JS environment too. Then we’ll install Visual Studio Code, our test development environment and IDE. Steps three and four will cover the installation of the Playwright extension and...