playwright-react-typescript-jest-example

a react + typescript + tailwindcss application that uses jest + playwright.

This repo is a POC on how to introduce playwright into an application to meet E2E testing needs.

Table of contents:

• problem
• why
• running the example
• solution
• future

problem

It is common for many projects to use Cypress for writing E2E tests in order to cover all functionality for users.

What are E2E tests?

Typically these will run the entire application (both frontend and backend) and your test will interact with the app just like a typical user would

Kent C Dodds - Static vs Unit vs Integration vs E2E Testing for Frontend Apps

While Cypress has recently started to include multi-browser support, there's still an issue of veryifying scenarios across browser engines such as webkit for Apple products.

We need a way to easily verify and test behaviors across browsers. If we have a user scenario that fails for on iOS devices, we need to be able to write a regression test for it.

why

playwright offers testing capabilities across multiple browsers and environments. Unlike Selenium Webdriver, playwright has an easier to grok API that allows for a better developer experience.

running the example

After cloning this repo run the following command, in the project directory, to install the project dependencies:

npm i

After installing the dependencies, start the application with the following command:

npm start

Here is what the application looks like running:

A form component with basic validation.

Note: we are using tailwindcss media queries to change the background color of the <section> element, as demonstrated below:

 <! –– showing only relevant classnames ––>
<section className="bg-purple-300 sm:bg-green-300 md:bg-blue-300 lg:bg-pink-300 flex pb-3">
  ...
</section

This allows us to see different backgrounds based on viewport size, something we can declare in our tests with playwright.

Running the tests

In a new tab inside your terminal, run the tests with the following command:

npm run test

The output should look like the following:

> [email protected] test /playwright-react-typescript-jest-example
> jest

 PASS  e2e/iphone.spec.ts
 PASS  e2e/smoke.spec.ts (7.213s)
 PASS  e2e/form-success.spec.ts (8.548s)
 PASS  e2e/form-error.spec.ts (8.548s)

Test Suites: 4 passed, 4 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        9.941s
Ran all test suites.

You can additionally find screenhots taken of each test in the e2e/screenshots/ directory.

The command npm run purge:ss will remove all PNG images from the screenshots directory, additionally the command npm run test:clean will remove all images then run the tests again.

solution

(I won't give up on you)

Actions

Most assertions have their selectors defined as the following:

const label = await page.$eval("css=label", el => el.textContent);
...
expect(label).toEqual("Username");

This allows us to predefine DOM elements we want to assert against whether in the test file itself or as page objects.

However if content is not static and the DOM changes based on user interaction or API requests we need to make sure our selectors are asynchronous, you can see an example of this in the test file e2e/form-success.spec.ts:

expect(await page.$eval("css=h1", el => el.textContent)).toEqual('Thank you for Submitting');

We can also determine what devices and browsers we want to test, as noted in the e2e/iphone.spec.ts file:

const { webkit, devices } = require("playwright");
const iPhone11 = devices["iPhone 11 Pro"];
// skipping contents of file
const browser = await webkit.launch();
const context = await browser.newContext({
  viewport: iPhone11.viewport,
  userAgent: iPhone11.userAgent
});

Now we have a proper environment to write tests for an iPhone using the webkit browser engine.

The following is the screenshots of the e2e/iphone.spec.ts test:

Now compare the above to the firefox run of the e2e/form-error.spec.ts test:

Note the purple versus pink background colors. Depending on the devices we assert against, our app is able to display different colors for our responsive design choices.

playwright can allow us to see the visual inconsistencies between styles on environments and responsive devices.

future

Will include more elaborate actions to showcase how to use the playwright API.

May include examples of how integrate screenshot capabilities with libraries to do image testing with pixelmatch.