Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

update tests

Browse source
This commit is contained in:
Yury Semikhatsky 2024-10-09 18:19:44 -07:00
parent 8196a6ba1e
commit 8fd3d32925
3 changed files with 54 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/html-reporter/src/testErrorView.tsx
View file

@ -34,10 +34,10 @@ export const TestScreenshotErrorView: React.FC<{
}> = ({ errorPrefix, diff, errorSuffix }) => { }> = ({ errorPrefix, diff, errorSuffix }) => {
const prefixHtml = React.useMemo(() => ansiErrorToHtml(errorPrefix), [errorPrefix]); const prefixHtml = React.useMemo(() => ansiErrorToHtml(errorPrefix), [errorPrefix]);
const suffixHtml = React.useMemo(() => ansiErrorToHtml(errorSuffix), [errorSuffix]); const suffixHtml = React.useMemo(() => ansiErrorToHtml(errorSuffix), [errorSuffix]);
return <div className='test-error-message'> return <div data-testid='test-screenshot-error-view' className='test-error-message'>
<div dangerouslySetInnerHTML={{ __html: prefixHtml || '' }}></div> <div dangerouslySetInnerHTML={{ __html: prefixHtml || '' }}></div>
<ImageDiffView key='image-diff' diff={diff} hideDetails={true} ></ImageDiffView> <ImageDiffView key='image-diff' diff={diff} hideDetails={true} ></ImageDiffView>
<div dangerouslySetInnerHTML={{ __html: suffixHtml || '' }}></div> <div data-testid='error-suffix' dangerouslySetInnerHTML={{ __html: suffixHtml || '' }}></div>
</div>; </div>;
}; };

20
packages/html-reporter/src/testResultView.tsx
View file

@ -107,7 +107,7 @@ export const TestResultView: React.FC<{
</AutoChip>} </AutoChip>}
{diffs.map((diff, index) => {diffs.map((diff, index) =>
<AutoChip key={`diff-${index}`} header={`Image mismatch: ${diff.name}`} targetRef={imageDiffRef}> <AutoChip key={`diff-${index}`} dataTestId='test-results-image-diff' header={`Image mismatch: ${diff.name}`} targetRef={imageDiffRef}>
<ImageDiffView key='image-diff' diff={diff}></ImageDiffView> <ImageDiffView key='image-diff' diff={diff}></ImageDiffView>
</AutoChip> </AutoChip>
)} )}
@ -160,17 +160,23 @@ function classifyErrors(testErrors: string[], diffs: ImageDiff[]) {
continue; continue;
if (!error.includes(diff.actual!.attachment.name)) if (!error.includes(diff.actual!.attachment.name))
continue; continue;
const index = error.search(/Expected:|Previous:|Received:/);
const lines = error.split('\n');
const index = lines.findIndex(line => line.match(/Expected:|Previous:|Received:/));
let errorPrefix; let errorPrefix;
if (index !== -1) if (index !== -1)
errorPrefix = error.slice(0, index); errorPrefix = lines.slice(0, index).join('\n');
else else
errorPrefix = error.split('\n')[0]; errorPrefix = lines[0];
const callLog = error.indexOf('Call log:');
let errorSuffix; let errorSuffix;
if (callLog !== -1) const diffIndex = lines.findIndex(line => line.match(/ +Diff:/));
errorSuffix = error.slice(callLog); // Skip one empty line after the diff too.
if (diffIndex !== -1)
errorSuffix = lines.slice(diffIndex + 2).join('\n');
else
errorSuffix = lines.slice(1).join('\n');
screenshotError = { type: 'screenshot', diff, errorPrefix, errorSuffix }; screenshotError = { type: 'screenshot', diff, errorPrefix, errorSuffix };
} }
} }

68
tests/playwright-test/reporter-html.spec.ts
View file

@ -179,7 +179,7 @@ for (const useIntermediateMergeReport of [false] as const) {
await expect(page.locator('text=Image mismatch')).toBeVisible(); await expect(page.locator('text=Image mismatch')).toBeVisible();
await expect(page.locator('text=Snapshot mismatch')).toHaveCount(0); await expect(page.locator('text=Snapshot mismatch')).toHaveCount(0);
await expect(page.getByTestId('test-result-image-mismatch-tabs').locator('div')).toHaveText([ await expect(page.getByTestId('test-screenshot-error-view').getByTestId('test-result-image-mismatch-tabs').locator('div')).toHaveText([
'Diff', 'Diff',
'Actual', 'Actual',
'Expected', 'Expected',
@ -187,36 +187,40 @@ for (const useIntermediateMergeReport of [false] as const) {
'Slider', 'Slider',
]); ]);
const imageDiff = page.getByTestId('test-result-image-mismatch'); for (const testId of ['test-results-image-diff', 'test-screenshot-error-view']) {
await test.step('Diff', async () => { await test.step(testId, async () => {
await expect(imageDiff.locator('img')).toHaveAttribute('alt', 'Diff'); const imageDiff = page.getByTestId(testId).getByTestId('test-result-image-mismatch');
}); await test.step('Diff', async () => {
await expect(imageDiff.locator('img')).toHaveAttribute('alt', 'Diff');
});
await test.step('Actual', async () => { await test.step('Actual', async () => {
await imageDiff.getByText('Actual', { exact: true }).click(); await imageDiff.getByText('Actual', { exact: true }).click();
await expect(imageDiff.locator('img')).toHaveAttribute('alt', 'Actual'); await expect(imageDiff.locator('img')).toHaveAttribute('alt', 'Actual');
}); });
await test.step('Expected', async () => { await test.step('Expected', async () => {
await imageDiff.getByText('Expected', { exact: true }).click(); await imageDiff.getByText('Expected', { exact: true }).click();
await expect(imageDiff.locator('img')).toHaveAttribute('alt', 'Expected'); await expect(imageDiff.locator('img')).toHaveAttribute('alt', 'Expected');
}); });
await test.step('Side by side', async () => { await test.step('Side by side', async () => {
await imageDiff.getByText('Side by side').click(); await imageDiff.getByText('Side by side').click();
await expect(imageDiff.locator('img')).toHaveCount(2); await expect(imageDiff.locator('img')).toHaveCount(2);
await expect(imageDiff.locator('img').first()).toHaveAttribute('alt', 'Expected'); await expect(imageDiff.locator('img').first()).toHaveAttribute('alt', 'Expected');
await expect(imageDiff.locator('img').last()).toHaveAttribute('alt', 'Actual'); await expect(imageDiff.locator('img').last()).toHaveAttribute('alt', 'Actual');
await imageDiff.locator('img').last().click(); await imageDiff.locator('img').last().click();
await expect(imageDiff.locator('img').last()).toHaveAttribute('alt', 'Diff'); await expect(imageDiff.locator('img').last()).toHaveAttribute('alt', 'Diff');
}); });
await test.step('Slider', async () => { await test.step('Slider', async () => {
await imageDiff.getByText('Slider', { exact: true }).click(); await imageDiff.getByText('Slider', { exact: true }).click();
await expect(imageDiff.locator('img')).toHaveCount(2); await expect(imageDiff.locator('img')).toHaveCount(2);
await expect(imageDiff.locator('img').first()).toHaveAttribute('alt', 'Expected'); await expect(imageDiff.locator('img').first()).toHaveAttribute('alt', 'Expected');
await expect(imageDiff.locator('img').last()).toHaveAttribute('alt', 'Actual'); await expect(imageDiff.locator('img').last()).toHaveAttribute('alt', 'Actual');
}); });
});
}
}); });
test('should include multiple image diffs', async ({ runInlineTest, page, showReport }) => { test('should include multiple image diffs', async ({ runInlineTest, page, showReport }) => {
@ -285,8 +289,14 @@ for (const useIntermediateMergeReport of [false] as const) {
await showReport(); await showReport();
await page.click('text=fails'); await page.click('text=fails');
await expect(page.locator('data-testid=test-result-image-mismatch')).toHaveCount(3); await expect(page.getByTestId('test-screenshot-error-view').getByTestId('error-suffix')).toContainText([
await expect(page.locator('text=Image mismatch:')).toHaveText([ `> 6 | await expect.soft(screenshot).toMatchSnapshot('expected.png');`,
`> 7 | await expect.soft(screenshot).toMatchSnapshot('expected.png');`,
`> 8 | await expect.soft(screenshot).toMatchSnapshot('expected.png');`,
]);
const imageDiffs = page.getByTestId('test-results-image-diff');
await expect(imageDiffs.getByTestId('test-result-image-mismatch')).toHaveCount(3);
await expect(imageDiffs.getByText('Image mismatch:')).toHaveText([
'Image mismatch: expected.png', 'Image mismatch: expected.png',
'Image mismatch: expected-1.png', 'Image mismatch: expected-1.png',
'Image mismatch: expected-2.png', 'Image mismatch: expected-2.png',