diff --git a/packages/playwright-core/src/web/traceViewer/ui/snapshotTab.css b/packages/playwright-core/src/web/traceViewer/ui/snapshotTab.css
index 6a8b2107f0..9d5784e683 100644
--- a/packages/playwright-core/src/web/traceViewer/ui/snapshotTab.css
+++ b/packages/playwright-core/src/web/traceViewer/ui/snapshotTab.css
@@ -88,3 +88,8 @@ iframe#snapshot {
   height: 100%;
   border: none;
 }
+
+.no-snapshot {
+  text-align: center;
+  padding: 50px;
+}
diff --git a/packages/playwright-core/src/web/traceViewer/ui/snapshotTab.tsx b/packages/playwright-core/src/web/traceViewer/ui/snapshotTab.tsx
index e5135c8e91..179fadedca 100644
--- a/packages/playwright-core/src/web/traceViewer/ui/snapshotTab.tsx
+++ b/packages/playwright-core/src/web/traceViewer/ui/snapshotTab.tsx
@@ -101,13 +101,14 @@ export const SnapshotTab: React.FunctionComponent<{
     </div>
     <div className='snapshot-url' title={snapshotInfo.url}>{snapshotInfo.url}</div>
     <div ref={ref} className='snapshot-wrapper'>
-      <div className='snapshot-container' style={{
+      { snapshots.length ? <div className='snapshot-container' style={{
         width: snapshotSize.width + 'px',
         height: snapshotSize.height + 'px',
         transform: `translate(${-snapshotSize.width * (1 - scale) / 2 + (measure.width - scaledSize.width) / 2}px, ${-snapshotSize.height * (1 - scale) / 2  + (measure.height - scaledSize.height) / 2}px) scale(${scale})`,
       }}>
         <iframe ref={iframeRef} id='snapshot' name='snapshot'></iframe>
-      </div>
+      </div> : <div className='no-snapshot'>Action does not have snapshots</div>
+      }
     </div>
   </div>;
 };