diff --git a/special-pages/pages/history/integration-tests/history.page.js b/special-pages/pages/history/integration-tests/history.page.js index dde985d5f3..a709b6aebe 100644 --- a/special-pages/pages/history/integration-tests/history.page.js +++ b/special-pages/pages/history/integration-tests/history.page.js @@ -353,6 +353,28 @@ export class HistoryTestPage { await expect(selected).toHaveCount(1); } + /** + * @param {number} nth + */ + async hoversRowIndex(nth) { + const rows = this.page.locator('main').locator('[aria-selected]'); + await rows.nth(nth).hover(); + await rows.nth(nth).locator('[data-action="entries_menu"]').waitFor({ state: 'visible' }); + } + /** + * @param {number} nth + */ + async hoversRowIndexBtn(nth) { + 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 */ @@ -532,6 +554,14 @@ export class HistoryTestPage { return this.page.locator('header'); } + async hoversRange(range) { + await this.page.getByLabel(`Show history for ${range}`).hover(); + } + async hoversRangeDelete(range) { + // await this.page.pause(); + await this.page.getByRole('button', { name: `Delete history for ${range}` }).hover(); + } + /** * @param {number[]} indexes */ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js b/special-pages/pages/history/integration-tests/history.screenshots.spec.js new file mode 100644 index 0000000000..1e920056a0 --- /dev/null +++ b/special-pages/pages/history/integration-tests/history.screenshots.spec.js @@ -0,0 +1,107 @@ +import { expect, test } from '@playwright/test'; +import { HistoryTestPage } from './history.page.js'; + +const maxDiffPixels = 20; + +test.describe('full history screenshots', { tag: ['@screenshots'] }, () => { + test.use({ viewport: { width: 1080, height: 500 } }); + test('empty state', async ({ page }, workerInfo) => { + const hp = HistoryTestPage.create(page, workerInfo).withEntries(0); + await hp.openPage(); + await hp.didMakeInitialQueries({ term: '' }); + await expect(page).toHaveScreenshot('full.empty.light.png', { maxDiffPixels }); + await hp.darkMode(); + await expect(page).toHaveScreenshot('full.empty.dark.png', { maxDiffPixels }); + }); + test('short list (3 items)', async ({ page }, workerInfo) => { + const hp = HistoryTestPage.create(page, workerInfo).withEntries(3); + await hp.openPage(); + await expect(page).toHaveScreenshot('full.short.light.png', { maxDiffPixels }); + await hp.darkMode(); + await expect(page).toHaveScreenshot('full.short.dark.png', { maxDiffPixels }); + }); +}); + +test.describe('history sidebar screenshots', { tag: ['@screenshots'] }, () => { + test.use({ viewport: { width: 1080, height: 400 } }); + test('sidebar active/hover', async ({ page }, workerInfo) => { + const hp = HistoryTestPage.create(page, workerInfo).withEntries(3); + await hp.openPage(); + await hp.selectsToday(); + await hp.hoversRange('yesterday'); + await expect(hp.sidebar()).toHaveScreenshot('sidebar.light.png', { maxDiffPixels }); + await hp.darkMode(); + await expect(hp.sidebar()).toHaveScreenshot('sidebar.dark.png', { maxDiffPixels }); + + await hp.lightMode(); + await hp.hoversRangeDelete('yesterday'); + await expect(hp.sidebar()).toHaveScreenshot('sidebar.delete.light.png', { maxDiffPixels }); + + await hp.darkMode(); + await expect(hp.sidebar()).toHaveScreenshot('sidebar.delete.dark.png', { maxDiffPixels }); + }); +}); + +test.describe('history item selections', { tag: ['@screenshots'] }, () => { + test.use({ viewport: { width: 1080, height: 400 } }); + test('main selecting', async ({ page }, workerInfo) => { + const hp = HistoryTestPage.create(page, workerInfo).withEntries(12); + await hp.openPage(); + await hp.didMakeNthQuery({ nth: 0, query: { term: '' }, source: 'initial' }); + await hp.selectsRowIndex(1); + await hp.selectsRowIndexWithShift(3); + await hp.hoversRowIndex(1); + await expect(hp.main()).toHaveScreenshot('main.select.light.png', { maxDiffPixels }); + await hp.darkMode(); + await expect(hp.main()).toHaveScreenshot('main.select.dark.png', { maxDiffPixels }); + }); + test('main hover', async ({ page }, workerInfo) => { + const hp = HistoryTestPage.create(page, workerInfo).withEntries(12); + await hp.openPage(); + await hp.didMakeNthQuery({ nth: 0, query: { term: '' }, source: 'initial' }); + await hp.hoversRowIndex(0); + await expect(hp.main()).toHaveScreenshot('main.hover.light.png', { maxDiffPixels }); + await hp.darkMode(); + await expect(hp.main()).toHaveScreenshot('main.hover.dark.png', { maxDiffPixels }); + }); + test('main selection + hover', async ({ page }, workerInfo) => { + const hp = HistoryTestPage.create(page, workerInfo).withEntries(12); + await hp.openPage(); + await hp.didMakeNthQuery({ nth: 0, query: { term: '' }, source: 'initial' }); + await hp.selectsRowIndex(1); + await hp.hoversRowIndexBtn(1); + await expect(hp.main()).toHaveScreenshot('main.select+hover.light.png', { maxDiffPixels }); + await hp.darkMode(); + 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('idle header', async ({ page }, workerInfo) => { + const hp = HistoryTestPage.create(page, workerInfo).withEntries(12); + await hp.openPage(); + await hp.didMakeNthQuery({ nth: 0, query: { term: '' }, source: 'initial' }); + 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: '' }, source: 'initial' }); + 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: '' }, source: 'initial' }); + 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 }); + }); +}); diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/full-empty-dark-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/full-empty-dark-integration-darwin.png new file mode 100644 index 0000000000..4a8146047d Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/full-empty-dark-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/full-empty-light-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/full-empty-light-integration-darwin.png new file mode 100644 index 0000000000..895480eb1c Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/full-empty-light-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/full-short-dark-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/full-short-dark-integration-darwin.png new file mode 100644 index 0000000000..05fcbccc9f Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/full-short-dark-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/full-short-light-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/full-short-light-integration-darwin.png new file mode 100644 index 0000000000..c2b99224dc Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/full-short-light-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-delete-dark-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-delete-dark-integration-darwin.png new file mode 100644 index 0000000000..bcc6dd5fd4 Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-delete-dark-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-delete-light-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-delete-light-integration-darwin.png new file mode 100644 index 0000000000..8ed79f6f40 Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-delete-light-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-idle-dark-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-idle-dark-integration-darwin.png new file mode 100644 index 0000000000..eb778ccb3b Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-idle-dark-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-idle-light-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-idle-light-integration-darwin.png new file mode 100644 index 0000000000..2ff1c00b2a Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-idle-light-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-search-dark-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-search-dark-integration-darwin.png new file mode 100644 index 0000000000..0234cbb3b9 Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-search-dark-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-search-light-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-search-light-integration-darwin.png new file mode 100644 index 0000000000..ad9a1ab89f Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/header-search-light-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-hover-dark-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-hover-dark-integration-darwin.png new file mode 100644 index 0000000000..1557141dbb Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-hover-dark-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-hover-light-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-hover-light-integration-darwin.png new file mode 100644 index 0000000000..0018a43e09 Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-hover-light-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-select-dark-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-select-dark-integration-darwin.png new file mode 100644 index 0000000000..14f0f12ea7 Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-select-dark-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-select-hover-dark-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-select-hover-dark-integration-darwin.png new file mode 100644 index 0000000000..9acbb4bdb9 Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-select-hover-dark-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-select-hover-light-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-select-hover-light-integration-darwin.png new file mode 100644 index 0000000000..072e20eb74 Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-select-hover-light-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-select-light-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-select-light-integration-darwin.png new file mode 100644 index 0000000000..38630711dc Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/main-select-light-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/sidebar-dark-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/sidebar-dark-integration-darwin.png new file mode 100644 index 0000000000..b69010bf7d Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/sidebar-dark-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/sidebar-delete-dark-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/sidebar-delete-dark-integration-darwin.png new file mode 100644 index 0000000000..4ed92a2a9c Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/sidebar-delete-dark-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/sidebar-delete-light-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/sidebar-delete-light-integration-darwin.png new file mode 100644 index 0000000000..ea33308693 Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/sidebar-delete-light-integration-darwin.png differ diff --git a/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/sidebar-light-integration-darwin.png b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/sidebar-light-integration-darwin.png new file mode 100644 index 0000000000..0e9dddcc85 Binary files /dev/null and b/special-pages/pages/history/integration-tests/history.screenshots.spec.js-snapshots/sidebar-light-integration-darwin.png differ diff --git a/special-pages/playwright.config.js b/special-pages/playwright.config.js index 9462dc0781..166f78899a 100644 --- a/special-pages/playwright.config.js +++ b/special-pages/playwright.config.js @@ -32,7 +32,8 @@ export default defineConfig({ 'customizer.spec.js', 'activity.spec.js', 'history.spec.js', - 'history-selections.spec.js' + 'history-selections.spec.js', + 'history.screenshots.spec.js', ], use: { ...devices['Desktop Chrome'], @@ -95,7 +96,7 @@ export default defineConfig({ /* Retry on CI only */ retries: process.env.CI ? 2 : 0, /* Opt out of parallel tests on CI. */ - workers: process.env.CI ? 1 : undefined, + workers: process.env.CI ? 2 : undefined, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: 'html', // @ts-expect-error - Type 'undefined' is not assignable to type 'string'. process.env