How to use Playwright with Angular for e2e testing

Angular officially announced the deprecation of Protractor in December 2020 with the release of Angular version 11. They recommended to use other tools offered by the community. Two of the popular choice among these are

• Cypress
• Playwright

In this blog post we learn how to setup playwright with Angular and write e2e test cases.

Install Playwright

Install playwright using below command. If you use Yarn or pnpm, similar commands can be found here

$ npm init playwright@latest

Run the install command and select the following to get started:

• Choose between TypeScript or JavaScript (select TypeScript)
• Name of your Tests folder (name as e2e)
• Install Playwright browsers (default is true)

What’s Installed​

Playwright will download the browsers needed as well as create the following files.

playwright.config.ts
package.json
package-lock.json
e2e/
  example.spec.ts
e2e-examples/
  demo-todo-app.spec.ts

You can customize its configuration, including selecting the browsers to use, by modifying the playwright.config.ts file. If you’re integrating testing with an existing project, the package dependencies will be directly added to your `package.json` file. To start with basic testing, you can use the sample test provided in the e2e folder. You can find some example on https://playwright.dev/docs/writing-tests#first-test

Run Tests

By default tests will be run on all 3 browsers, chromium, firefox and webkit using 3 workers. This can be configured in the playwright.config file.

npx playwright test

Tests are run in headless mode meaning no browser will open up when running the tests. Results of the tests and test logs will be shown in the terminal. You can customize the running command and add more options in NPM scripts on package.json

HTML Test Reports​

Once your test has finished running a HTML Reporter will have been created which shows you a full report of your tests allowing you to filter the report by browsers, passed tests, failed tests, skipped tests and flaky tests. You can click on each test and explore the test’s errors as well as each step of the test. By default, the HTML report is opened automatically if some of the tests failed.

npx playwright show-report