Patch Changes

• 4dcfeea: add missing dependency and update deps

Minor Changes

• All logs will now be using the WDIO service logger instead of the console output.
• due to removing the logLevel property from the service options diff image are not stored if the logLevel is set to debug. To still get the Image Diffs for all checks you can provide the option --store-all-diffs through the cli like this

npm run wdio wdio.conf.ts -- --store-all-diffs

Minor Changes

• c9fab82: All logs will now be using the WDIO service logger instead of the console output.
• due to removing the logLevel property from the service options diff image are not stored if the logLevel is set to debug. To still get the Image Diffs for all checks you can provide the option --store-all-diffs through the cli like this

npm run wdio wdio.conf.ts -- --store-all-diffs

Patch Changes

• Updated dependencies [c9fab82]
  • [email protected]

Patch Changes

• f878cab: # 🚀 Feature

  • Add device support for Storybook, it can be used like this

  npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --devices="iPhone 14 Pro Max","Pixel 3 XL"
  

  Committers: 1

  • Wim Selles (@wswebcreation)

Patch Changes

• f878cab: # 🚀 Feature

  • Add device support for Storybook, it can be used like this

  npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --devices="iPhone 14 Pro Max","Pixel 3 XL"
  

  Committers: 1

  • Wim Selles (@wswebcreation)

• Updated dependencies [f878cab]

  • [email protected]

🐛 Bug fix

• bb4ece7: Fix storybook filtering to also support Storybook V8

Committers: 1

• Wim Selles (@wswebcreation)

Major Changes

• b717d9a: # 💥 Breaking changes

  • the new element screenshot is producing "smaller" screenshots on certain Android OS versions (not all), but it's more "accurate" so we accept this

  🚀 New Features

  Add StoryBook📖 support

  Automatically scan local/remote storybook instances to create element screenshots of each component by adding

  export const config: Options.Testrunner = {
    // ...
    services: ["visual"],
    // ....
  };
  

  to your services and running npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook through the command line. It will automatically use Chrome. The following options can be provided through the command line

  • --headless, defaults to true

  • --numShards {number}, this will be the amount of parallel instances that will be used to run the stories. This will be limited by the maxInstances in your wdio.conf-file. When running in headless-mode then do not increase the number to more than 20 to prevent flakiness

  • --clip {boolean}, try to take an element instead of a viewport screenshot, defaults to true

  • --clipSelector {string}, this is the selector that will be used to:

    • select the element to take the screenshot of
    • the element to wait for to be visible before a screenshot is taken

    defaults to #storybook-root > :first-child for V7 and #root > :first-child:not(script):not(style) for V6

  • --version, the version of storybook, defaults to 7. This is needed to know if the V6 clipSelector needs to be used.

  • --browsers {edge,chrome,safari,firefox}, defaults to Chrome

  • --skipStories, this can be:

    • a string (example-button--secondary,example-button--small)
    • or a regex ("/.*button.*/gm") to skip certain stories

  You can also provide service options

  export const config: Options.Testrunner = {
      // ...
      services: [
        [
          'visual',
          {
              // Some default options
              baselineFolder: join(process.cwd(), './__snapshots__/'),
              debug: true,
              // The storybook options
              storybook: {
                  clip: false,
                  clipSelector: ''#some-id,
                  numShards: 4,
                  skipStories: ['example-button--secondary', 'example-button--small'],
                  url: 'https://www.bbc.co.uk/iplayer/storybook/',
                  version: 6,
              },
          },
        ],
      ],
      // ....
  }
  

  The baseline images will be stored in the following structure:

  {projectRoot}
  |_`__snapshots__`
    |_`{category}`
      |_`{componentName}`
        |_{browserName}
          |_`{{component-id}-element-{browser}-{resolution}-dpr-{dprValue}}.png`
  

  which will look like this

  

  [!NOTE] Storybook 6.5 or higher is supported

  💅 Polish

  • hideScrollBars is disabled by default when using the Storybook runner
  • By default, all element screenshots in the browser, except for iOS, will use the native method to take element screenshots. This will make taking an element screenshot more than 5% faster. If it fails it will fall back to the "viewport" screenshot and create a cropped element screenshot.
  • Taking an element screenshot becomes 70% faster due to removing the fixed scroll delay of 500ms and changing the default scrolling behaviour to an instant scroll
  • refactor web element screenshots and update the screenshots
  • added more UTs to increase the coverage

  🐛 Bug Fixes

  • When the element has no height or width, we default to the viewport screen size to prevent not cropping any screenshot. An error like below will be logged in red

  
  The element has no width or height. We defaulted to the viewport screen size of width: ${width} and height: ${height}.
  
  

  • There were cases where element screenshots were automatically rotated which was not intended

Committers: 1

• Wim Selles (@wswebcreation)

Major Changes

• b717d9a: # 💥 Breaking changes

  • the new element screenshot is producing "smaller" screenshots on certain Android OS versions (not all), but it's more "accurate" so we accept this

  🚀 New Features

  Add StoryBook📖 support

  Automatically scan local/remote storybook instances to create element screenshots of each component by adding

  export const config: Options.Testrunner = {
    // ...
    services: ["visual"],
    // ....
  };
  

  to your services and running npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook through the command line. It will automatically use Chrome. The following options can be provided through the command line

  • --headless, defaults to true

  • --numShards {number}, this will be the amount of parallel instances that will be used to run the stories. This will be limited by the maxInstances in your wdio.conf-file. When running in headless-mode then do not increase the number to more than 20 to prevent flakiness

  • --clip {boolean}, try to take an element instead of a viewport screenshot, defaults to true

  • --clipSelector {string}, this is the selector that will be used to:

    • select the element to take the screenshot of
    • the element to wait for to be visible before a screenshot is taken

    defaults to #storybook-root > :first-child for V7 and #root > :first-child:not(script):not(style) for V6

  • --version, the version of storybook, defaults to 7. This is needed to know if the V6 clipSelector needs to be used.

  • --browsers {edge,chrome,safari,firefox}, defaults to Chrome

  • --skipStories, this can be:

    • a string (example-button--secondary,example-button--small)
    • or a regex ("/.*button.*/gm") to skip certain stories

  You can also provide service options

  export const config: Options.Testrunner = {
      // ...
      services: [
        [
          'visual',
          {
              // Some default options
              baselineFolder: join(process.cwd(), './__snapshots__/'),
              debug: true,
              // The storybook options
              storybook: {
                  clip: false,
                  clipSelector: ''#some-id,
                  numShards: 4,
                  skipStories: ['example-button--secondary', 'example-button--small'],
                  url: 'https://www.bbc.co.uk/iplayer/storybook/',
                  version: 6,
              },
          },
        ],
      ],
      // ....
  }
  

  The baseline images will be stored in the following structure:

  {projectRoot}
  |_`__snapshots__`
    |_`{category}`
      |_`{componentName}`
        |_{browserName}
          |_`{{component-id}-element-{browser}-{resolution}-dpr-{dprValue}}.png`
  

  which will look like this

  

  [!NOTE] Storybook 6.5 or higher is supported

  💅 Polish

  • hideScrollBars is disabled by default when using the Storybook runner
  • By default, all element screenshots in the browser, except for iOS, will use the native method to take element screenshots. This will make taking an element screenshot more than 5% faster. If it fails it will fall back to the "viewport" screenshot and create a cropped element screenshot.
  • Taking an element screenshot becomes 70% faster due to removing the fixed scroll delay of 500ms and changing the default scrolling behaviour to an instant scroll
  • refactor web element screenshots and update the screenshots
  • added more UTs to increase the coverage

  🐛 Bug Fixes

  • When the element has no height or width, we default to the viewport screen size to prevent not cropping any screenshot. An error like below will be logged in red

  
  The element has no width or height. We defaulted to the viewport screen size of width: ${width} and height: ${height}.
  
  

  • There were cases where element screenshots were automatically rotated which was not intended

Patch Changes

• Updated dependencies [b717d9a]
  • [email protected]

Committers: 1

• Wim Selles (@wswebcreation)

🚀 New Features

• 43ed502: Add font loading features:
  • add waitForFontsLoaded so the module automatically waits for all fonts to be loaded, enabled by default
  • add enableLayoutTesting so all text will become transparent so
    • font rendering issues won't cause flakiness
    • image comparison can be done on the layout

Examples:

On element level

On Screen level

Committers: 1

• Wim Selles (@wswebcreation)

🚀 New Features

• 43ed502: Add font loading features:
  • add waitForFontsLoaded so the module automatically waits for all fonts to be loaded, enabled by default
  • add enableLayoutTesting so all text will become transparent so
    • font rendering issues won't cause flakiness
    • image comparison can be done on the layout

Examples:

On element level

On Screen level

🐛 Bug fix

• 6e3b0b2: Fix standalone support Standalone/remote now needs to be used like this

import { remote } from 'webdriverio'
import VisualService from '@wdio/visual-service'

const visualService = new VisualService({
    autoSaveBaseline: true
})

const browser = await remote({
    logLevel: 'silent',
    capabilities: {
        browserName: 'firefox',
    }
})

// Add this to "Start" the service
visualService.remoteSetup(browser)

await browser.url('https://webdriver.io/')

await browser.checkScreen('examplePaged', {})

await browser.deleteSession()

Patch Changes

• Updated dependencies [43ed502]
  • [email protected]

Committers: 1

• Wim Selles (@wswebcreation)