1
1
mirror of https://github.com/microsoft/playwright.git synced 2024-12-14 21:53:35 +03:00

feat(html reporter): show test source ()

This commit is contained in:
Dmitry Gozman 2021-09-01 21:15:11 -07:00 committed by GitHub
parent 42e44f888b
commit 798f894f47
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 58 additions and 18 deletions
src
test/reporters
web/htmlReport

View File

@ -22,7 +22,7 @@ import { formatError, formatResultFailure } from './base';
import { serializePatterns, toPosixPath } from './json';
export type JsonStats = { expected: number, unexpected: number, flaky: number, skipped: number };
export type JsonLocation = Location;
export type JsonLocation = Location & { sha1?: string };
export type JsonStackFrame = { file: string, line: number, column: number, sha1?: string };
export type JsonConfig = Omit<FullConfig, 'projects'> & {
@ -158,13 +158,14 @@ class HtmlReporter {
fs.writeFileSync(path.join(this._reportFolder, 'report.json'), JSON.stringify(output));
}
private _relativeLocation(location: Location | undefined): Location {
private _relativeLocation(location: Location | undefined): JsonLocation {
if (!location)
return { file: '', line: 0, column: 0 };
return {
file: toPosixPath(path.relative(this.config.rootDir, location.file)),
line: location.line,
column: location.column,
sha1: this._sourceProcessor.copySourceFile(location.file),
};
}
@ -312,7 +313,7 @@ class SourceProcessor {
return { stack: frames, preview };
}
private copySourceFile(file: string): string | undefined {
copySourceFile(file: string): string | undefined {
let sha1: string | undefined;
if (this.sha1Cache.has(file)) {
sha1 = this.sha1Cache.get(file);

View File

@ -52,7 +52,7 @@
padding: 5px;
overflow: auto;
margin: 20px 0;
flex: none;
flex: auto;
}
.status-icon {
@ -177,3 +177,7 @@
text-decoration: underline;
cursor: pointer;
}
.test-details-column {
overflow-y: auto;
}

View File

@ -183,6 +183,21 @@ const TestResultDetails: React.FC<{
test: JsonTestCase | undefined,
result: JsonTestResult | undefined,
}> = ({ test, result }) => {
const [selectedTab, setSelectedTab] = React.useState('errors');
const [source, setSource] = React.useState<SourceProps>({ text: '', language: 'javascript' });
React.useEffect(() => {
(async () => {
if (!test || !test.location.sha1)
return;
try {
const response = await fetch('resources/' + test.location.sha1);
const text = await response.text();
setSource({ text, language: 'javascript', highlight: [{ line: test.location.line, type: 'paused' }], revealLine: test.location.line });
} catch (e) {
setSource({ text: '', language: 'javascript' });
}
})();
}, [test]);
const { screenshots, video, attachmentsMap } = React.useMemo(() => {
const attachmentsMap = new Map<string, JsonAttachment>();
const attachments = result?.attachments || [];
@ -194,20 +209,40 @@ const TestResultDetails: React.FC<{
}, [ result ]);
if (!result)
return <div></div>;
return <div>
{result.failureSnippet && <div className='test-overview-title'>Test error</div>}
{result.failureSnippet && <div className='error-message' dangerouslySetInnerHTML={{ __html: new ansi2html({ colors: ansiColors }).toHtml(escapeHTML(result.failureSnippet.trim())) }}></div>}
{attachmentsMap.has('expected') && attachmentsMap.has('actual') && <ImageDiff actual={attachmentsMap.get('actual')!} expected={attachmentsMap.get('expected')!} diff={attachmentsMap.get('diff')}></ImageDiff>}
{!!screenshots.length && <div className='test-overview-title'>Screenshots</div>}
{screenshots.map(a => <div className='image-preview'><img src={'resources/' + a.sha1} /></div>)}
{!!video.length && <div className='test-overview-title'>Video</div>}
{video.map(a => <div className='image-preview'>
<video controls>
<source src={'resources/' + a.sha1} type={a.contentType}/>
</video>
</div>)}
{!!result.attachments && <div className='test-overview-title'>Attachments</div>}
{result.attachments.map(a => <AttachmentLink attachment={a}></AttachmentLink>)}
return <div className='vbox'>
<TabbedPane selectedTab={selectedTab} setSelectedTab={setSelectedTab} tabs={[
{
id: 'errors',
title: 'Errors',
render: () => {
return <div style={{ overflow: 'auto' }}>
<div className='error-message' dangerouslySetInnerHTML={{ __html: new ansi2html({ colors: ansiColors }).toHtml(escapeHTML(result.failureSnippet?.trim() || '')) }}></div>
{attachmentsMap.has('expected') && attachmentsMap.has('actual') && <ImageDiff actual={attachmentsMap.get('actual')!} expected={attachmentsMap.get('expected')!} diff={attachmentsMap.get('diff')}></ImageDiff>}
</div>;
}
},
{
id: 'results',
title: 'Results',
render: () => {
return <div style={{ overflow: 'auto' }}>
{screenshots.map(a => <div className='image-preview'><img src={'resources/' + a.sha1} /></div>)}
{video.map(a => <div className='image-preview'>
<video controls>
<source src={'resources/' + a.sha1} type={a.contentType}/>
</video>
</div>)}
{!!result.attachments && <div className='test-overview-title'>Attachments</div>}
{result.attachments.map(a => <AttachmentLink attachment={a}></AttachmentLink>)}
</div>;
}
},
{
id: 'source',
title: 'Source',
render: () => <Source text={source.text} language={source.language} highlight={source.highlight} revealLine={source.revealLine}></Source>
}
]}></TabbedPane>
</div>;
};