yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: center image diff (#8947)

Browse Source
This commit is contained in:
Pavel Feldman 2021-09-15 12:26:00 -07:00 committed by GitHub
parent 131239569d
commit fc972fcadd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/web/htmlReport/htmlReport.css
View File

@ -209,4 +209,6 @@ video, img {
box-shadow: var(--box-shadow-thick);
width: 80%;
margin: 20px auto;
min-width: 80%;
min-height: 300px;
}

53
src/web/htmlReport/htmlReport.tsx
View File

@ -163,28 +163,53 @@ const TestResultView: React.FC<{
result: TestResult,
}> = ({ result }) => {
const { screenshots, videos, attachmentsMap } = React.useMemo(() => {
const { screenshots, videos, otherAttachments, attachmentsMap } = React.useMemo(() => {
const attachmentsMap = new Map<string, TestAttachment>();
const attachments = result?.attachments || [];
const otherAttachments: TestAttachment[] = [];
const screenshots = attachments.filter(a => a.name === 'screenshot');
const videos = attachments.filter(a => a.name === 'video');
for (const a of attachments)
const knownNames = new Set(['screenshot', 'image', 'expected', 'actual', 'diff', 'video']);
for (const a of attachments) {
attachmentsMap.set(a.name, a);
return { attachmentsMap, screenshots, videos };
if (!knownNames.has(a.name))
otherAttachments.push(a);
}
return { attachmentsMap, screenshots, videos, otherAttachments };
}, [ result ]);
const expected = attachmentsMap.get('expected');
const actual = attachmentsMap.get('actual');
const diff = attachmentsMap.get('diff');
return <div className='test-result'>
{result.error && <ErrorMessage key={-1} error={result.error}></ErrorMessage>}
{result.steps.map((step, i) => <StepTreeItem key={i} step={step} depth={0}></StepTreeItem>)}
{attachmentsMap.has('expected') && attachmentsMap.has('actual') && <ImageDiff actual={attachmentsMap.get('actual')!} expected={attachmentsMap.get('expected')!} diff={attachmentsMap.get('diff')}></ImageDiff>}
{!!screenshots && <div className='test-overview-title'>Screenshots</div>}
{screenshots.map((a, i) => <img key={`screenshot-${i}`} src={a.path} />)}
{expected && actual && <div className='vbox'>
<ImageDiff actual={actual} expected={expected} diff={diff}></ImageDiff>
<AttachmentLink key={`expected`} attachment={expected}></AttachmentLink>
<AttachmentLink key={`actual`} attachment={actual}></AttachmentLink>
{diff && <AttachmentLink key={`diff`} attachment={diff}></AttachmentLink>}
</div>}
{!!screenshots.length && <div className='test-overview-title'>Screenshots</div>}
{screenshots.map((a, i) => {
return <div className='vbox'>
<img key={`screenshot-${i}`} src={a.path} />
<AttachmentLink key={`screenshot-link-${i}`} attachment={a}></AttachmentLink>
</div>;
})}
{!!videos.length && <div className='test-overview-title'>Videos</div>}
{videos.map((a, i) => <video key={`video-${i}`} controls>
<source src={a.path} type={a.contentType}/>
</video>)}
{!!result.attachments && <div className='test-overview-title'>Attachments</div>}
{result.attachments.map((a, i) => <AttachmentLink key={`attachment-${i}`} attachment={a}></AttachmentLink>)}
{videos.map((a, i) => <div className='vbox'>
<video key={`video-${i}`} controls>
<source src={a.path} type={a.contentType}/>
</video>
<AttachmentLink key={`video-link-${i}`} attachment={a}></AttachmentLink>
</div>)}
{!!otherAttachments && <div className='test-overview-title'>Attachments</div>}
{otherAttachments.map((a, i) => <AttachmentLink key={`attachment-${i}`} attachment={a}></AttachmentLink>)}
</div>;
};
@ -238,18 +263,18 @@ export const ImageDiff: React.FunctionComponent<{
tabs.push({
id: 'actual',
title: 'Actual',
render: () => <div className='image-preview'><img src={actual.path}/></div>
render: () => <img src={actual.path}/>
});
tabs.push({
id: 'expected',
title: 'Expected',
render: () => <div className='image-preview'><img src={expected.path}/></div>
render: () => <img src={expected.path}/>
});
if (diff) {
tabs.push({
id: 'diff',
title: 'Diff',
render: () => <div className='image-preview'><img src={diff.path}/></div>,
render: () => <img src={diff.path}/>
});
}
return <div className='vbox test-image-mismatch'>