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

chore: use diff for snapshot delta (#33739)

Browse source
This commit is contained in:
Pavel Feldman 2024-11-23 11:39:04 -08:00 committed by GitHub
parent 971b5da741
commit 35dd3dd104
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 24 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
packages/playwright-core/src/utils/comparators.ts
View file

@ -109,26 +109,27 @@ function validateBuffer(buffer: Buffer, mimeType: string): void {
function compareText(actual: Buffer | string, expectedBuffer: Buffer): ComparatorResult { function compareText(actual: Buffer | string, expectedBuffer: Buffer): ComparatorResult {
if (typeof actual !== 'string') if (typeof actual !== 'string')
return { errorMessage: 'Actual result should be a string' }; return { errorMessage: 'Actual result should be a string' };
const expected = expectedBuffer.toString('utf-8'); let expected = expectedBuffer.toString('utf-8');
if (expected === actual) if (expected === actual)
return null; return null;
const diffs = diff.diffChars(expected, actual); // Eliminate '\\ No newline at end of file'
return { if (!actual.endsWith('\n'))
errorMessage: diff_prettyTerminal(diffs), actual += '\n';
}; if (!expected.endsWith('\n'))
} expected += '\n';
function diff_prettyTerminal(diffs: Diff.Change[]): string { const lines = diff.createPatch('file', expected, actual, undefined, undefined, { context: 5 }).split('\n');
const result = diffs.map(part => { const coloredLines = lines.slice(4).map(line => {
const text = part.value; if (line.startsWith('-'))
if (part.added) return colors.red(line);
return colors.green(text); if (line.startsWith('+'))
else if (part.removed) return colors.green(line);
return colors.reset(colors.strikethrough(colors.red(text))); if (line.startsWith('@@'))
else return colors.dim(line);
return text; return line;
}); });
return result.join(''); const errorMessage = coloredLines.join('\n');
return { errorMessage };
} }
function resizeImage(image: ImageData, size: { width: number, height: number }): ImageData { function resizeImage(image: ImageData, size: { width: number, height: number }): ImageData {

7
tests/playwright-test/golden.spec.ts
View file

@ -58,7 +58,8 @@ test('should work with non-txt extensions', async ({ runInlineTest }) => {
` `
}); });
expect(result.exitCode).toBe(1); expect(result.exitCode).toBe(1);
expect(result.output).toContain(`1,2,34`); expect(result.rawOutput).toContain(colors.red('-1,2,3'));
expect(result.rawOutput).toContain(colors.green('+1,2,4'));
}); });
@ -202,8 +203,8 @@ Line7`,
}); });
expect(result.exitCode).toBe(1); expect(result.exitCode).toBe(1);
expect(result.output).toContain('Line1'); expect(result.output).toContain('Line1');
expect(result.rawOutput).toContain('Line2' + colors.green('2')); expect(result.rawOutput).toContain(colors.red('-Line2'));
expect(result.rawOutput).toContain('line' + colors.reset(colors.strikethrough(colors.red('1'))) + colors.green('2')); expect(result.rawOutput).toContain(colors.green('+Line22'));
expect(result.output).toContain('Line3'); expect(result.output).toContain('Line3');
expect(result.output).toContain('Line5'); expect(result.output).toContain('Line5');
expect(result.output).toContain('Line7'); expect(result.output).toContain('Line7');

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

@ -916,7 +916,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
])); ]));
}); });
test('should strikethrough textual diff', async ({ runInlineTest, showReport, page }) => { test('should highlight textual diff', async ({ runInlineTest, showReport, page }) => {
const result = await runInlineTest({ const result = await runInlineTest({
'helper.ts': ` 'helper.ts': `
import { test as base } from '@playwright/test'; import { test as base } from '@playwright/test';
@ -940,36 +940,8 @@ for (const useIntermediateMergeReport of [true, false] as const) {
await showReport(); await showReport();
await page.click('text="is a test"'); await page.click('text="is a test"');
await expect(page.locator('.test-error-view').getByText('old')).toHaveCSS('text-decoration', 'line-through solid rgb(205, 49, 49)'); await expect(page.locator('.test-error-view').getByText('-old')).toHaveCSS('color', 'rgb(205, 49, 49)');
await expect(page.locator('.test-error-view').getByText('new', { exact: true })).toHaveCSS('text-decoration', 'none solid rgb(0, 188, 0)'); await expect(page.locator('.test-error-view').getByText('+new', { exact: true })).toHaveCSS('color', 'rgb(0, 188, 0)');
});
test('should strikethrough textual diff with commonalities', async ({ runInlineTest, showReport, page }) => {
const result = await runInlineTest({
'helper.ts': `
import { test as base } from '@playwright/test';
export * from '@playwright/test';
export const test = base.extend({
auto: [ async ({}, run, testInfo) => {
testInfo.snapshotSuffix = '';
await run();
}, { auto: true } ]
});
`,
'a.spec.js-snapshots/snapshot.txt': `oldcommon`,
'a.spec.js': `
const { test, expect } = require('./helper');
test('is a test', ({}) => {
expect('newcommon').toMatchSnapshot('snapshot.txt');
});
`
}, { reporter: 'dot,html' }, { PLAYWRIGHT_HTML_OPEN: 'never' });
expect(result.exitCode).toBe(1);
await showReport();
await page.click('text="is a test"');
await expect(page.locator('.test-error-view').getByText('old')).toHaveCSS('text-decoration', 'line-through solid rgb(205, 49, 49)');
await expect(page.locator('.test-error-view').getByText('new', { exact: true })).toHaveCSS('text-decoration', 'none solid rgb(0, 188, 0)');
await expect(page.locator('.test-error-view').getByText('common Expected:')).toHaveCSS('text-decoration', 'none solid rgb(36, 41, 47)');
}); });
test('should highlight inline textual diff in toHaveText', async ({ runInlineTest, showReport, page }) => { test('should highlight inline textual diff in toHaveText', async ({ runInlineTest, showReport, page }) => {