From 764f79e85197be12b4ab14db0a118c4931d50d2a Mon Sep 17 00:00:00 2001 From: Hana Kim Date: Fri, 27 Mar 2026 16:34:54 -0400 Subject: tests/screentest: fix flaky mobile viewport screen captures When "capture viewport 540x1080" shrinks the headless browser window from desktop to mobile size, the layout shifts and triggers CSS transitions. Because screentest takes the screenshot immediately after resizing, it often captures the page mid-animation. This causes element height changes and unexpected scrollbars, making the image diff fail randomly. Fixed by injecting a style tag that globally disables all CSS transitions during the hideElements initialization. This causes layout resizes to snap instantly, ensuring the captured image is always fully settled and consistent. Change-Id: I43310708ced5f0cff5bf011bfb407fa22705d9a2 Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/760580 LUCI-TryBot-Result: Go LUCI Reviewed-by: Ethan Lee kokoro-CI: kokoro --- tests/screentest/testcases.ci.txt | 2 +- tests/screentest/testcases.txt | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/screentest/testcases.ci.txt b/tests/screentest/testcases.ci.txt index 045f8dd6..2f03a1f0 100644 --- a/tests/screentest/testcases.ci.txt +++ b/tests/screentest/testcases.ci.txt @@ -3,7 +3,7 @@ windowsize 1536x960 block https://codecov.io/* https://travis-ci.com/* {{$ready := "[role='treeitem'][aria-selected='true']"}} -{{$hideElements := "document.querySelector(\"[data-test-id='UnitHeader-importedby']\")?.remove();document.querySelector(\"[data-test-id='meta-link-depsdev']\")?.remove();document.querySelector(\"[data-test-id='meta-link-codewiki']\")?.remove();"}} +{{$hideElements := "const s=document.createElement('style');s.innerHTML='*{transition:none!important;animation:none!important;caret-color:transparent!important}';document.head.appendChild(s);document.querySelector(\"[data-test-id='UnitHeader-importedby']\")?.remove();document.querySelector(\"[data-test-id='meta-link-depsdev']\")?.remove();document.querySelector(\"[data-test-id='meta-link-codewiki']\")?.remove();"}} {{$scrollTop := "window.scrollTo({top:0});"}} test vuln diff --git a/tests/screentest/testcases.txt b/tests/screentest/testcases.txt index 4f94269e..2faad5c4 100644 --- a/tests/screentest/testcases.txt +++ b/tests/screentest/testcases.txt @@ -11,7 +11,7 @@ block https://codecov.io/* https://travis-ci.com/* # The aria-selected attribute is added by the last piece of JS to run. {{$ready := "[role='treeitem'][aria-selected='true']"}} -{{$hideElements := "document.querySelector(\"[data-test-id='UnitHeader-importedby']\")?.remove();document.querySelector(\"[data-test-id='meta-link-depsdev']\")?.remove();document.querySelector(\"[data-test-id='meta-link-codewiki']\")?.remove();"}} +{{$hideElements := "const s=document.createElement('style');s.innerHTML='*{transition:none!important;animation:none!important;caret-color:transparent!important}';document.head.appendChild(s);document.querySelector(\"[data-test-id='UnitHeader-importedby']\")?.remove();document.querySelector(\"[data-test-id='meta-link-depsdev']\")?.remove();document.querySelector(\"[data-test-id='meta-link-codewiki']\")?.remove();"}} # JS for hiding the "Links" heading. We are already hiding the deps.dev link because # its presence depends on a timeout, but for some modules, if the link isn't -- cgit v1.3