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

feat: show diff tab by default (#19820)

Browse Source 
Close https://github.com/microsoft/playwright/issues/19803

I had to manually inject `window.playwrightReportBase64` data into
`playwright/packages/html-reporter/index.html` when developing,
wondering if there's any method I don't know.
This commit is contained in:
Sam Chen 2023-02-04 02:32:23 +08:00 committed by GitHub
parent 9c6a1a6ff0
commit 340cacf4fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/html-reporter/src/imageDiffView.spec.tsx
View File

@ -38,14 +38,15 @@ const imageDiff: ImageDiff = {
test('should render links', async ({ mount }) => {
const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>);
await expect(component.locator('a')).toHaveText([
'screenshot-diff.png',
'screenshot-actual.png',
'screenshot-expected.png',
'screenshot-diff.png',
]);
});
test('should show actual by default', async ({ mount }) => {
test('should switch to actual', async ({ mount }) => {
const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>);
await component.getByText('Actual', { exact: true }).click();
const sliderElement = component.locator('data-testid=test-result-image-mismatch-grip');
await expect.poll(() => sliderElement.evaluate(e => e.style.left), 'Actual slider is on the right').toBe('611px');
@ -73,9 +74,8 @@ test('should switch to expected', async ({ mount }) => {
}
});
test('should switch to diff', async ({ mount }) => {
test('should show diff by default', async ({ mount }) => {
const component = await mount(<ImageDiffView key='image-diff' imageDiff={imageDiff}></ImageDiffView>);
await component.getByText('Diff', { exact: true }).click();
const image = component.locator('img');
const box = await image.boundingBox();

18
packages/html-reporter/src/imageDiffView.tsx
View File

@ -32,8 +32,8 @@ export type ImageDiff = {
export const ImageDiffView: React.FunctionComponent<{
imageDiff: ImageDiff,
}> = ({ imageDiff: diff }) => {
// Pre-select a tab called "actual", if any.
const [selectedTab, setSelectedTab] = React.useState<string>('actual');
// Pre-select a tab called "diff", if any.
const [selectedTab, setSelectedTab] = React.useState<string>('diff');
const diffElement = React.useRef<HTMLDivElement>(null);
const imageElement = React.useRef<HTMLImageElement>(null);
const [sliderPosition, setSliderPosition] = React.useState<number>(0);
@ -50,6 +50,11 @@ export const ImageDiffView: React.FunctionComponent<{
};
const tabs: TabbedPaneTab[] = [];
if (diff.diff) {
tabs.push({
id: 'diff',
title: 'Diff',
render: () => <ImageWithSize src={diff.diff!.attachment.path!} onLoad={() => onImageLoaded()} />
});
tabs.push({
id: 'actual',
title: 'Actual',
@ -78,18 +83,11 @@ export const ImageDiffView: React.FunctionComponent<{
render: () => <ImageWithSize src={diff.expected!.attachment.path!} onLoad={() => onImageLoaded()} />
});
}
if (diff.diff) {
tabs.push({
id: 'diff',
title: 'Diff',
render: () => <ImageWithSize src={diff.diff!.attachment.path!} onLoad={() => onImageLoaded()} />
});
}
return <div className='vbox image-diff-view' data-testid='test-result-image-mismatch' ref={diffElement}>
<TabbedPane tabs={tabs} selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
{diff.diff && <AttachmentLink attachment={diff.diff.attachment}></AttachmentLink>}
<AttachmentLink attachment={diff.actual!.attachment}></AttachmentLink>
<AttachmentLink attachment={diff.expected!.attachment}></AttachmentLink>
{diff.diff && <AttachmentLink attachment={diff.diff.attachment}></AttachmentLink>}
</div>;
};

2
packages/html-reporter/src/index.tsx
View File

@ -17,7 +17,7 @@
import type { HTMLReport } from './types';
import type zip from '@zip.js/zip.js';
// @ts-ignore
import zipImport from '@zip.js/zip.js/dist/zip-no-worker-inflate.min.js';
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';
import './colors.css';

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

@ -130,6 +130,7 @@ test('should include image diff', async ({ runInlineTest, page, showReport }) =>
const set = new Set();
const imageDiff = page.locator('data-testid=test-result-image-mismatch');
await imageDiff.locator('text="Actual"').click();
const expectedImage = imageDiff.locator('img').first();
const actualImage = imageDiff.locator('img').last();
await expect(expectedImage).toHaveAttribute('src', /.*png/);
@ -255,6 +256,7 @@ test('should include image diff when screenshot failed to generate due to animat
await expect(page.locator('text=Snapshot mismatch')).toHaveCount(0);
await expect(page.locator('.chip-header', { hasText: 'Screenshots' })).toHaveCount(0);
const imageDiff = page.locator('data-testid=test-result-image-mismatch');
await imageDiff.locator('text="Actual"').click();
const image = imageDiff.locator('img');
await expect(image.first()).toHaveAttribute('src', /.*png/);
await expect(image.last()).toHaveAttribute('src', /.*png/);