diff --git a/packages/trace-viewer/src/snapshotRenderer.ts b/packages/trace-viewer/src/snapshotRenderer.ts
index 4868515451..1b6c177a68 100644
--- a/packages/trace-viewer/src/snapshotRenderer.ts
+++ b/packages/trace-viewer/src/snapshotRenderer.ts
@@ -123,8 +123,9 @@ export class SnapshotRenderer {
if (resource._frameref !== snapshot.frameId)
continue;
if (resource.request.url === url) {
+ // Pick the last resource with matching url - most likely it was used
+ // at the time of snapshot, not the earlier aborted resource with the same url.
result = resource;
- break;
}
}
@@ -133,8 +134,11 @@ export class SnapshotRenderer {
for (const resource of this._resources) {
if (typeof resource._monotonicTime === 'number' && resource._monotonicTime >= snapshot.timestamp)
break;
- if (resource.request.url === url)
- return resource;
+ if (resource.request.url === url) {
+ // Pick the last resource with matching url - most likely it was used
+ // at the time of snapshot, not the earlier aborted resource with the same url.
+ result = resource;
+ }
}
}
diff --git a/tests/library/trace-viewer.spec.ts b/tests/library/trace-viewer.spec.ts
index ff748852ee..825ae96900 100644
--- a/tests/library/trace-viewer.spec.ts
+++ b/tests/library/trace-viewer.spec.ts
@@ -850,3 +850,38 @@ test('should open trace-1.31', async ({ showTraceViewer }) => {
const snapshot = await traceViewer.snapshotFrame('locator.click');
await expect(snapshot.locator('[__playwright_target__]')).toHaveText(['Submit']);
});
+
+test('should prefer later resource request', async ({ page, server, runAndTrace }) => {
+ const html = `
+
+
+
+ `;
+
+ let reloadStartedCallback = () => {};
+ const reloadStartedPromise = new Promise(f => reloadStartedCallback = f);
+ server.setRoute('/style.css', async (req, res) => {
+ // Make sure reload happens before style arrives.
+ await reloadStartedPromise;
+ res.end('body { background-color: rgb(123, 123, 123) }');
+ });
+ server.setRoute('/index.html', (req, res) => res.end(html));
+ server.setRoute('/index.html?reloaded', (req, res) => {
+ reloadStartedCallback();
+ res.end(html);
+ });
+
+ const traceViewer = await runAndTrace(async () => {
+ await page.goto(server.PREFIX + '/index.html');
+ });
+ const frame = await traceViewer.snapshotFrame('page.goto');
+ await expect(frame.locator('body')).toHaveCSS('background-color', 'rgb(123, 123, 123)');
+});