playwright: verify that dark mode works

I would have preferred a way to test this in a more generic way, e.g. by
getting the pixel value of the blurred image (to emulate averaging). I
was thinking about something like this:

  const { w, h } = await page.evaluate(() => {
    document.querySelector('#tagline').innerHTML = '--dark-mode-for-dark-times';

    const overlay = document.createElement('div');
    overlay.style.backdropFilter = 'blur(500px)';
    overlay.style.backgroundColor = '#7f7f7f00';
    overlay.style.width = '100%';
    overlay.style.height = '100%';
    overlay.style.position = 'absolute';
    overlay.style.top = '0';
    overlay.style.left = '0';
    overlay.style.zIndex = '+5000';
    document.body.insertBefore(overlay, document.body.firstChild);
    return { w: window.innerWidth, h: window.innerHeight };
  })

  const pixel = await screenshot({ clip: { x: 50, y: 50, width: 1, height: 1 } });

I wanted to compare this pixel value between light/dark mode and ensure
that the light mode's pixel value is lighter than the dark mode one.

However, this approach did not work because `pixel`'s value is a
`Buffer` that contains a PNG, therefore I would have to jump through
hoops to get to that pixel value.

Besides, in my tests the screenshot was always taken so fast that the
renderer did not get a chance to render the blurred page before the
screenshot was taken. There is probably a way to listen for an event to
await that, but it all got too complicated for my liking.

In the end I settled for recording screenshots for all the browsers
supported by Playwright, at least for now.

The big advantage of using screenshots is that it is much clearer what
is being tested. A secondary advantage is that having individual
screenshots for the different browsers documents their (subtle)
differences.

Signed-off-by: Johannes Schindelin <[email protected]>

Author: dscho

tests/git-scm.spec.js

@@ -290,3 +290,32 @@ test('small-and-fast', async ({ page }) => {
   const lastGraph = page.locator('.bar-chart').last();
   await expect(lastGraph).toBeInViewport();
 });
+
+test('dark mode', async({ page }) => {
+  await page.setViewportSize(devices['iPhone X'].viewport);
+
+  await page.goto(`${url}`);
+  await page.evaluate(() => {
+    document.querySelector('#tagline').innerHTML = '--dark-mode-for-dark-times';
+  });
+  const darkModeButton = page.locator('#dark-mode-button');
+
+  const o = { maxDiffPixels: 30 };
+  await expect(page).toHaveScreenshot({ name: 'light-mode.png', ...o });
+  await darkModeButton.click();
+  await expect(page).toHaveScreenshot({ name: 'dark-mode.png', ...o });
+
+  // Now, try again, but this time with system's preference being dark mode
+
+  await page.emulateMedia({ colorScheme: 'dark' });
+  await page.evaluate(() => window.localStorage.clear());
+  await page.evaluate(() => window.sessionStorage.clear());
+  await page.reload();
+  await page.evaluate(() => {
+    document.querySelector('#tagline').innerHTML = '--dark-mode-for-dark-times';
+  });
+
+  await expect(page).toHaveScreenshot({ name: 'dark-mode.png', ...o });
+  await darkModeButton.click();
+  await expect(page).toHaveScreenshot({ name: 'light-mode.png', ...o });
+})