zwinnapanda-playwright

Playwright tutorial repository for my channel: @zwinnapanda

Project requirements

Node 18+

How to setup the Project

Clone repository
Enter the project directory and execute npm install in order to install all the packages

Install Playwright with npm

Playwright test module: npm install @playwright/test
Playwright tools and drivers: npx playwright install

Starting e2e test execution

basic test execution: npx playwright test
run projects using node scripts npm run tests:chrome for chrome, firefox or webkit
it is possible to add more flags when using npm scripts with -- --<flag>

UI mode

Playwright 1.32 enables using interactive UI that can be run with npx playwright test --ui

Visual test execution

run tests using node scripts npm run tests:visual

Api test execution

run tests using node scripts npm run tests:api

Debugging

use --debug while debugging
use --trace on to enable trace
show trace either from html report or with npx playwright show-trace test-results/../trace.zip
use PW-watch with npx pw-watch --reporter @deploysentinel/playwright

Visual PDF tests

Using compare-pdf

Prerequisites:

sudo apt-get install graphicsmagick
sudo apt-get install imagemagick
sudo apt-get install ghostscript

In order to use ImageMagic policy.xml modification is needed Use sudo chmod 777 ~/etc/ImageMagick-6/policy.xml and modify policy.xml as follows: change rights="none" to rights"read|write" in line <policy domain="module" rights="read|write" pattern="PDF" />

install compare-pdf with npm install compare-pdf
npm run test:pdf

PDF content tests

npm run test:pdf
package used: pdf2json
this is why Node 18+ is needed

Lighthouse

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.

To run Lighhouse test use npm run lighthouse command, reports will be generated in html format in lighthouse-report directory with name "LighthouseReport.html"

To run Playwright test runner with Lighthouse test use npm run tests:audit command

ksenecki/zwinnapanda-playwright