assertView
Overview
Use the assertView command to take a screenshot of an element for a specific test state and compare it with a reference.
This command is implemented within Testplane and is not available in the API WebDriverIO.
Usage
await browser.$(selector).assertView(state, options);
During execution, the assertView command calls waitForExist with waitTimeout and waitInterval.
Command Parameters
| Name | Type | Description |
| state | String | Required parameter. The name of the test state. It must be unique within a single test. |
| options | Object | Settings for the assertView command. |
state
Required parameter. Specifies the name of the test state. The name must be unique within a single test.
options
Specifies the settings for the assertView command:
| Option | Type | Description |
| ignoreElements | Array or String | Elements (specified as selectors) to be ignored when comparing screenshots. Ignoring is implemented by painting the listed elements black. For a single element, the parameter can be set as a string. |
| tolerance | Number | Sensitivity to color differences. The value overrides browsers.tolerance. |
| antialiasingTolerance | Number | Sensitivity to antialiasing. The value overrides browsers.antialiasingTolerance. |
| allowViewportOverflow | Boolean | By default, Testplane throws an error if the element is outside the viewport boundaries. This parameter disables boundary checks, allowing screenshots of elements that don't fully fit in the viewport. Only the portions of the element visible in the viewport will be shown in the screenshot. However, if compositeImage is set to true, the parts of the element below the viewport boundary will also be visible in the screenshot. Similarly, if captureElementFromTop is set to true, the parts of the element above the viewport boundary will also be captured in the screenshot. |
| captureElementFromTop | Boolean | Capture the screenshot of the element from the very top. If the element is outside the viewport, it will be scrolled into view. |
| compositeImage | Boolean | If the element does not fit into the viewport, multiple screenshots of different parts of the element will be taken sequentially and then stitched together into one to display the entire element. |
| screenshotDelay | Number | Delay in milliseconds before taking a screenshot. Useful when there are elements with animations on the page or a scrollbar that does not disappear immediately and appears in the resulting screenshot. |
| selectorToScroll | String | Selector to scroll. Useful when you need to take a screenshot of a modal window that doesn’t fit on the screen. Without specifying a selector, the scroll will be applied to the window object, scrolling the background and leaving the popup window in place. |
| disableAnimation | Boolean | Disable animations and transitions when taking a screenshot. Default is |
| ignoreDiffPixelCount | `${number}%` or Number | The percentage of pixels to ignore during the diff. Useful to ignore very small
diffs. Default is |
Usage Examples
example.js
it("should assert view", async ({ browser }) => {
await browser.url("some/url");
const elem = await browser.$(".button");
await elem.assertView("plain");
await elem.click();
await elem.assertView("clicked");
});