diff --git a/packages/trace-viewer/src/traceModel.ts b/packages/trace-viewer/src/traceModel.ts
index 3aa17c28e9..432eaa67be 100644
--- a/packages/trace-viewer/src/traceModel.ts
+++ b/packages/trace-viewer/src/traceModel.ts
@@ -244,6 +244,10 @@ export class TraceModel {
         this._snapshotStorage!.addFrameSnapshot(event.snapshot);
         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')
       contextEntry.startTime = Math.min(contextEntry.startTime, event.startTime);
     if (event.type === 'action' || event.type === 'after')
diff --git a/packages/trace-viewer/src/ui/filmStrip.tsx b/packages/trace-viewer/src/ui/filmStrip.tsx
index f24a8939b0..a0818c10ed 100644
--- a/packages/trace-viewer/src/ui/filmStrip.tsx
+++ b/packages/trace-viewer/src/ui/filmStrip.tsx
@@ -51,7 +51,7 @@ export const FilmStrip: React.FunctionComponent<{
   const screencastFrames = model?.pages?.[pageIndex]?.screencastFrames;
   let previewImage = 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;
     previewImage = screencastFrames[upperBound(screencastFrames, previewTime, timeComparator) - 1];
     const fitInto = {
@@ -63,12 +63,12 @@ export const FilmStrip: React.FunctionComponent<{
 
   return <div className='film-strip' ref={ref}>
     <div className='film-strip-lanes' ref={lanesRef}>{
-      model?.pages.map((page, index) => <FilmStripLane
+      model?.pages.map((page, index) => page.screencastFrames.length ? <FilmStripLane
         boundaries={boundaries}
         page={page}
         width={measure.width}
         key={index}
-      />)
+      /> : null)
     }</div>
     {previewPoint?.x !== undefined &&
       <div className='film-strip-hover' style={{
diff --git a/tests/library/trace-viewer.spec.ts b/tests/library/trace-viewer.spec.ts
index 3bd3c11288..593e449b8d 100644
--- a/tests/library/trace-viewer.spec.ts
+++ b/tests/library/trace-viewer.spec.ts
@@ -754,7 +754,7 @@ test('should include metainfo', async ({ showTraceViewer, browserName }) => {
 
 test('should open two trace files', async ({ context, page, request, server, showTraceViewer }, testInfo) => {
   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');
     await expect(response).toBeOK();