From 212f4be7942f92a46da6fd6d423fb8cb4a372252 Mon Sep 17 00:00:00 2001 From: Christian Bromann Date: Sat, 6 Jan 2024 17:25:53 -0800 Subject: [PATCH] change interface, add tests --- packages/service/src/index.ts | 20 ++++++++----- packages/service/src/matcher.ts | 33 ++++++++++---------- tests/configs/wdio.local.desktop.conf.ts | 4 +-- tests/specs/matcher.spec.ts | 38 ++++++++++++++++++++++++ 4 files changed, 69 insertions(+), 26 deletions(-) create mode 100644 tests/specs/matcher.spec.ts diff --git a/packages/service/src/index.ts b/packages/service/src/index.ts index fedc5fab..8c9c1877 100644 --- a/packages/service/src/index.ts +++ b/packages/service/src/index.ts @@ -92,20 +92,24 @@ declare global { // eslint-disable-next-line @typescript-eslint/no-unused-vars interface Matchers { toMatchScreenSnapshot( - options: WdioCheckScreenMethodOptions & { tag: string }, - expectedResult: Result + tag: string, + expectedResult: Result, + options: WdioCheckScreenMethodOptions ): R toMatchFullPageSnapshot( - options: WdioCheckFullPageMethodOptions & { tag: string }, - expectedResult: Result + tag: string, + expectedResult: Result, + options: WdioCheckFullPageMethodOptions ): R toMatchElementSnapshot( - options: WdioCheckElementMethodOptions & { tag: string }, - expectedResult: Result + tag: string, + expectedResult: Result, + options: WdioCheckElementMethodOptions ): R toMatchTabbablePageSnapshot( - options: WdioCheckFullPageMethodOptions & { tag: string }, - expectedResult: Result + tag: string, + expectedResult: Result, + options: WdioCheckFullPageMethodOptions ): R } } diff --git a/packages/service/src/matcher.ts b/packages/service/src/matcher.ts index ba73c438..1be4b5d7 100644 --- a/packages/service/src/matcher.ts +++ b/packages/service/src/matcher.ts @@ -10,40 +10,41 @@ import type { export async function toMatchScreenSnapshot ( browser: WebdriverIO.Browser, - options: WdioCheckScreenMethodOptions & { tag: string }, - expectedResult: Result + tag: string, + expectedResult: Result, + options: WdioCheckScreenMethodOptions ) { - const { tag, ...screenOptions } = options - const result = await browser.checkScreen(tag, screenOptions) + const result = await browser.checkScreen(tag, options) return expect(result).toEqual(expectedResult) } export async function toMatchFullPageSnapshot ( browser: WebdriverIO.Browser, - options: WdioCheckFullPageMethodOptions & { tag: string }, - expectedResult: Result + tag: string, + expectedResult: Result, + options: WdioCheckFullPageMethodOptions ) { - const { tag, ...fullPageOptions } = options - const result = await browser.checkFullPageScreen(tag, fullPageOptions) + const result = await browser.checkFullPageScreen(tag, options) return expect(result).toEqual(expectedResult) } export async function toMatchElementSnapshot ( element: WebdriverIO.Element, - options: WdioCheckElementMethodOptions & { tag: string }, - expectedResult: Result + tag: string, + expectedResult: Result, + options: WdioCheckElementMethodOptions ) { const browser = getBrowserObject(element) - const { tag, ...elementOptions } = options - const result = await browser.checkElement(await element, tag, elementOptions) + const result = await browser.checkElement(await element, tag, options) return expect(result).toEqual(expectedResult) } + export async function toMatchTabbablePageSnapshot ( browser: WebdriverIO.Browser, - options: WdioCheckFullPageMethodOptions & { tag: string }, - expectedResult: Result + tag: string, + expectedResult: Result, + options: WdioCheckFullPageMethodOptions ) { - const { tag, ...tabbableOptions } = options - const result = await browser.checkFullPageScreen(tag, tabbableOptions) + const result = await browser.checkFullPageScreen(tag, options) return expect(result).toEqual(expectedResult) } diff --git a/tests/configs/wdio.local.desktop.conf.ts b/tests/configs/wdio.local.desktop.conf.ts index b44cd6ea..dbab05be 100644 --- a/tests/configs/wdio.local.desktop.conf.ts +++ b/tests/configs/wdio.local.desktop.conf.ts @@ -1,6 +1,5 @@ import type { Options } from '@wdio/types' import { join } from 'node:path' -import WdioImageComparisonService from '@wdio/visual-service' import { config as sharedConfig } from './wdio.shared.conf.ts' export const config: Options.Testrunner = { @@ -41,6 +40,7 @@ export const config: Options.Testrunner = { specs: [ '../specs/basics.spec.ts', '../specs/desktop.spec.ts', + '../specs/matcher.spec.ts', '../specs/checkMethodsFolders.spec.ts', '../specs/saveMethodsFolders.spec.ts', ], @@ -52,7 +52,7 @@ export const config: Options.Testrunner = { // Image compare setup // =================== [ - WdioImageComparisonService, + 'visual', { baselineFolder: join(process.cwd(), './localBaseline/'), debug: true, diff --git a/tests/specs/matcher.spec.ts b/tests/specs/matcher.spec.ts new file mode 100644 index 00000000..4c070304 --- /dev/null +++ b/tests/specs/matcher.spec.ts @@ -0,0 +1,38 @@ +import { browser, expect } from '@wdio/globals' + +describe('@wdio/visual-service matcher', () => { + // we don't run this test in multi remote mode + const caps = browser.capabilities as WebdriverIO.Capabilities + const browserName = `${caps.browserName}-${caps.browserVersion}` + + beforeEach(async () => { + await browser.url('/') + await $('.hero__title-logo').waitForDisplayed() + }) + + // Chrome remembers the last position when the url is loaded again, this will reset it. + afterEach(async () => await browser.execute(() => window.scrollTo(0, 0))) + + it(`should match an element successful with a baseline for '${browserName}'`, async () => { + await expect($('.hero__title-logo')).toMatchElementSnapshot('wdioLogo', 0, { + removeElements: [await $('nav.navbar')] + }) + }) + + it(`should match a full page screenshot successful with a baseline for '${browserName}'`, async () => { + await expect(browser).toMatchFullPageSnapshot('fullPage', 0, { + fullPageScrollTimeout: 1500, + hideAfterFirstScroll: [ + await $('nav.navbar'), + ], + }) + }) + + it(`should match a tabbable screenshot successful with a baseline for '${browserName}'`, async () => { + await expect(browser).toMatchTabbablePageSnapshot('tabbable', 0, { + hideAfterFirstScroll: [ + await $('nav.navbar'), + ] + }) + }) +})