Playwright - html padding-right 15px to simulate TestCafe scrollbar (fixes CI screenshot mismatches)

aleksei-semikozov · aleksei-semikozov · commit ee50502cf4e1 · 2026-03-27T10:13:40.000-03:00
diff --git a/FINISH_REVIEW.md b/FINISH_REVIEW.md
@@ -68,11 +68,11 @@ These components have expanded forEach that need to be collapsed:
 - `scheduler/common/` — various files with expanded forEach
 - `accessibility/*.matrix.spec.ts` — matrix expansion (OK — mirrors TC testAccessibility pattern)
 
-### Screenshot Dimension Mismatches (CI vs Local)
-- TestCafe headless Chrome has 15px scrollbar, Playwright headless has 0px
-- ViewOffset uses viewport 1185 (project chromium-1185) to match TC etalons
-- Other components use viewport 1200 + `::-webkit-scrollbar` CSS
-- Some tests fail on CI but pass locally due to font rendering differences
+### Screenshot Dimension Mismatches (CI vs Local) — SOLVED
+- **Root cause:** TestCafe headless Chrome has 15px classic scrollbar, Playwright headless Chromium has 0px overlay scrollbar. This made content 15px wider in Playwright, breaking all etalon comparisons.
+- **Solution:** `html { padding-right: 15px !important; box-sizing: border-box !important; }` in `container.html`. This simulates the scrollbar space, making body content = 1200 - 16 margin - 15 padding = 1169px — matching TestCafe layout.
+- **Known workaround:** This is an intentional CSS hack to match TestCafe headless Chrome behavior. Playwright headless Chromium uses overlay scrollbar (0px) which cannot be changed via CSS. The padding-right approach reserves the same 15px space without affecting visual layout.
+- ViewOffset additionally uses viewport 1185 (project chromium-1185) for tests with etalons that depend on full-page width.
 
 ### Accessibility Matrix Tests
 TC uses `testAccessibility()` which generates N tests per option combination at runtime.
diff --git a/e2e/testcafe-devextreme/tests/container.html b/e2e/testcafe-devextreme/tests/container.html
@@ -22,11 +22,12 @@
         .dx-scheduler .dx-scrollable-scroll { visibility: hidden !important; }
         body:has(#tabPanel) { min-height: 500px; }
 
-        /* Match TestCafe headless Chrome scrollbar behavior:
-           scrollbar appears only on overflow, width 15px when present */
-        ::-webkit-scrollbar { width: 15px !important; }
-        ::-webkit-scrollbar-track { background: transparent !important; }
-        ::-webkit-scrollbar-thumb { background: transparent !important; }
+        /* Simulate TestCafe headless Chrome 15px scrollbar.
+           Playwright headless Chromium has overlay scrollbar (0px width),
+           but TestCafe etalons were captured with 15px classic scrollbar.
+           padding-right on html reserves 15px, making body content 1169px
+           instead of 1184px — matching TestCafe layout. */
+        html { padding-right: 15px !important; box-sizing: border-box !important; }
     </style>
 </head>
 <body class="dx-surface">
