e2e: add snapshot tests for homepage

Adds accessibility tree and image snapshot tests
for the homepage. These tests will create diffs
on failure. Timeouts and diff thresholds are
configurable if adjustments are needed to prevent
test flake. API for image snapshots is available
here: https://github.com/americanexpress/jest-image-snapshot\#%EF%B8%8F-api.

To run the tests locally, start the pkgsite server and then run
./devtools/npm.sh run test-e2e

Change-Id: I73a60764bb60b494230b92b88b7eb989f10c00d4
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/280693
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Julie Qiu <julie@golang.org>

doc/frontend.md

@@ -49,6 +49,15 @@ If you add, change or remove any inline scripts in templates, run
 `devtools/cmd/csphash` to update the hashes. Running `all.bash`
 will do that as well.
 
+### Testing
+
+Pages on pkg.go.dev have accessibility tree and image snapshot tests. These tests
+will create diffs for inspection on failure. Timeouts and diff thresholds are
+configurable for image snapshots if adjustments are needed to prevent test flake.
+See the [API](https://github.com/americanexpress/jest-image-snapshot#%EF%B8%8F-api) for jest image snapshots for more information.
+
+To run the tests locally, start the pkgsite server and then run
+`./devtools/npm.sh run test-e2e`
 ### Compiling JS sources
 
 The frontend serves compiled and minified JS. If you're modifying any JS code, make

e2e/__snapshots__/homepage.test.ts.snap

@@ -0,0 +1,202 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Homepage accessibility tree matches snapshot 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "name": "Black Lives Matter",
+      "role": "text",
+    },
+    Object {
+      "name": "Support the Equal Justice Initiative",
+      "role": "link",
+    },
+    Object {
+      "name": "Link to Go homepage",
+      "role": "link",
+    },
+    Object {
+      "description": "Why Go",
+      "name": "Why Go",
+      "role": "link",
+    },
+    Object {
+      "description": "Getting Started",
+      "name": "Getting Started",
+      "role": "link",
+    },
+    Object {
+      "description": "Discover Packages",
+      "name": "Discover Packages",
+      "role": "link",
+    },
+    Object {
+      "name": "About",
+      "role": "link",
+    },
+    Object {
+      "name": "Cartoon gopher typing",
+      "role": "img",
+    },
+    Object {
+      "description": "Search for Go packages",
+      "focused": true,
+      "name": "Search for Go packages",
+      "role": "textbox",
+    },
+    Object {
+      "name": "Search",
+      "role": "button",
+    },
+    Object {
+      "name": "EXAMPLE SEARCHES:",
+      "role": "text",
+    },
+    Object {
+      "name": "“http”",
+      "role": "link",
+    },
+    Object {
+      "name": "“command”",
+      "role": "link",
+    },
+    Object {
+      "name": "“yaml OR json OR xml”",
+      "role": "link",
+    },
+    Object {
+      "name": "Search help",
+      "role": "link",
+    },
+    Object {
+      "name": "Frequently asked questions:",
+      "role": "text",
+    },
+    Object {
+      "name": "How can I add a package?",
+      "role": "link",
+    },
+    Object {
+      "name": "How can I remove a package?",
+      "role": "link",
+    },
+    Object {
+      "name": "How can I add a go badge in my README file?",
+      "role": "link",
+    },
+    Object {
+      "description": "Why Go",
+      "name": "Why Go",
+      "role": "link",
+    },
+    Object {
+      "description": "Use Cases",
+      "name": "Use Cases",
+      "role": "link",
+    },
+    Object {
+      "description": "Case Studies",
+      "name": "Case Studies",
+      "role": "link",
+    },
+    Object {
+      "description": "Getting Started",
+      "name": "Getting Started",
+      "role": "link",
+    },
+    Object {
+      "name": "Playground",
+      "role": "link",
+    },
+    Object {
+      "name": "Tour",
+      "role": "link",
+    },
+    Object {
+      "name": "Stack Overflow",
+      "role": "link",
+    },
+    Object {
+      "description": "Discover Packages",
+      "name": "Discover Packages",
+      "role": "link",
+    },
+    Object {
+      "description": "About",
+      "name": "About",
+      "role": "link",
+    },
+    Object {
+      "name": "Download",
+      "role": "link",
+    },
+    Object {
+      "name": "Blog",
+      "role": "link",
+    },
+    Object {
+      "name": "Release Notes",
+      "role": "link",
+    },
+    Object {
+      "name": "Brand Guidelines",
+      "role": "link",
+    },
+    Object {
+      "name": "Code of Conduct",
+      "role": "link",
+    },
+    Object {
+      "description": "Connect",
+      "name": "Connect",
+      "role": "link",
+    },
+    Object {
+      "name": "Twitter",
+      "role": "link",
+    },
+    Object {
+      "name": "GitHub",
+      "role": "link",
+    },
+    Object {
+      "name": "Slack",
+      "role": "link",
+    },
+    Object {
+      "name": "Meetup",
+      "role": "link",
+    },
+    Object {
+      "name": "Gopher in flight goggles",
+      "role": "img",
+    },
+    Object {
+      "name": "Copyright",
+      "role": "link",
+    },
+    Object {
+      "name": "Terms of Service",
+      "role": "link",
+    },
+    Object {
+      "name": "Privacy Policy",
+      "role": "link",
+    },
+    Object {
+      "name": "Report an Issue",
+      "role": "link",
+    },
+    Object {
+      "name": "golang.org",
+      "role": "link",
+    },
+    Object {
+      "name": "Google logo",
+      "role": "link",
+    },
+  ],
+  "name": "Home · pkg.go.dev",
+  "role": "WebArea",
+}
+`;

e2e/homepage.test.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2020 The Go Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+import puppeteer, { Page } from 'puppeteer';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+
+expect.extend({ toMatchImageSnapshot });
+
+describe('Homepage', () => {
+  const baseUrl = process.env.FRONTEND_URL ?? '';
+  let page: Page;
+  let browser: puppeteer.Browser;
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch({
+      args: ['--no-sandbox', '--disable-dev-shm-usage'],
+      defaultViewport: { height: 800, width: 1280 },
+    });
+  });
+
+  beforeEach(async () => {
+    page = await browser.newPage();
+    await page.goto(baseUrl);
+  });
+
+  afterEach(async () => await page.close());
+
+  afterAll(async () => await browser.close());
+
+  test('accessibility tree matches snapshot', async () => {
+    const a11yTree = await page.accessibility.snapshot();
+    expect(a11yTree).toMatchSnapshot();
+  });
+
+  test('desktop viewport matches image snapshot', async () => {
+    const image = await page.screenshot({ fullPage: true });
+    expect(image).toMatchImageSnapshot();
+  });
+
+  test('mobile viewport matches image snapshot', async () => {
+    await page.emulate(puppeteer.devices['Pixel 2']);
+    const image = await page.screenshot({ fullPage: true });
+    expect(image).toMatchImageSnapshot();
+  });
+});