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 }) => {
const prefixHtml = React.useMemo(() => ansiErrorToHtml(errorPrefix), [errorPrefix]);
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>
<ImageDiffView key='image-diff' diff={diff} hideDetails={true} ></ImageDiffView>
<div dangerouslySetInnerHTML={{ __html: suffixHtml || '' }}></div>
<div data-testid='error-suffix' dangerouslySetInnerHTML={{ __html: suffixHtml || '' }}></div>
</div>;
};

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

@ -107,7 +107,7 @@ export const TestResultView: React.FC<{
</AutoChip>}
{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>
</AutoChip>
)}
@ -160,17 +160,23 @@ function classifyErrors(testErrors: string[], diffs: ImageDiff[]) {
continue;
if (!error.includes(diff.actual!.attachment.name))
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;
if (index !== -1)
errorPrefix = error.slice(0, index);
errorPrefix = lines.slice(0, index).join('\n');
else
errorPrefix = error.split('\n')[0];
errorPrefix = lines[0];
const callLog = error.indexOf('Call log:');
let errorSuffix;
if (callLog !== -1)
errorSuffix = error.slice(callLog);
const diffIndex = lines.findIndex(line => line.match(/ +Diff:/));
// 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 };
}
}

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