test: More e2e debugging

Author: maxmilton

playwright.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
   },
   expect: {
     toHaveScreenshot: {
+      scale: 'device',
       stylePath: 'test/e2e/screenshot.css',
     },
   },

test/e2e/fixtures.ts

@@ -13,9 +13,9 @@ export const test = baseTest.extend<{
   async context({}, use) {
     const extensionPath = path.join(__dirname, '../../dist');
     const context = await chromium.launchPersistentContext('', {
-      headless: false,
+      // headless: false,
       args: [
-        // '--headless=new', // chromium 112+
+        '--headless=new', // chromium 112+
         // '--virtual-time-budget=5000', // chromium 112+, fast-forward timers
         `--disable-extensions-except=${extensionPath}`,
         `--load-extension=${extensionPath}`,

test/e2e/newtab.spec.ts

@@ -20,6 +20,12 @@ import { expect, test } from './fixtures';
 //  - No external requests
 
 test('newtab page', async ({ page, extensionId }) => {
+  await page.addInitScript(() => {
+    const style = document.createElement('style');
+    style.textContent = "body { font-family: 'Noto Sans', Arial, sans-serif !important; }";
+    document.head.appendChild(style);
+  });
+
   await page.goto(`chrome-extension://${extensionId}/newtab.html`);
 
   await expect(page).toHaveTitle('New Tab');
@@ -50,17 +56,20 @@ test('newtab page', async ({ page, extensionId }) => {
 
   // TODO: More and better assertions.
 
-  // console.log('Body font family:', getComputedStyle(document.body).fontFamily);
+  // FIXME: Remove!!!!!!!
   const fontFamily = await page.evaluate(() => getComputedStyle(document.body).fontFamily);
   console.log('Body font family:', fontFamily);
 });
 
 test('matches screenshot', async ({ page, extensionId }) => {
-  await page.goto(`chrome-extension://${extensionId}/newtab.html`);
-  // await expect(page).toHaveScreenshot('newtab-default.png', { fullPage: true });
-  await expect(page).toHaveScreenshot('newtab-default.png', {
-    stylePath: ['test/e2e/screenshot.css'],
+  await page.addInitScript(() => {
+    const style = document.createElement('style');
+    style.textContent = "body { font-family: 'Noto Sans', Arial, sans-serif !important; }";
+    document.head.appendChild(style);
   });
+
+  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 }) => {

test/e2e/screenshot.css

@@ -1,12 +1,3 @@
-/* font-family: Cantarell, Arial, sans-serif !important; */
 body {
-  color: blue !important;
   font-family: 'Noto Sans', Arial, sans-serif !important;
-  background: red !important;
-}
-
-*,
-*::before,
-*::after {
-  border: 1px solid green !important;
 }

test/e2e/settings.spec.ts

@@ -15,12 +15,15 @@ test('settings page', async ({ page, extensionId }) => {
   await expect(labels[1]).toHaveText('Show bookmarks bar');
   await expect(labels[2]).toHaveText('Sections');
   await expect(labels[3]).toHaveText('Reset');
+
+  // FIXME: Remove!!!!!!!
+  const fontFamily = await page.evaluate(() => getComputedStyle(document.body).fontFamily);
+  console.log('Body font family:', fontFamily);
 });
 
 test('matches screenshot', async ({ page, extensionId }) => {
   await page.goto(`chrome-extension://${extensionId}/settings.html`);
-  // await expect(page).toHaveScreenshot('settings-default.png', { fullPage: true });
-  await expect(page).toHaveScreenshot('settings-default.png');
+  await expect(page).toHaveScreenshot('settings-default.png', { fullPage: true });
 });
 
 test('has no console calls or unhandled errors', async ({ page, extensionId }) => {