Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bgotink/playwright-coverage
Track coverage in playwright tests
https://github.com/bgotink/playwright-coverage
Last synced: 6 days ago
JSON representation
Track coverage in playwright tests
- Host: GitHub
- URL: https://github.com/bgotink/playwright-coverage
- Owner: bgotink
- License: mit
- Created: 2021-09-19T22:51:39.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-11-26T22:31:38.000Z (29 days ago)
- Last Synced: 2024-12-17T01:58:40.402Z (9 days ago)
- Language: TypeScript
- Size: 2.31 MB
- Stars: 36
- Watchers: 5
- Forks: 16
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# `@bgotink/playwright-coverage` [](https://npm.im/@bgotink/playwright-coverage)
Report coverage on playwright tests using v8 coverage, without requiring any instrumentation.
## Usage
Install this package
```bash
yarn add -D @bgotink/playwright-coverage
```
Then add the reporter to your playwright configuration:
```ts
const config = {
// ...
reporter: [
['list'],
[
'@bgotink/playwright-coverage',
/** @type {import('@bgotink/playwright-coverage').CoverageReporterOptions} */ {
// Path to the root files should be resolved from, most likely your repository root
sourceRoot: __dirname,
// Files to ignore in coverage, useful
// - if you're testing the demo app of a component library and want to exclude the demo sources
// - or part of the code is generated
// - or if you're running into any of the other many reasons people have for excluding files
exclude: ['path/to/ignored/code/**'],
// Directory in which to write coverage reports
resultDir: path.join(__dirname, 'results/e2e-coverage'),
// Configure the reports to generate.
// The value is an array of istanbul reports, with optional configuration attached.
reports: [
// Create an HTML view at /index.html
['html'],
// Create /coverage.lcov for consumption by tooling
[
'lcovonly',
{
file: 'coverage.lcov',
},
],
// Log a coverage summary at the end of the test run
[
'text-summary',
{
file: null,
},
],
],
// Configure watermarks, see https://github.com/istanbuljs/nyc#high-and-low-watermarks
// watermarks: {},
},
],
],
};
```
Now replace all calls to `@playwright/test`'s `test` variable with a variant that tracks coverage.
The easiest way to do this is by importing `test` from `@bgotink/playwright-coverage` instead.
```diff
-import {expect, test} from '@playwright/test';
+import {expect, test} from '@bgotink/playwright-coverage';
```
If you're already using a different `test` function, e.g. if you're using [`@ngx-playwright/test`](https://github.com/bgotink/ngx-playwright), you can add coverage tracking using the `mixinFixtures` function:
```ts
import {test as base} from '@ngx-playwright/test'; // or wherever your test function comes from
import {mixinFixtures as mixinCoverage} from '@bgotink/playwright-coverage';
export const test = mixinCoverage(base);
```
Now replace all usage of `test` with the function export defined there, and coverage will be tracked.
## How does it work?
The fixtures registered in `test` or via `mixinFixtures` hook into created [`Page`s](https://playwright.dev/docs/api/class-page) to track javascript coverage with v8. The coverage data is added as attachment to every test.
Upon completion of all tests, the reporter merges all generated coverage files into one and then converts the v8 coverage format into the coverage format used by istanbul. The istanbul data is then passed into the reports of `istanbul-reports`.
## Common issues
**The HTML report shows errors saying the source files couldn't be read**
This means the reporter is looking in the wrong place because playwright and the server process are using paths relative to a different working folder.
Try setting the `sourceRoot` folder. If you need more control over the actual path of the files, pass a `rewritePath` property in the options:
```ts
{
sourceRoot: __dirname,
/**
* Modify the paths of files on which coverage is reported
*
* The input is an object with two properties:
* - absolutePath
* - relativePath
* both are strings and they represent the absoslute and relative
* path of the file as computed based on the source map.
*
* Return the rewritten path. If nothing is returned, `absolutePath`
* is used instead.
*/
rewritePath: ({absolutePath, relativePath}) => {
return absolutePath;
},
}
```
**Coverage is empty**
Did you perhaps use `@playwright/test`'s own `test` function?
If you don't use a `test` function created using `mixinCoverage`, coverage won't be tracked and the reporter won't have anything to report on.
## Status
This project is very experimental. It has been proven to work on one angular application, i.e. with webpack with the unmodified configuration angular applies to it.
## License
Licensed under the MIT license, see `LICENSE.md`.