Adding Playwright to your Web App

Instructor: [0:00] To demo adding Playwright to an existing web application, we create a new one using create react app. Now, even though we are using CRA, the process of adding Playwright will be independent of using CRA or Next, or even React.

[0:14] With this brand spanking new project created, we simply CD into that directory and open it up within our IDE. What you will test, of course, depends on the application that you are testing. This particular application can be started in development mode by executing npm run start.

[0:30] Just as an example, let's identify a few things that we can test within this app. One thing that we can test, is to ensure that this image with the alt attribute pointing to logo is being displayed on screen. Another thing that we can potentially ensure, is that there is an anchor tag with the text learn react, that contains a link to reactjs.org.

[0:51] With that discussion of this particular web application out of the way, let's look at how we can add Playwright to start testing these things. To add Playwright tests to an existing project, you simply run the command npm init playwright. It'll ask you the usual questions and we will use defaults for all, which is TypeScript the test folder and true for GitHub actions.

[1:11] This initialization does the exact same things that we've already seen when we created a brand-new Playwright project. That is, it's installed the Playwright test package and save that within our package.json. Created a playwright.config.ts file for us.

[1:25] Created a GitHub action and created an example test within the tests folder. Now, testing your web application is not that different from testing any other website out there. The key difference is, that you need to run a command in order to start your website locally.

[1:40] Fortunately, there is already an option for that within playwright.config.ts. This config option will fundamentally execute the command npm run start. Keep that running in the background and will start executing your tests once this port becomes occupied.

[1:56] Of course, you might need to modify the command in the port to match what you need for your web application. Fortunately, for us today, this is exactly what create react app needs. For our tests, we will delete the example spec as you won't be needing that and create a new one for ourselves called demo.spec.ts.

[2:15] Within our spec file, we bring in the usual suspects from playwright/test, which is test and expect. Here's a useful tip. Instead of navigating again and again with page.goto

[2:25] In each test, we can use test.beforeeach to create a section of code that is going to be invoked before each test.

[2:32] Additionally, we can group multiple tests that are testing different features of the same thing using test.describe. As promised, the first thing that we will test is to ensure that the logo is visible.

[2:43] We create allocated to the logo by using a simple CSS attribute by selecting an image tag such that the alt attribute is logo. Now, we've looked at locators before, but what's more interesting about this test is this spec statement.

[2:57] In addition to supporting the usual measures for example, to equal or to contain, to match snapshot, Playwright expands the matches with what are known as async web first matches. Awaiting, this expect to be visible, we'll do two things.

[3:12] It will keep waiting for the logo to be present. Then once the locator does resolve, it will keep waiting for the logo to eventually become visible. This automatic waiting and retrying results in much less flaky tests than you might have experienced previously in traditional end-to-end testing frameworks.

[3:28] The next thing that we wanted to test, which is that the link should be valid is going to be pretty similar. We get an access to the link with the locator of A, such that it contains the text learn react. Now, has-text is a pretty neat feature provided by Playwright locators.

[3:44] This is something that you will probably use quite often in order to make your selection life easier. Beyond that, we use the same to be visible assertion, and then we introduce one more session called to have attribute, which can be used to verify that a particular attribute has a particular value within the DOM.

[4:01] That's it for our test cases. In order to run the tests, we don't need to do anything special. We open up the terminal and execute npx playwright test just like we've always done. This will automatically start the dev server and then execute the tests against that.

[4:16] To see our test results, we can execute npx playwright show report. As you can see, both our tests work perfectly fine across all three browsers.