React App and Playwright in Action

Let's start testing our react app with Playwright.

We'll cover the following

Introduction

We are done with our Dockerfile and Docker job. Now we will try the following steps:

  • Build and serve the react app.
  • Test the react app using Playwright.

React-app directory structure:

The directory structures is shown in the figure given below.

widget

The e2e folder contains the playwright.config.js that set the browser, launch, and context options of tests. We are running the tests on Chromium web engine. However, you can also try Webkit or Mozilla firefox by changing the browser option in this file.

The test files are present in the specs folder inside the e2e directory; that’s why we run the npm run e2e command to run tests.

import { root } from './index';

const introSelector = '.App-header > p';
const linkSelector = '.App-link';

export const getIntroText = async () => {
  const app = await root();
  return await app.$eval(introSelector, el => el.innerText);
}

export const getLinkText = async () => {
  const app = await root();
  return await app.$eval(linkSelector, el => el.innerText);
}
React App

Test Files

  • specs/index.js The file consists of one test suite and one test case that tests the react app’s title.

  • specs/app.js In this file, different page objects are being tested.

The test suite is testing intro text and link text through two different test cases as can be seen in the snapshot of output given below.

Expected Output

The following series of images will help you get an idea of how the output will look.

React app Output

If everything goes well, we will see our react app running in the output terminal as shown in the image given below.

widget

On the other hand, the terminal session of building and serving the app is expected to look like the image given below.

App is running on port 3000 and can be checked by going to the link http://localhost:3000/.

The second half of our terminal will run the tests on react-app. This part of the terminal is expected to give output as shown in the image given below.

widget

The output terminal shows that our react-app is passing the Playwright tests.

That wraps up our course on Playwright.