playwright-e2e-coverage-report

Caution - not extensively tested. Share report files to help improve the solution.

Description

This package is a hacky solution to an inconvenience found.

The incovenience

Playwright end2end test report structure uses suites and specs object array and code coverage report structure uses statement, branch and function mapping. This left me unable to use places like codecov etc. to be used as e2e coverage reporting places as well.

Where did I try it ?

In a CI where playwright e2e test report is generated which then is converted into code coverage format and uploaded to codecov.

Dashboard gymnastics

Here e2e tests are thought of as function coverage and are therefore under fnMap key of the final coverage report.

In dashboards, the header and their meanings would need some mental gymnastics as they are set to code coverage formats example -

| e2etest | coverage | | :-----------------: | :-----------: | | file | file | | total no of tests | tracked lines | | passed | covered | | not implemented | partial | | fail | missed |

NOTE: Only supports playwright json reporter.

Usage

In your CI pipeline eg. github actions add a step after the one which generates playwright test report.

Place after the step that generates playwright e2e test report.

- name: Convert E2E Report to Coverage Report
  run : |
    npm install playwright-e2e-coverage-report
    wget https://raw.githubusercontent.com/MandarDevarshi/playwright-e2e-coverage-report/master/scripts/reportConverter.js	
    chmod u+x reportConverter.js
    node ./reportConverter.js

The playwright report named e2eresults.json is to be generated or made available at project root by default, i.e when checked out in a CI. To make changes to report location and name set it in the script file reportConverter.js by saving it in your repository and removing the fetching of the script in the CI job.

Useful links

• Coverage JSON format
• Istanbul Alternate Reporters
• Playwright JSON Reporter