test: Add more e2e tests + stricter e2e test config

Author: maxmilton

manifest.config.ts

@@ -73,7 +73,7 @@ export const createManifest = (
       "style-src 'self'",
       "img-src 'self'",
       "base-uri 'none'",
-      '',
+      '', // include trailing semicolon
     ].join(';'),
   },
   cross_origin_embedder_policy: {

test/e2e/fixtures.ts

@@ -19,6 +19,9 @@ export const test = baseTest.extend<{
         `--disable-extensions-except=${extensionPath}`,
         `--load-extension=${extensionPath}`,
       ],
+      acceptDownloads: false,
+      strictSelectors: true,
+      offline: true, // the extension must work 100% offline
     });
     await use(context);
     await context.close();

test/e2e/newtab.spec.ts

@@ -1,17 +1,67 @@
+import type { ConsoleMessage } from '@playwright/test';
 import { expect, test } from './fixtures';
 
+// TODO: Write tests to verify:
+//  - No console logs/errors -- including/especially CSP violations
+//  - Theme loader works
+//  - Custom order of sections (default, reorder, remove one, remove all)
+//  - Bookmarks load correctly
+//  - Open tabs is correctly populated
+//  - Open tabs events produce expected results
+//  - Top sites is populated
+//  - Search works
+//  - Open extension settings link works
+//  - Clicking on a link works:
+//    - bookmark
+//    - bookmark to chrome internal page
+//    - open tab
+//    - open tab to chrome internal page)
+//  - Every use of the "chrome" API
+//  - No external requests
+
 test('newtab page', async ({ page, extensionId }) => {
   await page.goto(`chrome-extension://${extensionId}/newtab.html`);
 
-  // FIXME: Better assertions
+  await expect(page).toHaveTitle('New Tab');
+  await expect(page).toHaveURL(`chrome-extension://${extensionId}/newtab.html`); // didn't redirect
 
   const h2s = await page.locator('h2').all();
-  expect(h2s).toHaveLength(5);
   await expect(h2s[0]).toHaveText('Open Tabs');
   await expect(h2s[1]).toHaveText('Bookmarks');
   await expect(h2s[2]).toHaveText('History');
   await expect(h2s[3]).toHaveText('Top Sites');
   await expect(h2s[4]).toHaveText('Recently Closed Tabs');
+  await expect(h2s[0]).toBeAttached();
+  await expect(h2s[1]).toBeAttached();
+  await expect(h2s[2]).toBeAttached();
+  await expect(h2s[3]).toBeAttached();
+  await expect(h2s[4]).toBeAttached();
+  expect(h2s).toHaveLength(5);
+
+  await expect(page.locator('#b')).toBeAttached(); // bookmarks
+  await expect(page.locator('#s')).toBeAttached(); // search
+  await expect(page.locator('#m')).toBeAttached(); // menu
+  await expect(page.locator('#d')).toBeAttached(); // menu dropdown
+
+  // TODO: Move these to their own test.
+  // const menuDropdown = page.locator('#d');
+  // await expect(menuDropdown).toBeAttached();
+  // await expect(menuDropdown).not.toBeVisible();
+
+  // TODO: More and better assertions.
 });
 
-// TODO: Test it makes no external requests
+test('matches screenshot', async ({ page, extensionId }) => {
+  await page.goto(`chrome-extension://${extensionId}/newtab.html`);
+  await expect(page).toHaveScreenshot('newtab-default.png', { fullPage: true });
+});
+
+test('has no console calls or unhandled errors', async ({ page, extensionId }) => {
+  const unhandledErrors: Error[] = [];
+  const consoleMessages: ConsoleMessage[] = [];
+  page.on('pageerror', (err) => unhandledErrors.push(err));
+  page.on('console', (msg) => consoleMessages.push(msg));
+  await page.goto(`chrome-extension://${extensionId}/newtab.html`);
+  expect(unhandledErrors).toHaveLength(0);
+  expect(consoleMessages).toHaveLength(0);
+});

test/e2e/newtab.spec.ts-snapshots/newtab-default-linux.png

@@ -5,11 +5,19 @@ test('settings page', async ({ page, extensionId }) => {
 
   // FIXME: Better assertions
 
+  await expect(page).toHaveTitle('New Tab');
+  await expect(page).toHaveURL(`chrome-extension://${extensionId}/settings.html`); // didn't redirect
+
   const labels = await page.locator('label').all();
   expect(labels).toHaveLength(3);
   await expect(labels[0]).toHaveText('Theme');
   await expect(labels[1]).toHaveText('Sections');
   await expect(labels[2]).toHaveText('Reset');
 });
 
+test('matches screenshot', async ({ page, extensionId }) => {
+  await page.goto(`chrome-extension://${extensionId}/settings.html`);
+  await expect(page).toHaveScreenshot('settings-default.png', { fullPage: true });
+});
+
 // TODO: Test it makes no external requests