@liquidlight/playwright-framework
v0.3.0-beta.2
Published
Liquid Light Playwright Framework
Downloads
40
Readme
Playwright Framework
This is a wrapper/meta framework around Playwright - an end-to-end testing framework. This is a central configuration repository which allows us to update settings and config for all our projects.
[!NOTE] More documentation can be found in the docs folder
Get Started
Install
npm i @liquidlight/playwright-framework -D --save
Playwright Config
Create a playwright.config.ts
with the following contents:
import { defineConfig } from '@playwright/test';
const config = require('@liquidlight/playwright-framework')([
{
label: 'Site name',
envs: {
local: 'https://liquidlight.ddev.site',
production: 'https://www.liquidlight.co.uk',
},
project: {
testDir: './path/to/site/files/'
}
}
]);
- A Playwright project is made for each default device (e.g. the above config will make two PLaywright Projects)
- Everything passed into the
project
object inside the site will be passed directly to each project - If you pass
devices
as an array of strings, a project will be made per device (or you can not use any device by passing an empty array)
More details on how the configuration works can be found in the docs. If you are running a TYPO3 site, it's worth checking out the TYPO3 documentation.
[!TIP] By setting local & production domains (and other), the framework can use these domains for your tests without needing to specify the full URL
Your first test
In the testDir
specified, create a new file with the following contents. This will test the accessibility of your homepage.
import { test } from '@playwright/test';
import { assertPageIsAccessible } from '@liquidlight/playwright-framework/tests';
/**
* Ensure our base page template is accessible
*/
test('"Tests" page is accessible', async ({ page }, testInfo) => {
await page.goto('/');
await assertPageIsAccessible(page, testInfo);
});
Run the test
./node_modules/.bin/playwright test
By default, this will use the local
environment (unless that domain hasn't been specified, then it uses production).
Change the environment
If you wish to use the production domain (or any other domain set in the envs
object) you can by modifying the PLAYWRIGHT_ENV
var or passing in an --env
flag
For example:
PLAYWRIGHT_ENV=staging ./node_modules/.bin/playwright test
or
./node_modules/.bin/playwright test --env=staging
.gitignore
Add the following to your .gitignore
file:
# Playwright Tests
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
/testbed/
*test.ts-snapshots/
Notes
- The
/testbed/
is optional, see the testbed docs for more info - The
*test.ts-snapshots/
is option, depending if you want to commit your snapshots/screenshots
Scripts
If you wish to set up npm run test
, you can add the following to your package.json
{
"scripts": {
"test": "playwright test --grep-invert @vr",
"test:vr": "playwright test --grep @vr",
"test:update": "playwright test --update-snapshots --grep @snapshot",
"test:open": "monocart show-report test-results/report.html"
},
}
Notes
- The
@vr
stands for visual regression - if you tag any visual regression tests with this, it can save you from running them every time - The
test:update
will inly update jobs tagged with@snapshot
- Utilise
npx playwright codegen
to help generate tests
Releasing
When it comes to releasing, run the following:
npx eslint .
andnpx eslint . --fix
npm run build
- Update the version number in
package.json
npm update
& commit resultgit tag [version]
git push origin main --tags
npm publish