This test framework is developed using Playwright, one of the top choices for front-end test developmenet that has been emerged recently. The chosen programming language is JavaScript
The framework contains the following tests:
- Functional tests
- Visual regression tests
- API tests
- Accessibility tests
commons
: Contains the classes (e.g. basePage TBD) and values (e.g. appUrl, file name, etc.) that can be used across the other classes and test filepages-objects
: each class represents a specific page in the application under test. Each page contains the elements and methods that interact with those elementstests
: Contains all the tests spec files and has the following foldersaccessibility-tests
: contains tests that automatically scan some accessibility issues of an entire page, or a specific part of a pageapi-tests
: contains tests to validate CRUD operations of API endpointsfunctional-tests
: contains tests to validate user flows of a web applicationvisual-regression-tests
: contains tests to validate the UI of an entire page, or a specific element. It has a sub-foldervisual-testing.spec.js-snapshot
containing snapshots basedline of those tests
playwright.config.js
: Used to configure the test runner on local as well as CI environment (e.g. parallel execution, browsers & viewports, etc.)
- Install node.js
- Clone this repository
- cd to project folder, run
npm init playwright@latest
and follow the instructions to install packages for playwright - Run all the tests under \tests folder using command
npx playwright test
- View test report by using command
npx playwright show-report
There are 2 worklows set up for this repository:
playwright.yml
is used to trigger the test run on every push or new PR tomaster
branch. The workflow is created by default when Playwright was being installed. When a push or new PR event occurs, the workflow will:- Create an latest ubuntu instance
- Checkout the repo
- Install node 16, Playwright and its dependencies and browsers
- Execute all tests
- Upload test reports if there is any failed tests
update-snapshots.yml
is used to trigger the test run on a PR when a comment/update-snapshots
is added to that PR.- The purpose of this condition is to update snapshots of visual regression tests when there is any changes in the PR that impact the snapshot comparision
- Thanks to Mazzarolo Matteo who wrote this article to explain in details what the workflow does
- Make sure the workflow has the permission to commit update (snapshots) to the PRs. Otherwise, it will fail at the last step
uses: stefanzweifel/git-auto-commit-action@v4