No files match the filter.
}
+ ;
+};
+
+const CoverageRow: React.FC<{
+ node: CoverageTreeNode,
+ depth: number,
+ collapsed: boolean,
+ toggle: (path: string) => void,
+ params: URLSearchParams,
+}> = ({ node, depth, collapsed, toggle, params }) => {
+ return , [coverage, file.fileId], undefined);
+ const lines = React.useMemo(() => content ? annotateCoverage(content) : [], [content]);
+ const relativePath = rootPath && file.path.startsWith(rootPath + '/') ? file.path.slice(rootPath.length + 1) : file.path;
+
+ const listParams = new URLSearchParams(params);
+ listParams.delete(kCoverageFileParam);
+
+ return <>
+
+ Source is not available for {file.path}.
}
+ {content && content.source && <>
+
+ {Object.entries(kSegmentTitles).map(([kind, title]) => {title} )}
+ {Object.entries(kMarkerTitles).map(([marker, title]) => {marker} {title}
+
+
+
+ {lines.map(line =>
+
+
+ {line.number}
+ {line.count === undefined ? '' : line.count + 'x'}
+
+ {line.markers.map((marker, index) => {marker} )}
+ {line.segments.map((segment, index) => segment.kinds.length ?
+ 'coverage-segment-' + kind).join(' ')} title={segment.kinds.map(kind => kSegmentTitles[kind]).join(', ')}>{segment.text} :
+ {segment.text} )}
+
+ ;
+};
+
+export function coverageFileHref(params: URLSearchParams, fileId: string): string {
+ const fileParams = new URLSearchParams(params);
+ fileParams.set(kCoverageFileParam, fileId);
+ return hashHref(fileParams);
+}
+
+function filterTree(node: CoverageTreeNode, filter: string): CoverageTreeNode {
+ if (!filter)
+ return node;
+ const children: CoverageTreeNode[] = [];
+ for (const child of node.children) {
+ if (child.fileId) {
+ if (child.path.toLowerCase().includes(filter))
+ children.push(child);
+ continue;
+ }
+ const filtered = filterTree(child, filter);
+ if (filtered.children.length)
+ children.push(filtered);
+ }
+ return { ...node, children };
+}
diff --git a/packages/coverage-report/src/icons.tsx b/packages/coverage-report/src/icons.tsx
new file mode 100644
index 0000000000000..c2ac891f3ab74
--- /dev/null
+++ b/packages/coverage-report/src/icons.tsx
@@ -0,0 +1,36 @@
+/*
+ Copyright (c) Microsoft Corporation.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+import './colors.css';
+import './common.css';
+
+export const search = () => {
+ return
+ ;
+};
+
+export const downArrow = () => {
+ return
+ ;
+};
+
+export const rightArrow = () => {
+ return
+ ;
+};
diff --git a/packages/coverage-report/src/index.tsx b/packages/coverage-report/src/index.tsx
new file mode 100644
index 0000000000000..23d6606790b65
--- /dev/null
+++ b/packages/coverage-report/src/index.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import './colors.css';
+import './common.css';
+import { CoverageView } from './coverageView';
+import { ZipReport } from '@web/zipReport';
+import { applyTheme } from '@web/theme';
+import logo from '@web/assets/playwright-logo.svg';
+
+import type { LoadedCoverage } from './loadedCoverage';
+import type { CoverageReport } from '@isomorphic/istanbulCoverage';
+
+const link = document.createElement('link');
+link.rel = 'shortcut icon';
+link.href = logo;
+document.head.appendChild(link);
+
+const CoverageLoader: React.FC = () => {
+ const [coverage, setCoverage] = React.useState();
+ React.useEffect(() => {
+ const zipCoverage = new ZipReport('playwrightCoverageBase64', 'coverage.json');
+ zipCoverage.load().then(() => setCoverage(zipCoverage));
+ }, []);
+ return , so that the
+// report can be opened from a file:// url and links stay shareable.
+export function useHashParams(): URLSearchParams {
+ const [params, setParams] = React.useState(() => currentHashParams());
+ React.useEffect(() => {
+ const listener = () => setParams(currentHashParams());
+ window.addEventListener('hashchange', listener);
+ return () => window.removeEventListener('hashchange', listener);
+ }, []);
+ return params;
+}
+
+export function hashHref(params: URLSearchParams): string {
+ return '#?' + params.toString();
+}
+
+function currentHashParams(): URLSearchParams {
+ return new URLSearchParams(window.location.hash.slice(1).replace(/^\?/, ''));
+}
diff --git a/packages/coverage-report/src/loadedCoverage.ts b/packages/coverage-report/src/loadedCoverage.ts
new file mode 100644
index 0000000000000..402cec5b7bc56
--- /dev/null
+++ b/packages/coverage-report/src/loadedCoverage.ts
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { fileCoverageSummary, addCoverageSummary, emptyCoverageSummary } from '@isomorphic/istanbulCoverage';
+
+import type { CoverageFile, CoverageReport } from '@isomorphic/istanbulCoverage';
+
+export interface LoadedCoverage {
+ json(): CoverageReport;
+ entry(name: string): Promise;
+}
+
+export function coverageFileEntry(fileId: string): string {
+ return `coverage/${fileId}.json`;
+}
+
+export function createMemoryCoverage(files: CoverageFile[]): LoadedCoverage {
+ const report: CoverageReport = { files: [], summary: emptyCoverageSummary() };
+ const entries = new Map();
+ files.forEach((file, index) => {
+ const fileId = 'file-' + index;
+ const summary = fileCoverageSummary(file.coverage);
+ entries.set(coverageFileEntry(fileId), file);
+ report.files.push({ fileId, path: file.path, summary });
+ addCoverageSummary(report.summary, summary);
+ });
+ return {
+ json: () => report,
+ entry: async name => entries.get(name),
+ };
+}
diff --git a/packages/coverage-report/tests/index.html b/packages/coverage-report/tests/index.html
new file mode 100644
index 0000000000000..0279894a6dfd7
--- /dev/null
+++ b/packages/coverage-report/tests/index.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+ Component Gallery
+
+
+
+
+ Select a story…
+
+
+
+
+
diff --git a/packages/coverage-report/tests/main.tsx b/packages/coverage-report/tests/main.tsx
new file mode 100644
index 0000000000000..a7395d304e974
--- /dev/null
+++ b/packages/coverage-report/tests/main.tsx
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { flushSync } from 'react-dom';
+import { createRoot, type Root } from 'react-dom/client';
+import '../src/common.css';
+import packageJSON from '../package.json';
+
+const stories = import.meta.glob('../src/**/*.story.{tsx,jsx}');
+const storyId = (file: string) => packageJSON.name + '/' + file.replace(/^(\.\.\/)+src\//, '').replace(/\.story\.\w+$/, '');
+
+async function resolveStory(id: string): Promise | undefined> {
+ const sep = id.lastIndexOf('/');
+ const [path, name] = [id.slice(0, sep), id.slice(sep + 1)];
+ const file = Object.keys(stories).find(f => storyId(f) === path || storyId(f).endsWith('/' + path));
+ const mod = (file && await stories[file]()) as Record | undefined;
+ return mod?.[name] ?? mod?.default;
+}
+
+const wrapperElement = document.getElementById('wrapper')!;
+let root: Root | undefined;
+
+(window as any).mount = async ({ story, props }: { story: string, props?: Record }) => {
+ const Story = await resolveStory(story);
+ if (!Story)
+ throw new Error(`Unknown story: ${story}`);
+ // Reuse the root so that update() reconciles and preserves state.
+ root ??= createRoot(wrapperElement);
+ // flushSync so that a render error rejects the promise instead of being swallowed.
+ flushSync(() => root!.render(
+
+
+ ));
+};
+
+(window as any).unmount = async () => {
+ root?.unmount();
+ root = undefined;
+};
+
+async function listStories(): Promise {
+ const lists = await Promise.all(Object.entries(stories).map(async ([file, loadModule]) => {
+ const mod = await loadModule() as Record;
+ return Object.keys(mod).filter(name => typeof mod[name] === 'function').map(name => `${storyId(file)}/${name}`);
+ }));
+ return lists.flat().sort();
+}
+
+const pickerElement = document.getElementById('picker') as HTMLSelectElement;
+let pickerPopulated = false;
+async function populatePicker() {
+ if (pickerPopulated)
+ return;
+ pickerPopulated = true;
+ for (const id of await listStories())
+ pickerElement.add(new Option(id, id));
+}
+// Populate on mouseenter/focus rather than on click, because an already-open
+// select popup does not refresh when options are added.
+pickerElement.addEventListener('mouseenter', () => void populatePicker());
+pickerElement.addEventListener('focus', () => void populatePicker());
+pickerElement.addEventListener('change', () => {
+ if (pickerElement.value)
+ void (window as any).mount({ story: pickerElement.value });
+});
diff --git a/packages/coverage-report/tests/stories.d.ts b/packages/coverage-report/tests/stories.d.ts
new file mode 100644
index 0000000000000..e1cc84e946f77
--- /dev/null
+++ b/packages/coverage-report/tests/stories.d.ts
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// This file is generated by ../../html-reporter/tests/storyTypes.ts, do not edit manually.
+
+type StoriesOf = { [K in keyof Mod & string as `${Prefix}/${K}`]: Mod[K] };
+
+declare module '@playwright/test' {
+ interface Stories extends
+ StoriesOf<'coverage-report/coverageView', typeof import('../src/coverageView.story')> {}
+}
+
+export {};
diff --git a/packages/coverage-report/vite.config.ts b/packages/coverage-report/vite.config.ts
new file mode 100644
index 0000000000000..9931b96f05cf5
--- /dev/null
+++ b/packages/coverage-report/vite.config.ts
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { bundle } from '../html-reporter/bundle';
+import { storyTypes } from '../html-reporter/tests/storyTypes';
+import packageJSON from './package.json';
+import path from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ base: '',
+ plugins: [
+ react(),
+ bundle(),
+ storyTypes({ prefix: packageJSON.name, src: path.resolve(__dirname, 'src'), outFile: path.resolve(__dirname, 'tests/stories.d.ts') }),
+ ],
+ resolve: {
+ alias: {
+ '@web': path.resolve(__dirname, '../web/src'),
+ '@isomorphic': path.resolve(__dirname, '../isomorphic'),
+ },
+ },
+ build: {
+ outDir: path.resolve(__dirname, '../playwright-core/lib/vite/coverageReport'),
+ emptyOutDir: true,
+ assetsInlineLimit: 100000000,
+ chunkSizeWarningLimit: 100000000,
+ cssCodeSplit: false,
+ rollupOptions: {
+ output: {
+ manualChunks: undefined,
+ inlineDynamicImports: true,
+ entryFileNames: 'report.js',
+ assetFileNames: (assetInfo) => assetInfo.names.some(n => n.endsWith('.css')) ? 'report.css' : '[name][extname]',
+ },
+ },
+ },
+});
diff --git a/packages/html-reporter/src/index.tsx b/packages/html-reporter/src/index.tsx
index e113660e21af5..7038b76970fec 100644
--- a/packages/html-reporter/src/index.tsx
+++ b/packages/html-reporter/src/index.tsx
@@ -15,16 +15,12 @@
*/
import type { HTMLReport } from './types';
-import type * as zip from '@zip.js/zip.js';
-// @ts-ignore
-import * as zipImport from '@zip.js/zip.js/lib/zip-no-worker-inflate.js';
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import './colors.css';
import type { LoadedReport } from './loadedReport';
import { ReportView } from './reportView';
-// @ts-ignore
-const zipjs = zipImport as typeof zip;
+import { ZipReport } from '@web/zipReport';
import logo from '@web/assets/playwright-logo.svg';
import { SearchParamsProvider } from './links';
@@ -38,12 +34,8 @@ document.head.appendChild(link);
const ReportLoader: React.FC = () => {
const [report, setReport] = React.useState();
React.useEffect(() => {
- const zipReport = new ZipReport();
- zipReport.load().then(() => {
- // Drop node after consumption
- document.getElementById('playwrightReportBase64')?.remove();
- setReport(zipReport);
- });
+ const zipReport = new ZipReport('playwrightReportBase64', 'report.json');
+ zipReport.load().then(() => setReport(zipReport));
}, []);
return
();
- private _json!: HTMLReport;
-
- async load() {
- const zipURI = (document.getElementById('playwrightReportBase64') as HTMLTemplateElement).content.textContent;
- const zipReader = new zipjs.ZipReader(new zipjs.Data64URIReader(zipURI), { useWebWorkers: false });
- for (const entry of await zipReader.getEntries())
- this._entries.set(entry.filename, entry);
- this._json = await this.entry('report.json') as HTMLReport;
- }
-
- json(): HTMLReport {
- return this._json;
- }
-
- async entry(name: string): Promise {
- const reportEntry = this._entries.get(name);
- const writer = new zipjs.TextWriter() as zip.TextWriter;
- await reportEntry!.getData!(writer);
- return JSON.parse(await writer.getData());
- }
-}
diff --git a/packages/isomorphic/istanbulCoverage.ts b/packages/isomorphic/istanbulCoverage.ts
index 7c0111c6f4371..ddaceda564f6c 100644
--- a/packages/isomorphic/istanbulCoverage.ts
+++ b/packages/isomorphic/istanbulCoverage.ts
@@ -99,3 +99,82 @@ export function mergeIstanbulCoverage(into: Map, d
}
}
}
+
+export type CoverageMetric = { covered: number, total: number };
+
+export type CoverageSummary = {
+ statements: CoverageMetric;
+ branches: CoverageMetric;
+ functions: CoverageMetric;
+ lines: CoverageMetric;
+};
+
+export function emptyCoverageSummary(): CoverageSummary {
+ return {
+ statements: { covered: 0, total: 0 },
+ branches: { covered: 0, total: 0 },
+ functions: { covered: 0, total: 0 },
+ lines: { covered: 0, total: 0 },
+ };
+}
+
+export function fileCoverageSummary(fileCov: IstanbulFileCoverage): CoverageSummary {
+ const summary = emptyCoverageSummary();
+ countHits(summary.statements, Object.values(fileCov.s));
+ countHits(summary.functions, Object.values(fileCov.f));
+ for (const counts of Object.values(fileCov.b))
+ countHits(summary.branches, counts);
+ countHits(summary.lines, lineCoverage(fileCov).values());
+ return summary;
+}
+
+export function addCoverageSummary(into: CoverageSummary, summary: CoverageSummary) {
+ for (const key of ['statements', 'branches', 'functions', 'lines'] as const) {
+ into[key].covered += summary[key].covered;
+ into[key].total += summary[key].total;
+ }
+}
+
+export function coveragePercent(metric: CoverageMetric): number {
+ return metric.total ? metric.covered / metric.total * 100 : 100;
+}
+
+export function formatCoveragePercent(metric: CoverageMetric): string {
+ return coveragePercent(metric).toFixed(2) + '%';
+}
+
+// Line coverage is derived from statements, as nyc does.
+export function lineCoverage(fileCov: IstanbulFileCoverage): Map {
+ const lines = new Map();
+ for (const [key, statement] of Object.entries(fileCov.statementMap)) {
+ const line = statement.start.line;
+ const count = fileCov.s[key] || 0;
+ lines.set(line, Math.max(lines.get(line) || 0, count));
+ }
+ return lines;
+}
+
+function countHits(metric: CoverageMetric, counts: Iterable) {
+ for (const count of counts) {
+ ++metric.total;
+ if (count > 0)
+ ++metric.covered;
+ }
+}
+
+export type CoverageFileSummary = {
+ fileId: string;
+ path: string;
+ summary: CoverageSummary;
+};
+
+export type CoverageReport = {
+ files: CoverageFileSummary[];
+ summary: CoverageSummary;
+};
+
+export type CoverageFile = {
+ path: string;
+ source?: string;
+ coverage: IstanbulFileCoverage;
+};
diff --git a/packages/playwright/src/reporters/coverage.ts b/packages/playwright/src/reporters/coverage.ts
index f392f5b18d06f..b4ec7868dbd52 100644
--- a/packages/playwright/src/reporters/coverage.ts
+++ b/packages/playwright/src/reporters/coverage.ts
@@ -17,12 +17,16 @@
import fs from 'fs';
import path from 'path';
-import { mergeIstanbulCoverage, sortedIstanbulCoverage } from '@isomorphic/istanbulCoverage';
+import * as yazl from 'yazl';
+import { addCoverageSummary, emptyCoverageSummary, fileCoverageSummary, formatCoveragePercent, lineCoverage, mergeIstanbulCoverage, sortedIstanbulCoverage } from '@isomorphic/istanbulCoverage';
+import { calculateSha1 } from '@utils/crypto';
+import { toPosixPath } from '@utils/fileUtils';
import { ZipFile } from '@utils/zipFile';
import { terminalScreen } from './base';
+import { appendZipDataTemplate, inlineViteApp } from './htmlUtils';
import { resolveReporterOutputPath } from '../util';
-import type { IstanbulCoverage, IstanbulFileCoverage } from '@isomorphic/istanbulCoverage';
+import type { CoverageFile, CoverageMetric, CoverageReport, IstanbulCoverage, IstanbulFileCoverage } from '@isomorphic/istanbulCoverage';
import type { CommonReporterOptions } from './base';
import type { ReporterV2 } from './reporterV2';
import type { TestCase, TestResult } from '../../types/testReporter';
@@ -96,80 +100,48 @@ class CoverageReporter implements ReporterV2 {
const mergedJson = sortedIstanbulCoverage(coverage);
await fs.promises.writeFile(path.join(outputDir, 'coverage-final.json'), JSON.stringify(mergedJson));
await fs.promises.writeFile(path.join(outputDir, 'lcov.info'), lcovReport(mergedJson));
- const hasHtml = this._tryWriteHtmlReport(mergedJson, outputDir);
+ const report = await this._writeHtmlReport(mergedJson, outputDir);
- const summary = computeSummary(mergedJson);
- const lines = [
+ const { summary } = report;
+ writeLine([
``,
- `Code coverage (${coverage.size} files):`,
+ `Code coverage (${report.files.length} files):`,
` statements: ${formatMetric(summary.statements)}`,
` branches: ${formatMetric(summary.branches)}`,
` functions: ${formatMetric(summary.functions)}`,
` lines: ${formatMetric(summary.lines)}`,
`Coverage report written to ${path.relative(process.cwd(), outputDir)}`,
- ];
- if (!hasHtml)
- lines.push(`For an HTML report, install istanbul-lib-coverage, istanbul-lib-report and istanbul-reports, or run 'npx nyc report --temp-dir=${path.relative(process.cwd(), outputDir)} --reporter=html'.`);
- writeLine(lines.join('\n'));
+ ].join('\n'));
}
- // Istanbul report libraries are not shipped with Playwright, use the project's if any.
- private _tryWriteHtmlReport(mergedJson: IstanbulCoverage, outputDir: string): boolean {
- try {
- const resolveFrom = (name: string) => require.resolve(name, { paths: [this._options.configDir] });
- const libCoverage = require(resolveFrom('istanbul-lib-coverage'));
- const libReport = require(resolveFrom('istanbul-lib-report'));
- const reports = require(resolveFrom('istanbul-reports'));
- const context = libReport.createContext({
- dir: outputDir,
- coverageMap: libCoverage.createCoverageMap(mergedJson),
- });
- reports.create('html').execute(context);
- return true;
- } catch {
- return false;
- }
- }
-}
-
-type Metric = { covered: number, total: number };
-
-function computeSummary(mergedJson: IstanbulCoverage) {
- const statements: Metric = { covered: 0, total: 0 };
- const branches: Metric = { covered: 0, total: 0 };
- const functions: Metric = { covered: 0, total: 0 };
- const lines: Metric = { covered: 0, total: 0 };
- for (const fileCov of Object.values(mergedJson)) {
- countHits(statements, Object.values(fileCov.s));
- countHits(functions, Object.values(fileCov.f));
- for (const counts of Object.values(fileCov.b))
- countHits(branches, counts);
- countHits(lines, lineCoverage(fileCov).values());
+ private async _writeHtmlReport(mergedJson: IstanbulCoverage, outputDir: string): Promise {
+ const report: CoverageReport = { files: [], summary: emptyCoverageSummary() };
+ const dataZipFile = new yazl.ZipFile();
+ const sources = await Promise.all(Object.keys(mergedJson).map(filePath => this._readSource(filePath)));
+ Object.entries(mergedJson).forEach(([filePath, coverage], index) => {
+ const fileId = calculateSha1(filePath).slice(0, 20);
+ const summary = fileCoverageSummary(coverage);
+ report.files.push({ fileId, path: toPosixPath(filePath), summary });
+ addCoverageSummary(report.summary, summary);
+ const file: CoverageFile = { path: toPosixPath(filePath), source: sources[index], coverage };
+ dataZipFile.addBuffer(Buffer.from(JSON.stringify(file)), `coverage/${fileId}.json`);
+ });
+ dataZipFile.addBuffer(Buffer.from(JSON.stringify(report)), 'coverage.json');
+
+ const appFolder = path.join(require.resolve('playwright-core'), '..', 'lib', 'vite', 'coverageReport');
+ const reportIndexFile = path.join(outputDir, 'index.html');
+ await fs.promises.writeFile(reportIndexFile, await inlineViteApp(appFolder));
+ await appendZipDataTemplate(reportIndexFile, dataZipFile, 'playwrightCoverageBase64');
+ return report;
}
- return { statements, branches, functions, lines };
-}
-
-function countHits(metric: Metric, counts: Iterable) {
- for (const count of counts) {
- ++metric.total;
- if (count > 0)
- ++metric.covered;
- }
-}
-function lineCoverage(fileCov: IstanbulFileCoverage): Map {
- const lines = new Map();
- for (const [key, statement] of Object.entries(fileCov.statementMap)) {
- const line = statement.start.line;
- const count = fileCov.s[key] || 0;
- lines.set(line, Math.max(lines.get(line) || 0, count));
+ private async _readSource(filePath: string): Promise {
+ return fs.promises.readFile(path.resolve(this._options.configDir, filePath), 'utf8').catch(() => undefined);
}
- return lines;
}
-function formatMetric(metric: Metric) {
- const percent = metric.total ? (metric.covered / metric.total * 100).toFixed(2) : '100.00';
- return `${percent}% (${metric.covered}/${metric.total})`;
+function formatMetric(metric: CoverageMetric) {
+ return `${formatCoveragePercent(metric)} (${metric.covered}/${metric.total})`;
}
function lcovReport(mergedJson: IstanbulCoverage): string {
diff --git a/packages/playwright/src/reporters/html.ts b/packages/playwright/src/reporters/html.ts
index 30abcc8254e21..8925d27ae3ef3 100644
--- a/packages/playwright/src/reporters/html.ts
+++ b/packages/playwright/src/reporters/html.ts
@@ -17,7 +17,6 @@
import fs from 'fs';
import os from 'os';
import path from 'path';
-import { Transform } from 'stream';
import colors from 'colors/safe';
import mime from 'mime';
@@ -37,6 +36,7 @@ import { extractZip } from '@utils/third_party/extractZip';
declare const __PW_HMR__: boolean;
import { CommonReporterOptions, formatError, formatResultFailure, internalScreen } from './base';
+import { appendZipDataTemplate, inlineViteApp } from './htmlUtils';
import * as babel from '../transform/babelBundle';
import { resolveReporterOutputPath, stripAnsiEscapes } from '../util';
@@ -44,7 +44,6 @@ import type { ReportConfigureParams, ReportEndParams, ReporterV2 } from './repor
import type { HtmlReporterOptions as HtmlReporterConfigOptions, Metadata, TestAnnotation } from '../../types/test';
import type * as api from '../../types/testReporter';
import type { HTMLReport, HTMLReportOptions, Location, Stats, TestAttachment, TestCase, TestCaseSummary, TestFile, TestFileSummary, TestResult, TestStep } from '@html-reporter/types';
-import type { TransformCallback } from 'stream';
import type { ZipFile } from 'yazl';
type TestEntry = {
@@ -452,28 +451,13 @@ class HtmlBuilder {
fs.promises.copyFile(path.join(appFolder, 'report.css'), path.join(this._reportFolder, 'report.css')),
]);
} else {
- let html = await fs.promises.readFile(path.join(appFolder, 'index.html'), 'utf-8');
- const [js, css] = await Promise.all([
- fs.promises.readFile(path.join(appFolder, 'report.js'), 'utf-8'),
- fs.promises.readFile(path.join(appFolder, 'report.css'), 'utf-8'),
- ]);
- html = html.replace(/`);
- html = html.replace(/data:application/zip;base64,');
- await new Promise((resolve, reject) => {
- this._dataZipFile.end(undefined, () => {
- this._dataZipFile.outputStream
- .pipe(new Base64Encoder())
- .pipe(fs.createWriteStream(filePath, { flags: 'a' })).on('close', resolve).on('error', reject);
- });
- });
- fs.appendFileSync(filePath, ' ');
+ await appendZipDataTemplate(filePath, this._dataZipFile, 'playwrightReportBase64');
}
private _addDataFile(fileName: string, data: any) {
@@ -722,32 +706,6 @@ const addStats = (stats: Stats, delta: Stats): Stats => {
return stats;
};
-class Base64Encoder extends Transform {
- private _remainder: Buffer | undefined;
-
- override _transform(chunk: any, encoding: BufferEncoding, callback: TransformCallback): void {
- if (this._remainder) {
- chunk = Buffer.concat([this._remainder, chunk]);
- this._remainder = undefined;
- }
-
- const remaining = chunk.length % 3;
- if (remaining) {
- this._remainder = chunk.slice(chunk.length - remaining);
- chunk = chunk.slice(0, chunk.length - remaining);
- }
- chunk = chunk.toString('base64');
- this.push(Buffer.from(chunk));
- callback();
- }
-
- override _flush(callback: TransformCallback): void {
- if (this._remainder)
- this.push(Buffer.from(this._remainder.toString('base64')));
- callback();
- }
-}
-
function isTextContentType(contentType: string) {
return contentType.startsWith('text/') || contentType.startsWith('application/json');
}
diff --git a/packages/playwright/src/reporters/htmlUtils.ts b/packages/playwright/src/reporters/htmlUtils.ts
new file mode 100644
index 0000000000000..6da387e8fb0ab
--- /dev/null
+++ b/packages/playwright/src/reporters/htmlUtils.ts
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { Transform } from 'stream';
+
+import type { TransformCallback } from 'stream';
+import type { ZipFile } from 'yazl';
+
+export async function inlineViteApp(appFolder: string): Promise {
+ let html = await fs.promises.readFile(path.join(appFolder, 'index.html'), 'utf-8');
+ const [js, css] = await Promise.all([
+ fs.promises.readFile(path.join(appFolder, 'report.js'), 'utf-8'),
+ fs.promises.readFile(path.join(appFolder, 'report.css'), 'utf-8'),
+ ]);
+ html = html.replace(/`);
+ html = html.replace(/data:application/zip;base64,`);
+ await new Promise((resolve, reject) => {
+ zipFile.end(undefined, () => {
+ zipFile.outputStream
+ .pipe(new Base64Encoder())
+ .pipe(fs.createWriteStream(filePath, { flags: 'a' })).on('close', resolve).on('error', reject);
+ });
+ });
+ fs.appendFileSync(filePath, ' ');
+}
+
+class Base64Encoder extends Transform {
+ private _remainder: Buffer | undefined;
+
+ override _transform(chunk: any, encoding: BufferEncoding, callback: TransformCallback): void {
+ if (this._remainder) {
+ chunk = Buffer.concat([this._remainder, chunk]);
+ this._remainder = undefined;
+ }
+
+ const remaining = chunk.length % 3;
+ if (remaining) {
+ this._remainder = chunk.slice(chunk.length - remaining);
+ chunk = chunk.slice(0, chunk.length - remaining);
+ }
+ chunk = chunk.toString('base64');
+ this.push(Buffer.from(chunk));
+ callback();
+ }
+
+ override _flush(callback: TransformCallback): void {
+ if (this._remainder)
+ this.push(Buffer.from(this._remainder.toString('base64')));
+ callback();
+ }
+}
diff --git a/packages/web/src/zipReport.ts b/packages/web/src/zipReport.ts
new file mode 100644
index 0000000000000..644f2e7a4498b
--- /dev/null
+++ b/packages/web/src/zipReport.ts
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// @ts-ignore
+import * as zipImport from '@zip.js/zip.js/lib/zip-no-worker-inflate.js';
+
+import type * as zip from '@zip.js/zip.js';
+// @ts-ignore
+const zipjs = zipImport as typeof zip;
+
+// Reads the report data from the base64 zip embedded into the page.
+export class ZipReport {
+ private _entries = new Map();
+ private _json!: T;
+ private _templateId: string;
+ private _jsonName: string;
+
+ constructor(templateId: string, jsonName: string) {
+ this._templateId = templateId;
+ this._jsonName = jsonName;
+ }
+
+ async load() {
+ const template = document.getElementById(this._templateId) as HTMLTemplateElement;
+ const zipReader = new zipjs.ZipReader(new zipjs.Data64URIReader(template.content.textContent), { useWebWorkers: false });
+ for (const entry of await zipReader.getEntries())
+ this._entries.set(entry.filename, entry);
+ this._json = await this.entry(this._jsonName) as T;
+ // Drop node after consumption
+ template.remove();
+ }
+
+ json(): T {
+ return this._json;
+ }
+
+ async entry(name: string): Promise {
+ const reportEntry = this._entries.get(name);
+ const writer = new zipjs.TextWriter() as zip.TextWriter;
+ await reportEntry!.getData!(writer);
+ return JSON.parse(await writer.getData());
+ }
+}
diff --git a/tests/playwright-test/coverage.spec.ts b/tests/playwright-test/coverage.spec.ts
index f00a17b582ef1..05e801aae16b6 100644
--- a/tests/playwright-test/coverage.spec.ts
+++ b/tests/playwright-test/coverage.spec.ts
@@ -17,6 +17,7 @@
import fs from 'fs';
import { test, expect } from './playwright-test-fixtures';
import { parseTraceCoverage } from '../config/utils';
+import { utils } from '../../packages/playwright-core/lib/coreBundle';
const coverageHelper = `
const makeCoverage = (file, s0) => ({
@@ -127,6 +128,45 @@ test('should aggregate coverage with the coverage reporter', async ({ runInlineT
expect(result.output).toContain('Code coverage (2 files)');
expect(result.output).toContain('statements: 50.00% (2/4)');
+ expect(fs.existsSync(test.info().outputPath('coverage-report', 'index.html'))).toBe(true);
+});
+
+test('should generate html coverage report', async ({ runInlineTest, page }) => {
+ const result = await runInlineTest({
+ 'playwright.config.ts': `
+ module.exports = {
+ use: { trace: { mode: 'on', coverage: true } },
+ reporter: [['dot'], ['coverage', { outputDir: 'coverage-report' }]],
+ };
+ `,
+ 'src/app.js': `function foo() {\nif (a) { b(); }\n}\n`,
+ 'a.test.ts': `
+ import { test, expect } from '@playwright/test';
+ ${coverageHelper}
+ test('first', async ({ page }) => {
+ await page.setContent(coverageScript('src/app.js', 5));
+ });
+ `,
+ });
+ expect(result.exitCode).toBe(0);
+
+ const server = utils.serveFolder(test.info().outputPath('coverage-report'));
+ await server.start();
+ try {
+ await page.goto(server.urlPrefix('precise'));
+ await expect(page.getByText('Coverage report')).toBeVisible();
+ await expect(page.getByTestId('coverage-metric-statements')).toContainText('50.00%');
+ await expect(page.getByTestId('coverage-file')).toHaveText([/app\.js/]);
+ await page.getByRole('link', { name: 'app.js' }).click();
+ const source = page.getByTestId('coverage-source');
+ await expect(source.locator('tr')).toHaveCount(3);
+ await expect(source.locator('[data-line="1"] .coverage-line-count')).toHaveText('5x');
+ await expect(source.locator('[data-line="2"] .coverage-line-count')).toHaveText('0x');
+ await expect(source.locator('[data-line="2"] .coverage-branch-marker')).toHaveText('E');
+ await expect(source.locator('[data-line="2"] .coverage-segment-statement')).toHaveText('if (a) { b(); }');
+ } finally {
+ await server.stop();
+ }
});
test('should warn when no coverage was collected', async ({ runInlineTest }) => {
diff --git a/tsconfig.json b/tsconfig.json
index 6526645a8fbd5..51d422cee3a28 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -38,7 +38,7 @@
"skipLibCheck": true,
},
"compileOnSave": true,
- "files": ["packages/html-reporter/tests/stories.d.ts"],
+ "files": ["packages/html-reporter/tests/stories.d.ts", "packages/coverage-report/tests/stories.d.ts"],
"include": ["packages"],
"exclude": [
"packages/*/lib",
diff --git a/utils/build/build.js b/utils/build/build.js
index 68de8fbcf6fae..8397a9a654065 100644
--- a/utils/build/build.js
+++ b/utils/build/build.js
@@ -955,7 +955,7 @@ const pkgSizePlugin = {
// in other code paths (e.g. HtmlBuilder.build() reads lib/vite/htmlReport/
// and lib/vite/traceViewer/), so we always keep the static build alongside
// HMR. Recorder is not yet HMR'd.
-const webPackages = ['html-reporter', 'recorder', 'trace-viewer', 'dashboard'];
+const webPackages = ['html-reporter', 'coverage-report', 'recorder', 'trace-viewer', 'dashboard'];
for (const webPackage of webPackages) {
steps.push(new ProgramStep({
command: process.execPath,
diff --git a/utils/check_deps.js b/utils/check_deps.js
index dda7ea3836785..e73d0bf31166c 100644
--- a/utils/check_deps.js
+++ b/utils/check_deps.js
@@ -39,6 +39,7 @@ const depsCache = {};
async function checkDeps() {
await innerCheckDeps(path.join(packagesDir, 'html-reporter'));
+ await innerCheckDeps(path.join(packagesDir, 'coverage-report'));
await innerCheckDeps(path.join(packagesDir, 'protocol'));
await innerCheckDeps(path.join(packagesDir, 'recorder'));
await innerCheckDeps(path.join(packagesDir, 'trace-viewer'));