Setting up Microsoft Playwright
In this lesson we demo how you can quickly get setup and start using Microsoft Playwright for cross browser Web Application testing.
Instructor: [0:00] Getting started with Microsoft Playwright is pretty easy. We can open up the terminal and run NPM in it Playwright and provide a name for our application which we are calling Egg Playwright demo, and we'd be good to go.
[0:12] We get to choose a few options, whether we want to use JavaScript or TypeScript. We're going to select TypeScript. Where do we want our tests to exist? We'll use the default of the tests folder, and whether we want to add GitHub actions.
[0:24] We will go with the default of yes for this as well. Now, this will install all of the dependencies and set up a new folder with Playwright ready to go. Once the installation is complete, we can CD into this Egg Playwright demo folder and open it up within our IDE.
[0:39] The first thing that we look at within this template folder is the package.json. As you can see, the only dependency that we need is @playwright/test. Now, Playwright test is configured with this file called playwright.config.ts. Within this config file, you can see that our test directory is pointing to the test folder, which is something that we selected when we created the template.
[1:01] Now, in my mind, there are two key value propositions of playwright. First is its JavaScript first approach. You don't need to install something like Java, which is required for selenium.
[1:11] Second is its support for cross-browser testing. Our playwright.config.ts contains the section called projects, which specifies the process that we will be testing.
[1:21] Our tests will run under Chromium, Firefox, and WebKit, which is Safari. Now, the tests that we will be running are all contained within this file called example.spec.ts.
[1:31] The contents of this file are not particularly important for this getting set up, and we will look at APIs of different things. For example, page, locators, actions such as fill and press, and expectations in future lessons.
[1:44] Now, one more thing that got set up for us by Playwright in it is our GitHub action. We can find this in the .github/workflows/playwright.yml file.
[1:53] This file is pretty simple. Fundamentally, it will run some jobs on the main and the master branch, and the key job that it will run is this command npx playwright test.
[2:03] This is exactly the command that we can run locally to run playwright tests ourself. We open up the terminal and execute npx playwright test.
[2:12] As you can see, since we have three different browsers that we are testing, Playwright automatically splits it into three separate workers. Now, once the test run completes, it generates the results into this folder called playwright report.
[2:25] We can open this up within our browser ourselves or we can execute this command npx playwright show report for playwright to open this up for us.
[2:34] Within the report, we can see the same test for different browsers, and we can dive into the individual tests by clicking on them. Within the test, we can see the commands that were executed by Playwright. We can click on the individual commands to see where they originated from within our code. For example, this particular locator.press originated from line 17 of our example spec file.
[2:57] Now, as mentioned, these are exactly the tests that will run by GitHub actions if you push our code to GitHub. We can dive into an individual test run by clicking the GitHub status icon next to any commit.
[3:10] This particular test completed successfully and we can find the results within the summary tab in the attached artifacts for this particular test run.