Doodle test

This page demonstrates how Doc Detective keeps images in sync with a live website. Automated Doc Detective tests update the images daily.

Why this matters​

This is a proof of concept for using Doc Detective to keep screenshots current automatically. Documentation often goes stale because someone has to remember to manually go through and retake screenshots. Here, the test itself captures the image on a schedule, so the page never shows an outdated picture of a UI that changes daily.

The test also compares each capture against a saved reference image and reports how different they are. That reference only gets replaced when a capture differs from it by more than the threshold, so it isn't strictly "yesterday's" image — it's whatever was last saved. Most days the difference is small, because Google is showing the same plain logo the reference already has. On days Google ships a new doodle, the difference is large enough to replace it. Either way is a legitimate outcome, not a failure: the comparison exists to show how much changed, not to gate pass/fail. See How the test works.

Latest result​

Animated doodle (GIF)​

Loading…

Homepage screenshot​

How the test works​

Doc Detective runs the following steps twice a day, at a fixed desktop viewport:

1. Navigate to google.com.

2. Capture a screenshot of the full homepage and save it as doodle.png, comparing it against the reference image already saved at that path. If the two differ by more than 10%, the comparison is reported as exceeding the threshold and the reference image is replaced with today's capture; either way, the step never fails the test.

3. Download the animated GIF, if today's doodle has one, and save it as doodle.gif.

An earlier version of this test cropped the screenshot to a specific element on Google's homepage (#hplogo). That element only exists on days Google is running a special doodle — on every other day the crop target couldn't be found, the step failed, and the whole run silently produced no update. Capturing the full page instead of a cropped element sidesteps that: Google's internal class and ID names are obfuscated and rotate across builds, but the page itself always renders.

What makes this test fail​

The test fails only if the browser can't reach google.com at all, or the GIF download script errors for a reason other than "no animated doodle today" (see the script's own error handling). A large difference between today's screenshot and the reference image is expected behavior, not a failure — it's exactly what a new doodle looks like from this test's point of view.

Run the test manually​

If you clone this repo, then you can run the test locally.

npm install -g doc-detective
doc-detective --config doc-detective/config.json --input website/src/pages/doc-detective/doodle-test.mdx

This updates the images in website/static/doc-detective/ on your local machine. You can then commit and push the changes manually.

Run the test on GitHub Actions​

The test runs automatically twice a day, at 09:00 UTC (2:00 AM Pacific) and 15:00 UTC (8:00 AM Pacific), as a fallback in case the doodle hasn't rolled out yet during the first run. To trigger it on demand:

1. Go to the Actions tab in the GitHub repository.
2. Select Update doodle.
3. Click Run workflow.