Basic Overview of Web Apps With Playwright

In this lesson, we'll explore Playwright further and learn how you can test your web apps with Playwright.

We'll cover the following

Test Your Web App Using Playwright

Playwright can be used to test any web application across Chrome, Apple Safari, and Mozilla Firefox. It means that you can also test your own web application using Playwright. The testing can be done at different stages. Test files can be added from the start to test every page of the website.

React App Example

In this chapter, we are using the react app to demonstrate the working of Playwright. Let’s start playing with the react app.

The project repository of the react app we have used in this lesson is attached below.

react-app-playwright.zip

This repository can also be found at Github https://github.com/KyleADay/react-app-playwright, but some changes are done in Playwright test files to make it working on Educative platform.

The playwright.config.js file present in the e2e directory has been changed to test the app on Headless Chrome to avoid errors.

Moreover, it is essential to disable the sandbox to avoid errors like “The application has failed to initialize.” The error that you can encounter while testing this react app will most probably look like the one shown in the image given below.

Sandbox error
Sandbox error

Required Changes

  • Set headless to true.
  • Add --no-sandbox flag.
import { chromium, firefox, webkit, devices } from 'playwright';
const iPhone = devices['iPhone 6'];
module.exports = {
    browserType: chromium,
    launchConfig: {
        headless: true,
        slowMo: 10,
        args: ["--no-sandbox", "--disable-setuid-sandbox"]
    },
    contextConfig: {
        viewport: iPhone.viewport,
        userAgent: iPhone.userAgent
    }
};

You can also test the app on other browser engines like Mozilla Firefox and Webkit.

For every particular browser engine, you will have to install the required dependencies accordingly.

Now, Let’s build a Dockerfile to see the react app in action.