fix(trace viewer): show correct number of pages without screencast (#30124)

Exposed by the flaky "should open two trace files" test.
This commit is contained in:
Dmitry Gozman 2024-03-26 10:25:12 -07:00 committed by GitHub
parent 0bf635ecce
commit dd1eca2a9d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 8 additions and 4 deletions

View file

@ -244,6 +244,10 @@ export class TraceModel {
this._snapshotStorage!.addFrameSnapshot(event.snapshot); this._snapshotStorage!.addFrameSnapshot(event.snapshot);
break; break;
} }
// Make sure there is a page entry for each page, even without screencast frames,
// to show in the metadata view.
if (('pageId' in event) && event.pageId)
this._pageEntry(contextEntry, event.pageId);
if (event.type === 'action' || event.type === 'before') if (event.type === 'action' || event.type === 'before')
contextEntry.startTime = Math.min(contextEntry.startTime, event.startTime); contextEntry.startTime = Math.min(contextEntry.startTime, event.startTime);
if (event.type === 'action' || event.type === 'after') if (event.type === 'action' || event.type === 'after')

View file

@ -51,7 +51,7 @@ export const FilmStrip: React.FunctionComponent<{
const screencastFrames = model?.pages?.[pageIndex]?.screencastFrames; const screencastFrames = model?.pages?.[pageIndex]?.screencastFrames;
let previewImage = undefined; let previewImage = undefined;
let previewSize = undefined; let previewSize = undefined;
if (previewPoint !== undefined && screencastFrames) { if (previewPoint !== undefined && screencastFrames && screencastFrames.length) {
const previewTime = boundaries.minimum + (boundaries.maximum - boundaries.minimum) * previewPoint.x / measure.width; const previewTime = boundaries.minimum + (boundaries.maximum - boundaries.minimum) * previewPoint.x / measure.width;
previewImage = screencastFrames[upperBound(screencastFrames, previewTime, timeComparator) - 1]; previewImage = screencastFrames[upperBound(screencastFrames, previewTime, timeComparator) - 1];
const fitInto = { const fitInto = {
@ -63,12 +63,12 @@ export const FilmStrip: React.FunctionComponent<{
return <div className='film-strip' ref={ref}> return <div className='film-strip' ref={ref}>
<div className='film-strip-lanes' ref={lanesRef}>{ <div className='film-strip-lanes' ref={lanesRef}>{
model?.pages.map((page, index) => <FilmStripLane model?.pages.map((page, index) => page.screencastFrames.length ? <FilmStripLane
boundaries={boundaries} boundaries={boundaries}
page={page} page={page}
width={measure.width} width={measure.width}
key={index} key={index}
/>) /> : null)
}</div> }</div>
{previewPoint?.x !== undefined && {previewPoint?.x !== undefined &&
<div className='film-strip-hover' style={{ <div className='film-strip-hover' style={{

View file

@ -754,7 +754,7 @@ test('should include metainfo', async ({ showTraceViewer, browserName }) => {
test('should open two trace files', async ({ context, page, request, server, showTraceViewer }, testInfo) => { test('should open two trace files', async ({ context, page, request, server, showTraceViewer }, testInfo) => {
await (request as any)._tracing.start({ snapshots: true }); await (request as any)._tracing.start({ snapshots: true });
await context.tracing.start({ screenshots: true, snapshots: true, sources: true }); await context.tracing.start({ snapshots: true, sources: true });
{ {
const response = await request.get(server.PREFIX + '/simple.json'); const response = await request.get(server.PREFIX + '/simple.json');
await expect(response).toBeOK(); await expect(response).toBeOK();