Check Settings

checkSettings generates a screenshot of the current page and adds it to the Applitools Eyes Test.

For a complete list of methods and parameters, see CheckSettings class

Syntax

eyes.check(checkSettings)

Holds the checkpoint's configuration. This is defined using a fluent API, starting with Target.

Page screenshot

• To take a viewport screenshot, call Target.window()
• To take a full page screenshot, call Target.window().fully()

Region screenshot

To take an element screenshot, you can specify either a locator or the element representation itself.

Example

const locator = by.css('.banner')
eyes.check('region by locator', Target.region(locator))

const el = element(locator)
eyes.check('region by element', Target.region(el))

Passing a string is interpreted as a css selector:

eyes.check('region by css selector', Target.region('.banner'))

You can also specify the absolute coordinates for a region:

eyes.check('region by coordinates', Target.region({
  left: 10,
  top: 20,
  width: 200,
  height: 80
}))

For all the above options, you can specify .fully() to take the entire content of an element that can be scrolled.

Frames

To take screenshots of elements inside iframes, you can specify the frame using the Target.frame fluent API.

eyes.check('element inside frame', Target.frame('frame-1').region(by.css('.element-inside frame')))

You can take a screenshot of the entire frame:

eyes.check('entire frame', Target.frame('frame-1').fully())

You can make multiple frame calls to create a "frame chain".

eyes.check('element inside nested frames', Target.frame('frame-1').frame('frame-1-1').region(by.css('.nested-element')))

Region in shadow DOM

eyes.check('region in shadow DOM', Target.shadow('EleWithShadowRoot').region('nested-region').fully())

Ignore Regions

The test will not report any mismatches in an ignore region. This is useful for example for areas on the screen whose content is different on every run such as a time of day field.

eyes.check('viewport screenshot with ignore region', Target.window().ignoreRegion('.dynamic-content-here'))

Possible input types:

• string (interpreted as css selector)
• by locator
• element
• coordinates ({left, top, width, height})

Floating Regions

In a Floating Region, the position of a region can move without reporting a mismatch.

eyes.check(
  'viewport screenshot with floating region',
  Target.window().floatingRegion('.floating-area', 10, 10, 10, 10)) // up, down, left, right

Possible input types:

• string (interpreted as css selector)
• by locator
• element
• coordinates ({left, top, width, height})

Region Match Levels

You can set the following match levels for a region:

• Strict: Detect any mismatch visible to the human eye.
• Ignore colors: Similar to the strict match level but ignores changes in colors.
• Layout: Check only the layout and ignore actual text and graphics.

eyes.check('viewport screenshot with ignore colors region', Target.window().ignoreColorsRegion('.some-element'))

eyes.check('viewport screenshot with strict region', Target.window().strictRegion('.some-element'))

eyes.check('viewport screenshot with layout region', Target.window().layoutRegion('.some-element'))

Possible input types:

• string (interpreted as css selector)
• by locator
• element
• coordinates ({left, top, width, height})

For more information, see How to use Eyes match levels in the Eyes Knowledge Center.

Accessibility Regions

Defines an accessibility region and its type.

const {AccessibilityRegionType} = require('@applitools/eyes-webdriverio')

eyes.check(
  'viewport screenshot with accessibility region',
  Target.window().accessibilityRegion('.some-element', AccessibilityRegionType.LargeText)
)

Possible input types:

• string (interpreted as css selector)
• by locator
• element
• coordinates ({left, top, width, height})

Scroll root element

Normally, Eyes selects the most appropriate element to scroll to execute the Fully keyword. You can use the scrollRootElement element to specify the element to scroll explicitly.

eyes.check(
  'full page with custom scroll root element',
  Target.window().fully().scrollRootElement('.main-content')
)

Possible input types:

• string (interpreted as css selector)
• by locator
• element

Variation group ID

eyes.check(Target.window().variationGroupId('Login button on the right'))

For more information, see Automated test maintenance of baseline variations in the Eyes Knowledge Center.

Lazy loading (lazyLoad)

The SDK can scroll the entire page, or a specific length of the page, to make sure all lazyily loaded assets are on the page before performing a check.

Default values

• scrollLength: 300 px
• waitingTime: 2000ms
• maxAmountToScroll: 15,000 px

// lazy loads with default values
eyes.check(Target.window().lazyLoad())

// lazy loads with options specified
eyes.check(Target.window().lazyLoad({
  maxAmountToScroll: 1000,   // total pixels of the page to be scrolled
  scrollLength: 250,  // amount of pixels to use for each scroll attempt
  waitingTime: 500,   // milliseconds to wait in-between each scroll attempt
}))

Possible input types:

• nothing (enables sensible defaults)
• options object ({maxAmountToScroll, waitingTime, scrollLength})

Other details:

• If an option is omitted, the sensible default for that value will be used
• The SDK will repeatedly scroll the page using the scrollLength until either the page cannot be scrolled further or the maxAmountToScroll has been reached (whichever happens first)
• If more time is needed for additional content to load, increase the waitingTime to a value higher than 500 milliseconds. If additional content lazily loads faster than the default waitingTime, you can improve performance by setting waitingTime a value below 500 milliseconds

WebView (webview)

When working with native apps that have webviews, you can capture their contents in a check command.

// the SDK will automatically switch to the first available web view
eyes.check(Target.webview())

// they can also specify the webview id (if it's static and they know what it is)
eyes.check(Target.webview('webview-id'))

After the check command, the SDK will switch the driver back to the app context that it was prior to performing the check.

Density metrics (densityMetrics)

To set the density metrics for the screenshot, use the densityMetrics method. This method accepts a object value with the following properties:

• xdpi - The exact physical pixels per inch of the screen in the X dimension.
• ydpi - The exact physical pixels per inch of the screen in the Y dimension.
• scaleRatio - The scale ratio.

// set density metrics
eyes.check(Target.window().densityMetrics({
  xdpi: 100,
  ydpi: 100,
  scaleRatio: 1
}))

Other checkSettings configuration

• hideScrollbars
• hideCaret
• ignoreDisplacements
• useDom
• enablePatterns
• withName