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

chore: move attachments link to step body (#34196)

Browse Source
This commit is contained in:
Simon Knott 2025-01-13 10:07:54 +01:00 committed by GitHub
parent 19c935cde7
commit a33659f2a8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/html-reporter/src/links.css
View File

@ -60,6 +60,11 @@
color: var(--color-scale-orange-6); color: var(--color-scale-orange-6);
border: 1px solid var(--color-scale-orange-4); border: 1px solid var(--color-scale-orange-4);
} }
.label-color-gray {
background-color: var(--color-scale-gray-0);
color: var(--color-scale-gray-6);
border: 1px solid var(--color-scale-gray-4);
}
} }
@media(prefers-color-scheme: dark) { @media(prefers-color-scheme: dark) {
@ -93,6 +98,11 @@
color: var(--color-scale-orange-2); color: var(--color-scale-orange-2);
border: 1px solid var(--color-scale-orange-4); border: 1px solid var(--color-scale-orange-4);
} }
.label-color-gray {
background-color: var(--color-scale-gray-9);
color: var(--color-scale-gray-2);
border: 1px solid var(--color-scale-gray-4);
}
} }
.attachment-body { .attachment-body {

24
packages/html-reporter/src/testResultView.tsx
View File

@ -134,7 +134,7 @@ export const TestResultView: React.FC<{
</div>)} </div>)}
</AutoChip></Anchor>} </AutoChip></Anchor>}
{!!otherAttachments.size && <AutoChip header='Attachments' revealOnAnchorId={otherAttachmentAnchors}> {!!otherAttachments.size && <AutoChip header='Attachments' revealOnAnchorId={otherAttachmentAnchors} dataTestId='attachments'>
{[...otherAttachments].map((a, i) => {[...otherAttachments].map((a, i) =>
<Anchor key={`attachment-link-${i}`} id={`attachment-${result.attachments.indexOf(a)}`}> <Anchor key={`attachment-link-${i}`} id={`attachment-${result.attachments.indexOf(a)}`}>
<AttachmentLink attachment={a} result={result} openInNewTab={a.contentType.startsWith('text/html')} /> <AttachmentLink attachment={a} result={result} openInNewTab={a.contentType.startsWith('text/html')} />
@ -176,15 +176,27 @@ const StepTreeItem: React.FC<{
}> = ({ test, step, result, depth }) => { }> = ({ test, step, result, depth }) => {
return <TreeItem title={<span aria-label={step.title}> return <TreeItem title={<span aria-label={step.title}>
<span style={{ float: 'right' }}>{msToString(step.duration)}</span> <span style={{ float: 'right' }}>{msToString(step.duration)}</span>
{step.attachments.length > 0 && <a style={{ float: 'right' }} title='link to attachment' href={testResultHref({ test, result, anchor: `attachment-${step.attachments[0]}` })} onClick={evt => { evt.stopPropagation(); }}>{icons.attachment()}</a>}
{statusIcon(step.error || step.duration === -1 ? 'failed' : 'passed')} {statusIcon(step.error || step.duration === -1 ? 'failed' : 'passed')}
<span>{step.title}</span> <span>{step.title}</span>
{step.count > 1 && <> ✕ <span className='test-result-counter'>{step.count}</span></>} {step.count > 1 && <> ✕ <span className='test-result-counter'>{step.count}</span></>}
{step.location && <span className='test-result-path'>— {step.location.file}:{step.location.line}</span>} {step.location && <span className='test-result-path'>— {step.location.file}:{step.location.line}</span>}
</span>} loadChildren={step.steps.length + (step.snippet ? 1 : 0) ? () => { </span>} loadChildren={step.steps.length + (step.snippet ? 1 : 0) ? () => {
const children = step.steps.map((s, i) => <StepTreeItem key={i} step={s} depth={depth + 1} result={result} test={test} />); const snippet = step.snippet ? [<TestErrorView testId='test-snippet' key='line' error={step.snippet}/>] : [];
if (step.snippet) const steps = step.steps.map((s, i) => <StepTreeItem key={i} step={s} depth={depth + 1} result={result} test={test} />);
children.unshift(<TestErrorView testId='test-snippet' key='line' error={step.snippet}/>); const attachments = step.attachments.map(attachmentIndex => (
return children; <a key={'' + attachmentIndex}
href={testResultHref({ test, result, anchor: `attachment-${attachmentIndex}` })}
style={{ paddingLeft: depth * 22 + 4, textDecoration: 'none' }}
>
<span
style={{ margin: '8px 0 0 8px', padding: '2px 10px', cursor: 'pointer' }}
className='label label-color-gray'
title={`see "${result.attachments[attachmentIndex].name}"`}
>
{icons.attachment()}{result.attachments[attachmentIndex].name}
</span>
</a>
));
return snippet.concat(steps, attachments);
} : undefined} depth={depth}/>; } : undefined} depth={depth}/>;
}; };

10
tests/playwright-test/reporter-html.spec.ts
View File

@ -932,9 +932,10 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await showReport(); await showReport();
await page.getByRole('link', { name: 'passing' }).click(); await page.getByRole('link', { name: 'passing' }).click();
const attachment = page.getByText('foo-2', { exact: true }); const attachment = page.getByTestId('attachments').getByText('foo-2', { exact: true });
await expect(attachment).not.toBeInViewport(); await expect(attachment).not.toBeInViewport();
await page.getByLabel('attach "foo-2"').getByTitle('link to attachment').click(); await page.getByLabel('attach "foo-2"').click();
await page.getByTitle('see "foo-2"').click();
await expect(attachment).toBeInViewport(); await expect(attachment).toBeInViewport();
await page.reload(); await page.reload();
@ -961,9 +962,10 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await showReport(); await showReport();
await page.getByRole('link', { name: 'passing' }).click(); await page.getByRole('link', { name: 'passing' }).click();
const attachment = page.getByText('attachment', { exact: true }); const attachment = page.getByTestId('attachments').getByText('attachment', { exact: true });
await expect(attachment).not.toBeInViewport(); await expect(attachment).not.toBeInViewport();
await page.getByLabel('step').getByTitle('link to attachment').click(); await page.getByLabel('step').click();
await page.getByTitle('see "attachment"').click();
await expect(attachment).toBeInViewport(); await expect(attachment).toBeInViewport();
}); });