diff --git a/playwright.config.ts b/playwright.config.ts index 300318f0e..8972c36f9 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -12,6 +12,7 @@ export default defineConfig({ }, expect: { toHaveScreenshot: { + scale: 'device', stylePath: 'test/e2e/screenshot.css', }, }, diff --git a/test/e2e/fixtures.ts b/test/e2e/fixtures.ts index ecb4c7ab1..4bf35c77d 100644 --- a/test/e2e/fixtures.ts +++ b/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}`, diff --git a/test/e2e/newtab.spec.ts b/test/e2e/newtab.spec.ts index 3b05d1679..fb2e677ee 100644 --- a/test/e2e/newtab.spec.ts +++ b/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 }) => { diff --git a/test/e2e/screenshot.css b/test/e2e/screenshot.css index ba6939aca..d7e8b045e 100644 --- a/test/e2e/screenshot.css +++ b/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; } diff --git a/test/e2e/settings.spec.ts b/test/e2e/settings.spec.ts index 318458c9a..b1627e356 100644 --- a/test/e2e/settings.spec.ts +++ b/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 }) => {