change interface, add tests

packages/service/src/index.ts

@@ -92,20 +92,24 @@ declare global {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  interface Matchers<R, T> {
  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
  }
  }

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)
 }

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,

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'),
+ ]
+ })
+ })
+})