Playwright Guide
Playwright and the Playwright Library was chosen to run the end-to-end testing requirements for YaMa.
Using Playwright will allow for:
- Tests to be run across all browsers
- Tests to be run in parallel
- The identification of points of failure
Local testing will require the local installation of all of the Browsers you want to test for.
Our git action script to automate Playwright testing includes the additional installation of both MS Edge and Chrome.
Installation
Navigate to the root directory of your project and run the npm init command.
cd inside/your/project_folder
# Run this command to install the latest version of Playwright
npm init playwright@latest
# Need to install the following packages:
# create-playwright@latest
# Ok to proceed? (y) (Enter y to proceed)
# Getting started with writing end-to-end tests with Playwright:
# Initializing project in '.'
# ? Do you want to use TypeScript or JavaScript? … (use your arrow keys to select JavaScript and hit Enter)
TypeScript
▸ JavaScript
# ? Where to put your end-to-end tests? ‣ yama-tests (enter a name for your test here e.g.yama-tests and hit Enter)
# ? Add a GitHub Actions workflow? (Y/n) ‣ true (Enter y to proceed)
# ? Install Playwright operating system dependencies (requires sudo / root - can be done manually via sudo npx playwright install-deps')? (y/N) ‣ false (Enter n to proceed. We will do this later.)
# Note: Entering y will not work on an Arch Based Linux disrto as the automatic install script contains apt-get commands which do not work on Arch Based Linux distros.
Once you hit n, the installation process shall begin.
# Installing Playwright Test (npm install --save-dev @playwright/test)…
up to date, audited 341 packages in 751ms
27 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Downloading browsers (npx playwright install)…
Downloading Playwright build of chromium v978106 - 130.7 Mb [====================] 100% 0.0s
Playwright build of chromium v978106 downloaded to /$HOME/.cache/ms-playwright/chromium-978106
Downloading Playwright build of ffmpeg v1007 - 2.6 Mb [====================] 100% 0.0s
Playwright build of ffmpeg v1007 downloaded to /$HOME/.cache/ms-playwright/ffmpeg-1007
Downloading Playwright build of firefox v1319 - 75.5 Mb [====================] 100% 0.0s
Playwright build of firefox v1319 downloaded to /$HOME/.cache/ms-playwright/firefox-1319
Downloading Playwright build of webkit v1616 - 78.8 Mb [====================] 100% 0.0s
Playwright build of webkit v1616 downloaded to /$HOME/.cache/ms-playwright/webkit-1616
Writing playwright.config.js.
Writing .github/workflows/playwright.yml.
Writing yama-tests/example.spec.js.
Writing package.json.
✔ Success! Created a Playwright Test project at /$HOME/your-project-folder/yama
Inside that directory, you can run several commands:
npx playwright test
Runs the end-to-end tests.
npx playwright test --project=chromium
Runs the tests only on Desktop Chrome.
npx playwright test yama-tests/example.spec.js
Runs the tests of a specific file.
npx playwright test --debug
Runs the tests in debug mode.
We suggest that you begin by typing:
npx playwright test
And check out the following files:
- ./yama-tests/example.spec.js - Example end-to-end test
- ./playwright.config.js - Playwright Test configuration
Visit https://playwright.dev/docs/intro for more information. ✨
Happy hacking! 🎭
➜ user@name ~/your-project-folder/yama git:(main) ✗
How to run a test locally
From your project folder, let's follow the suggestion and run a test using npx playwright test.
To see the results of the test enter npx playwright show-report.
Your Browser will now open and show you the results from the Playwright test you just ran.
Manjaro users
First we need to install the browser dependencies for Manjaro from the Arch repository, as they are only included for Ubuntu when using the sudo npx playwright install-deps command.
Browser Dependency 1
yay -S enchant1.6
loading packages...
resolving dependencies...
looking for conflicting packages...
Packages (1) enchant1.6-1.6.1-9
Total Installed Size: 0.18 MiB
:: Proceed with installation? [Y/n]
(1/1) checking keys in keyring [########################################] 100%
(1/1) checking package integrity [########################################] 100%
(1/1) loading package files [########################################] 100%
(1/1) checking for file conflicts [########################################] 100%
(1/1) checking available disk space [########################################] 100%
:: Processing package changes...
(1/1) installing enchant1.6 [########################################] 100%
:: Running post-transaction hooks...
(1/2) Arming ConditionNeedsUpdate...
(2/2) Refreshing PackageKit...
➜ user@name ~
Browser Dependency 2
yay -S icu66
:: Checking for conflicts...
:: Checking for inner conflicts...
[Aur:1] icu66-66.1-1
:: (1/1) Downloaded PKGBUILD: icu66
1 icu66 (Build Files Exist)
==> Diffs to show?
==> [N]one [A]ll [Ab]ort [I]nstalled [No]tInstalled or (1 2 3, 1-3, ^4)
==> 1
==> Proceed with install? [Y/n]
loading packages...
resolving dependencies...
looking for conflicting packages...
Packages (1) icu66-66.1-1
Total Installed Size: 32.15 MiB
:: Proceed with installation? [Y/n]
(1/1) checking keys in keyring [########################################] 100%
(1/1) checking package integrity [########################################] 100%
(1/1) loading package files [########################################] 100%
(1/1) checking for file conflicts [########################################] 100%
(1/1) checking available disk space [########################################] 100%
:: Processing package changes...
(1/1) installing icu66 [########################################] 100%
:: Running post-transaction hooks...
(1/2) Arming ConditionNeedsUpdate...
(2/2) Refreshing PackageKit...
➜ user@name ~
Browser Dependency 3
yay -S libwebp052
:: Checking for conflicts...
:: Checking for inner conflicts...
[Aur:1] libwebp052-0.5.2-2
:: (1/1) Downloaded PKGBUILD: libwebp052
1 libwebp052 (Build Files Exist)
==> Diffs to show?
==> [N]one [A]ll [Ab]ort [I]nstalled [No]tInstalled or (1 2 3, 1-3, ^4)
==> 1
==> Proceed with install? [Y/n]
loading packages...
resolving dependencies...
looking for conflicting packages...
Packages (1) libwebp052-0.5.2-2
Total Installed Size: 0.93 MiB
:: Proceed with installation? [Y/n]
(1/1) checking keys in keyring [########################################] 100%
(1/1) checking package integrity [########################################] 100%
(1/1) loading package files [########################################] 100%
(1/1) checking for file conflicts [########################################] 100%
(1/1) checking available disk space [########################################] 100%
:: Processing package changes...
(1/1) installing libwebp052 [########################################] 100%
Optional dependencies for libwebp052
freeglut: vwebp viewer [installed]
:: Running post-transaction hooks...
(1/2) Arming ConditionNeedsUpdate...
(2/2) Refreshing PackageKit...
➜ user@name ~
Now that we have the correct browser dependencies installed for Manjaro we can run the test command npx playwright test.
➜ user@name ~/your-project-folder/yama git:(main) ✗ npx playwright test
Running 75 tests using 3 workers
Slow test file: [webkit] › example.spec.js (25s)
Slow test file: [firefox] › example.spec.js (22s)
Slow test file: [chromium] › example.spec.js (15s)
Consider splitting slow test files to speed up parallel execution
75 passed (25s)
To open last HTML report run:
npx playwright show-report
➜ user@name ~/your-project-folder/yama git:(main) ✗
To see the results of the browser tests, run npx playwright show-report.
A browser window will automatically open at the address indicated and display your test results.
➜ user@name ~/your-project-folder/yama git:(main) ✗ npx playwright show-report
Serving HTML report at http://127.0.0.1:9323. Press Ctrl+C to quit.
^C
➜ user@name ~/your-project-folder/yama git:(main) ✗