Fix remaining issue where VRT test fails in CI when launching Chromium

[techanvil]

Bug Description

The fix applied via #9211 has improved the reliability of our VRT workflow, however it is still failing with some regularity with the following error:

      COMMAND | Command "test" ended with an error after [679.315s]
      COMMAND | Error: Failed to launch the browser process!

It does however look like a potentially different permutation of the error - in the example occurrences it's surrounded by "Unmatched GET" log messages which were not evident in previous iterations.

Steps to reproduce

• Watch for failing VRT test runs in CI.
• They will intermittently fail with the above error.
• See these example test runs:
  • https://github.com/google/site-kit-wp/actions/runs/10890467296/job/30219259053
  • https://github.com/google/site-kit-wp/actions/runs/10881165268/job/30194143374

Screenshots

Additional Context

See the Additional Context section on #9211 for some relevant avenues that remain to be explored for the fix.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• VRT test runs should not fail with an error before all the screenshots are captured and the test has run to completion.

Note, additional issues should be raised if needed to follow up on separate avenues of investigation.

Implementation Brief

This IB is based on debug work in the PR #9412.

• Update docker/backstopjs/Dockerfile to install chromium and it's requirements in a separate step and pass the PUPPETEER_EXECUTABLE_PATH constant like so:
  

  site-kit-wp/docker/backstopjs/Dockerfile

  Lines 7 to 25 in 60f81f1

  	RUN apk add --no-cache \
  	chromium \
  	nss \
  	freetype \
  	harfbuzz \
  	ca-certificates \
  	ttf-freefont \
  	nodejs \
  	npm \
  	openrc \
  	dbus
  	ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
  	RUN apk upgrade --no-cache --available && \
  	PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm i -g backstopjs@${BACKSTOPJS_VERSION} && \
  	npm cache clean -f && \
  	rm -rf /root/.cache && \
  	rc-update add dbus

  
  Why? This was based on notes in puppeteers troubleshooting docs. Alpine is not officially supported by chromium, so installing the required packages along with the install is vital.

• This new version of chromium will render many components slightly differently, so you need to run and update the VRT images once. After this is done future VRT runs will pass consistently (eg.).

• Also this change highlights some new failing tests:

• AudienceSegmentation_Dashboard_AudienceSelectionPanel_Audience_creation_notice and Views/WPDashboardApp/WPDashboardWidgets/ReadyWithActivateAnalyticsCTA for unknown reasons:

  • Add a delay of 1500ms to the Modules/Analytics4/Components/AudienceSegmentation/Dashboard/AudienceSelectionPanel/AudienceCreationNoticeOneAdded story allows this test to pass reliably.
  • Increase the delay to 6000ms for the Views/WPDashboardApp/WPDashboardWidgets/ReadyWithActivateAnalyticsCTA story.

• AdSense_Module_Overview_Widget which was another case of the DataBlockGroup component causing issues (just like Fix flaky VRT tests #9101)

  • Update the dates in stories/module-adsense-components.stories.js to all be in the year 2021.
    Why?: The goal here is to update the faker seed so that we get smaller numbers which prevent the DataBlockGroup from iterating too much over the font size. By changing these years the data is smaller and the VRTs pass reliably. We will fix this more robustly in Update DataBlockGroup to avoid workarounds for VRTs to work #9419.

Test Coverage

• Approve any changes to VRT images based on the chromium version change. They will compare consistently from now on.

QA Brief

• View the VRTs Visual Regression Testing / Run VR Tests check on this ticket and confirm it complete successfully.

Changelog entry

• Fix VRT test failures in CI when launching Chromium, ensuring tests run to completion without errors.

[aaemnnosttv]

IB ✅ !

[benbowler]

Adding a note here from chatting to @hussain-t about the CR of this ticket. I marked it blocked by #9101 (which is with @tofumatt as of 1 hour ago) because the VRTs listed in that ticket will fail here until fixed there. We should merge that ticket ASAP then continue to review this ticket and merge ASAP because every new test added before we merge this ticket requires the VRTs to be re-run for this PR. That's because the update version of Chromium renders most components slightly differently so any previously captured images are invalid.

[techanvil]

QA ✅

Confirmed the VRT tests passed in the test run for the PR: