Awesome
Next.js + Playwright
This example shows how to configure Playwright to work with Next.js.
Generate Coverage Report
npm i
npm run test
[MCR] Next.js V8 Coverage Report
┌────────────────┬──────────┬────────────┬──────────┬───────────┬──────────┬─────────────────┐
│ Name │ Bytes │ Statements │ Branches │ Functions │ Lines │ Uncovered Lines │
├────────────────┼──────────┼────────────┼──────────┼───────────┼──────────┼─────────────────┤
│ src/app │ │ │ │ │ │ │
│ ├ about │ │ │ │ │ │ │
│ │ ├ actions.ts │ 95.11 % │ 87.50 % │ 50.00 % │ 100.00 % │ 91.67 % │ 8 │
│ │ └ page.tsx │ 100.00 % │ 100.00 % │ │ 100.00 % │ 100.00 % │ │
│ ├ counter.tsx │ 86.80 % │ 81.82 % │ 66.67 % │ 100.00 % │ 73.91 % │ 12-17 │
│ ├ layout.tsx │ 100.00 % │ 100.00 % │ │ 100.00 % │ 100.00 % │ │
│ └ page.tsx │ 100.00 % │ 100.00 % │ │ 100.00 % │ 100.00 % │ │
├────────────────┼──────────┼────────────┼──────────┼───────────┼──────────┼─────────────────┤
│ Summary │ 94.68 % │ 88.46 % │ 62.50 % │ 100.00 % │ 90.79 % │ │
└────────────────┴──────────┴────────────┴──────────┴───────────┴──────────┴─────────────────┘
HTML coverage report will be found here: monocart-report/coverage/index.html
Tips
- change devtool to
source-mapin development, see next.config.js - run
next devwith envNODE_V8_COVERAGE=.v8-coverageandNODE_OPTIONS=--inspect=9229 - take client side coverage with e2e/fixtures.js
- take server side coverage manually with CDP, see global-teardown.js
Debugging port
The debugging port is 9229 by default
"scripts": {
"test:start": "cross-env NODE_V8_COVERAGE=.v8-coverage NODE_OPTIONS=--inspect=9229 next dev",
}
But we should use 9230 (9229 + 1) as the CDP port base on the following prompt:
[WebServer] Debugger listening on ws://127.0.0.1:9229/07ad38a2-2d5a-48df-a4de-07010e2d9b18
For help, see: https://nodejs.org/en/docs/inspector
[WebServer] Debugger listening on ws://127.0.0.1:9230/a3a46ea2-6994-43f2-b6a6-e5834362da4c
For help, see: https://nodejs.org/en/docs/inspector
[WebServer] the --inspect option was detected, the Next.js router server should be inspected at port 9230.
[WebServer] ▲ Next.js 14.1.0
[WebServer] - Local: http://localhost:3000
const client = await CDP({
port: 9230
});
If you are using a different port like 8112, then the CDP port should be 8113 (8112 + 1).