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:
1. execute within VS Code
2. execute with the Trace Viewer
3. execute from the command lineWe’re going to explore each of these options in the next few sections as well as look at how to debug and select browsers.
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 edited a test, you won’t see that button. You’ll need to come into the test explorer view and you’ll need to refresh tests.
For example if we rename a test, and Playwright hasn’t yet picked this up this change so we can’t execute the test. After we’ve saved this specification file we can come into the “Test Explorer" view and refresh the tests list. Now we’ll see that Playwright will pick this up and we now have the option to run this test. What you’ll notice too is that you can run from the test Explorer view too now.
You can run all of the tests in all of the test specs in this directory. You can also come in and run all of the tests in a particular specification file, or you can run individual tests within a specification file.
If you drill down to a specific test you want to edit then you’ll also find that you’ve got this option to turn on “continuous run". Select this option and whenever you edit a test, and then save it, it will run it immediately.
When you run the tests, you’ll see that the test result panel will open up. You’ll get the results of that particular test run displayed along with the history presented in the right hand panel.
When it comes to debugging these tests, you can either show the test in a browser when you execute them so you can view the test run itself (“headed" mode). Or you can run in the background (“headless" mode with no browser displayed) and use the “trace viewer" tool to see how the test ran. You can select which one of these you need in the Playwright panel.
When you run a test with the trace viewer this shows you the recording of the test execution (especially useful if you’re running in headless mode). So you can view all of the steps executed within the test.
You can now look at the before hooks and after hooks (which we’ll talk about later). You can look at the steps and investigate the actual code that was used to run that step. You can even see the locators that have been used.
You can even experiment with those locators because all of those locators are recorded as part of that Trace Viewer recording. You can use the Pick locator feature, inspect the graphical view of the page, and find a new locator… all from the recording!
There’s lots of useful tools within the Trace Viewer, which we’ll talk about in a dedicated lesson later on. For now though just be aware that you can step through all of the steps in your script and visually see where any errors might have cropped up.
When we installed Playwright for this particular project, remember that the command palette installer gave us the option to select the browsers we needed.
Those browsers that were installed as part of this project are now represented in the left hand Playwright panel.
So if we want to run a test in multiple browsers, we just select the browsers that we need. Using these check boxes I can run this single test against one or more browsers. After the execution completes you can then see the test results broken down by browser.
The last thing to mention then is that tests can be run from the command line. You can either do this from within VS Code (in the “Terminal" panel) or in a separate command prompt window. We’ll step through how to run in a separate command prompt.
First find the path to your Playwright project. Then copy the path.
Then I can open a PowerShell or a command prompt, and change the directory with the path I just copied. Then run the command to execute my tests.
You’ll see from the above example that the command we ran was:
npx playwright test example.spec.tsThis can be broken down into 4 parts.
npx - Node package execute (the executor)
playwright - run the playwright package
test - get the playwright package to run the tests
example.spec.ts - run the tests defined in the spec.ts file
In our example we’re running all the tests in example.spec.ts file against all the browsers we installed when we setup the project. If you want to run against specific browsers use the –project switch. And if you want to see the results displayed in the Trace Viewer use the –ui switch. For example:
npx playwright test example.spec.ts --ui --project=chromiumIn this instance then, the Chromium test run results will be shown in the trace viewer view. You can come in and look at each of the tests and execute them from the trace viewer and see them executing within there.
Another option you have at your disposal, after the tests have run, is to generate a report. As you’ll see in the command prompt:
As you can see you can run this command:
npx playwright show-reportThis will generate a full html repoprt and open it in your default browser.
From this report you can drill down and look at specific steps or explore any errors that were generated.
That brings our final module in this series to a conclusion. Over 6 modules We’ve taken you from the initial install of Playwright through to executing your tests and generating a test report.
In future modules we’re going to cover lots more on inspectors, writing tests and debugging tests. More to follow soon.
