microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-11-28 01:15:10 +03:00
Code Issues 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 {
if (typeof actual !== 'string')
return { errorMessage: 'Actual result should be a string' };
const expected = expectedBuffer.toString('utf-8');
let expected = expectedBuffer.toString('utf-8');
if (expected === actual)
return null;
const diffs = diff.diffChars(expected, actual);
return {
errorMessage: diff_prettyTerminal(diffs),
};
}
// Eliminate '\\ No newline at end of file'
if (!actual.endsWith('\n'))
actual += '\n';
if (!expected.endsWith('\n'))
expected += '\n';
function diff_prettyTerminal(diffs: Diff.Change[]): string {
const result = diffs.map(part => {
const text = part.value;
if (part.added)
return colors.green(text);
else if (part.removed)
return colors.reset(colors.strikethrough(colors.red(text)));
else
return text;
const lines = diff.createPatch('file', expected, actual, undefined, undefined, { context: 5 }).split('\n');
const coloredLines = lines.slice(4).map(line => {
if (line.startsWith('-'))
return colors.red(line);
if (line.startsWith('+'))
return colors.green(line);
if (line.startsWith('@@'))
return colors.dim(line);
return line;
});
return result.join('');
const errorMessage = coloredLines.join('\n');
return { errorMessage };
}
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.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.output).toContain('Line1');
expect(result.rawOutput).toContain('Line2' + colors.green('2'));
expect(result.rawOutput).toContain('line' + colors.reset(colors.strikethrough(colors.red('1'))) + colors.green('2'));
expect(result.rawOutput).toContain(colors.red('-Line2'));
expect(result.rawOutput).toContain(colors.green('+Line22'));
expect(result.output).toContain('Line3');
expect(result.output).toContain('Line5');
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({
'helper.ts': `
import { test as base } from '@playwright/test';
@ -940,36 +940,8 @@ for (const useIntermediateMergeReport of [true, false] as const) {
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)');
});
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)');
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('color', 'rgb(0, 188, 0)');
});
test('should highlight inline textual diff in toHaveText', async ({ runInlineTest, showReport, page }) => {