From 1fb9d212233a95439d65f153c60c6335a6eed2f1 Mon Sep 17 00:00:00 2001
From: Dmitry Gozman <dgozman@gmail.com>
Date: Thu, 23 Sep 2021 11:40:55 -0700
Subject: [PATCH] test: unflake "should have correct snapshot size" (#9099)

---
 tests/trace-viewer/trace-viewer.spec.ts | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/tests/trace-viewer/trace-viewer.spec.ts b/tests/trace-viewer/trace-viewer.spec.ts
index 7557d16164..63d9493771 100644
--- a/tests/trace-viewer/trace-viewer.spec.ts
+++ b/tests/trace-viewer/trace-viewer.spec.ts
@@ -27,6 +27,7 @@ class TraceViewerPage {
   consoleStacks: Locator;
   stackFrames: Locator;
   networkRequests: Locator;
+  snapshotContainer: Locator;
 
   constructor(public page: Page) {
     this.actionTitles = page.locator('.action-title');
@@ -36,6 +37,7 @@ class TraceViewerPage {
     this.consoleStacks = page.locator('.console-stack');
     this.stackFrames = page.locator('.stack-trace-frame');
     this.networkRequests = page.locator('.network-request-title');
+    this.snapshotContainer = page.locator('.snapshot-container');
   }
 
   async actionIconsText(action: string) {
@@ -79,13 +81,6 @@ class TraceViewerPage {
     const result = [...set];
     return result.sort();
   }
-
-  async snapshotSize() {
-    return this.page.$eval('.snapshot-container', e => {
-      const style = window.getComputedStyle(e);
-      return { width: style.width, height: style.height };
-    });
-  }
 }
 
 const test = playwrightTest.extend<{ showTraceViewer: (trace: string) => Promise<TraceViewerPage> }>({
@@ -213,13 +208,15 @@ test('should show params and return value', async ({ showTraceViewer, browserNam
   ]);
 });
 
-test('should have correct snapshot size', async ({ showTraceViewer }) => {
+test('should have correct snapshot size', async ({ showTraceViewer }, testInfo) => {
   const traceViewer = await showTraceViewer(traceFile);
   await traceViewer.selectAction('page.setViewport');
   await traceViewer.selectSnapshot('Before');
-  expect(await traceViewer.snapshotSize()).toEqual({ width: '1280px', height: '720px' });
+  await expect(traceViewer.snapshotContainer).toHaveCSS('width', '1280px');
+  await expect(traceViewer.snapshotContainer).toHaveCSS('height', '720px');
   await traceViewer.selectSnapshot('After');
-  expect(await traceViewer.snapshotSize()).toEqual({ width: '500px', height: '600px' });
+  await expect(traceViewer.snapshotContainer).toHaveCSS('width', '500px');
+  await expect(traceViewer.snapshotContainer).toHaveCSS('height', '600px');
 });
 
 test('should have correct stack trace', async ({ showTraceViewer }) => {