header screenshots

Author: shakyShane

special-pages/pages/history/integration-tests/history.page.js

@@ -336,6 +336,12 @@ export class HistoryTestPage {
         const rows = this.page.locator('main').locator('[aria-selected]');
         await rows.nth(nth).locator('[data-action="entries_menu"]').hover();
     }
+    /**
+     *
+     */
+    async hoversDeleteAllBtn() {
+        await this.page.getByRole('button', { name: 'Delete All', exact: true }).hover();
+    }
 
     /**
      * @param {number} nth
@@ -485,6 +491,9 @@ export class HistoryTestPage {
     main() {
         return this.page.locator('main');
     }
+    header() {
+        return this.page.locator('header');
+    }
 
     async hoversRange(range) {
         await this.page.getByLabel(`Show history for ${range}`).hover();

special-pages/pages/history/integration-tests/history.screenshots.spec.js

@@ -79,3 +79,34 @@ test.describe('history item selections', { tag: ['@screenshots'] }, () => {
         await expect(hp.main()).toHaveScreenshot('main.select+hover.dark.png', { maxDiffPixels });
     });
 });
+
+test.describe('history header', { tag: ['@screenshots'] }, () => {
+    test.use({ viewport: { width: 1080, height: 400 } });
+    test.skip(process.env.CI === 'true');
+    test('idle header', async ({ page }, workerInfo) => {
+        const hp = HistoryTestPage.create(page, workerInfo).withEntries(12);
+        await hp.openPage();
+        await hp.didMakeNthQuery({ nth: 0, query: { term: '' } });
+        await expect(hp.header()).toHaveScreenshot('header.idle.light.png', { maxDiffPixels });
+        await hp.darkMode();
+        await expect(hp.header()).toHaveScreenshot('header.idle.dark.png', { maxDiffPixels });
+    });
+    test('search', async ({ page }, workerInfo) => {
+        const hp = HistoryTestPage.create(page, workerInfo).withEntries(12);
+        await hp.openPage();
+        await hp.didMakeNthQuery({ nth: 0, query: { term: '' } });
+        await hp.types('example.com');
+        await expect(hp.header()).toHaveScreenshot('header.search.light.png', { maxDiffPixels });
+        await hp.darkMode();
+        await expect(hp.header()).toHaveScreenshot('header.search.dark.png', { maxDiffPixels });
+    });
+    test('delete button', async ({ page }, workerInfo) => {
+        const hp = HistoryTestPage.create(page, workerInfo).withEntries(12);
+        await hp.openPage();
+        await hp.didMakeNthQuery({ nth: 0, query: { term: '' } });
+        await hp.hoversDeleteAllBtn();
+        await expect(hp.header()).toHaveScreenshot('header.delete.light.png', { maxDiffPixels });
+        await hp.darkMode();
+        await expect(hp.header()).toHaveScreenshot('header.delete.dark.png', { maxDiffPixels });
+    });
+});