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

cherry-pick(#21935): chore: fix trace viewer backwards compat

Browse source
This commit is contained in:
Pavel Feldman 2023-03-23 12:49:53 -07:00
parent a0b4bd178d
commit 6b2858f0fb
7 changed files with 16 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/trace-viewer/public/watch.webmanifest
View file

@ -4,7 +4,7 @@
"display": "browser",
"start_url": "watch.html",
"name": "Playwright Test",
"short_name": "Trace Viewer",
"short_name": "Playwright Test",
"icons": [
{
"src": "icon-192x192.png",

1
packages/trace-viewer/src/snapshotRenderer.ts
View file

@ -104,6 +104,7 @@ export class SnapshotRenderer {
const prefix = snapshot.doctype ? `<!DOCTYPE ${snapshot.doctype}>` : '';
html = prefix + [
'<style>*,*::before,*::after { visibility: hidden }</style>',
`<style>*[__playwright_target__="${this.snapshotName}"] { outline: 2px solid #006ab1 !important; background-color: #6fa8dc7f !important; }</style>`,
`<style>*[__playwright_target__="${this._callId}"] { outline: 2px solid #006ab1 !important; background-color: #6fa8dc7f !important; }</style>`,
`<script>${snapshotScript()}</script>`
].join('') + html;

7
packages/trace-viewer/src/sw.ts
View file

@ -44,10 +44,11 @@ async function loadTrace(traceUrl: string, traceFileName: string | null, clientI
} catch (error: any) {
if (error?.message?.includes('Cannot find .trace file') && await traceModel.hasEntry('index.html'))
throw new Error('Could not load trace. Did you upload a Playwright HTML report instead? Make sure to extract the archive first and then double-click the index.html file or put it on a web server.');
else if (traceFileName)
// eslint-disable-next-line no-console
console.error(error);
if (traceFileName)
throw new Error(`Could not load trace from ${traceFileName}. Make sure to upload a valid Playwright trace.`);
else
throw new Error(`Could not load trace from ${traceUrl}. Make sure a valid Playwright Trace is accessible over this url.`);
throw new Error(`Could not load trace from ${traceUrl}. Make sure a valid Playwright Trace is accessible over this url.`);
}
const snapshotServer = new SnapshotServer(traceModel.storage());
loadedTraces.set(traceUrl, { traceModel, snapshotServer });

6
packages/trace-viewer/src/traceModel.ts
View file

@ -279,9 +279,9 @@ export class TraceModel {
params: metadata.params,
wallTime: metadata.wallTime || Date.now(),
log: metadata.log,
beforeSnapshot: metadata.snapshots.find(s => s.snapshotName === 'before')?.snapshotName,
inputSnapshot: metadata.snapshots.find(s => s.snapshotName === 'input')?.snapshotName,
afterSnapshot: metadata.snapshots.find(s => s.snapshotName === 'after')?.snapshotName,
beforeSnapshot: metadata.snapshots.find(s => s.title === 'before')?.snapshotName,
inputSnapshot: metadata.snapshots.find(s => s.title === 'input')?.snapshotName,
afterSnapshot: metadata.snapshots.find(s => s.title === 'after')?.snapshotName,
error: metadata.error?.error,
result: metadata.result,
point: metadata.point,

BIN
tests/assets/trace-1.31.zip Normal file
View file

Binary file not shown.

2
tests/library/snapshotter.spec.ts
View file

@ -41,7 +41,7 @@ it.describe('snapshots', () => {
await snapshotter.reset();
const snapshot2 = await snapshotter.captureSnapshot(toImpl(page), 'call@2', 'snapshot@call@2');
const html2 = snapshot2.render().html;
expect(html2.replace(`"call@2"`, `"call@1"`)).toEqual(html1);
expect(html2.replace(/call@2/g, `call@1`)).toEqual(html1);
});
it('should capture resources', async ({ page, toImpl, server, snapshotter }) => {

6
tests/library/trace-viewer.spec.ts
View file

@ -787,3 +787,9 @@ test('should update highlight when typing', async ({ page, runAndTrace, server }
await traceViewer.page.keyboard.type('button');
await expect(snapshot.locator('x-pw-glass')).toBeVisible();
});
test('should open trace-1.31', async ({ showTraceViewer }) => {
const traceViewer = await showTraceViewer([path.join(__dirname, '../assets/trace-1.31.zip')]);
const snapshot = await traceViewer.snapshotFrame('locator.click');
await expect(snapshot.locator('[__playwright_target__]')).toHaveText(['Submit']);
});