diff options
| author | Hana Kim <hyangah@gmail.com> | 2026-03-27 16:34:54 -0400 |
|---|---|---|
| committer | Hyang-Ah Hana Kim <hyangah@gmail.com> | 2026-03-28 11:55:01 -0700 |
| commit | 764f79e85197be12b4ab14db0a118c4931d50d2a (patch) | |
| tree | 3065a22ac6cfc115d32b48c39f3ba812629e9aaf | |
| parent | 6ce2f68b79f236c20f1dce90d794effe6b4ad6bd (diff) | |
| download | go-x-pkgsite-764f79e85197be12b4ab14db0a118c4931d50d2a.tar.xz | |
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 <golang-scoped@luci-project-accounts.iam.gserviceaccount.com>
Reviewed-by: Ethan Lee <ethanalee@google.com>
kokoro-CI: kokoro <noreply+kokoro@google.com>
| -rw-r--r-- | tests/screentest/testcases.ci.txt | 2 | ||||
| -rw-r--r-- | 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 |