assertView
Overview
Use the assertView command to take a screenshot for a specific test state and compare it with a reference.
This command is implemented within Testplane, it's not available in the API WebDriverIO.
Usage
await browser.assertView(state, options);
await browser.assertView(state, selector, options);
Command Parameters
| Name | Type | Description |
| state | String | Required parameter. The name of the test state. It must be unique within a single test. |
| selector | String or String[] | Optional parameter. Can be skipped. The DOM element selector to capture. If skipped, current viewport is captured. |
| 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.
selector
Required parameter. Specifies the selector of the DOM element to capture. If not specified or skipped, will be set to body and the following options will be automatically added to options:
{
allowViewportOverflow: true,
compositeImage: false,
captureElementFromTop: false
}
These additional options will have higher priority than assertViewOpts from config, but lower priority than options from options parameter passed by user.
So, assertView without selector parameter will take a screenshot of the current viewport.
options
Specifies the settings for the assertView command:
| Option | Type | Description |
| ignoreElements | Array or String | Elements (specified as selectors) that will be ignored when comparing screenshots. Ignoring is implemented by painting the listed elements black. In the case of a single element, the parameter can be specified as a string. |
| tolerance | Number | Sensitivity to color differences. |
| antialiasingTolerance | Number | Sensitivity to antialiasing. |
| allowViewportOverflow | Boolean | By default, Testplane throws an error if an element is outside the viewport boundaries. This parameter disables boundary checking, allowing screenshots of elements that do not fit within the viewport. Only the parts of the element that fit within the viewport will be visible in the screenshot. However, if compositeImage is set to true, parts of the element that are below the viewport will also be visible in the screenshot. Similarly, if captureElementFromTop is set to true, parts of the element that are above the viewport will also be included in the screenshot. |
| captureElementFromTop | Boolean | Capture a 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 within the viewport, enabling this option will take multiple screenshots of different parts of the element sequentially, and then stitch them together into one image to display the entire element. |
| screenshotDelay | Number | Delay in milliseconds before taking a screenshot. This can be useful when there are elements on the page that use animation, or a scrollbar that does not disappear immediately and ends up in the resulting screenshot. |
| selectorToScroll | String | Selector to scroll. This can be useful when you need to take a screenshot of a modal window that does not fit on the screen. Otherwise, without specifying the selector, the scroll will be applied to the window object, and the background will scroll, leaving the popup window in place. |
| disableAnimation | Boolean | Disable animations and transitions when taking a screenshot. Default is |
| ignoreDiffPixelCount | `${number}%` or Number | Percentage of pixels to ignore in the diff. Useful for ignoring very small diffs.
Default is |
Usage Examples
Visual check of certain element
it("should assert view", async ({ browser }) => {
await browser.url("some/url");
await browser.assertView("plain", ".button");
await browser.click(".button");
await browser.assertView("clicked", ".button");
});
Visual check of current viewport
it("should assert viewport without selector", async ({ browser }) => {
await browser.url("some/url");
await browser.execute(() => window.scrollTo(0, 1000));
await browser.assertView("plain");
await browser.$(".button").click();
await browser.assertView("clicked", { ignoreDiffPixelCount: 5 });
});
Visual check with additional options
it("should assert view with given options", async ({ browser }) => {
await browser.url("some/url");
await browser.assertView("plain", ".form", {
ignoreElements: [".link"],
tolerance: 5,
antialiasingTolerance: 4,
allowViewportOverflow: true,
captureElementFromTop: true,
compositeImage: true,
screenshotDelay: 10,
selectorToScroll: ".modal",
});
});