import Admonition from "@theme/Admonition";
Use the assertView command to take a screenshot for a specific test state and compare it with a reference.
await browser.assertView(state, options);
await browser.assertView(state, selector, options);| **Name** | **Type** | **Description** |
| [state](#state) | String | Required parameter. The name of the test state. It must be unique within a single test. |
| [selector](#selector) | String or String[] | Optional parameter. Can be skipped. The DOM element selector to capture. If skipped, current viewport is captured. |
| [options](#options) | Object | Settings for the _assertView_ command. |
Required parameter. Specifies the name of the test state. The name must be unique within a single test.
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.
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. For a single element, the parameter can be set as a string. |
| tolerance | Number | Sensitivity to color differences. The value overrides [browsers.tolerance][browsers-tolerance]. |
| antialiasingTolerance | Number | Sensitivity to anti-aliasing. The value overrides [browsers.antialiasingTolerance][browsers-antialiasing-tolerance]. |
| 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. On the screenshot, only the parts of the element that fit into the viewport will be visible. However, if _compositeImage_ is set to _true_, the parts of the element that are below the viewport boundary will also be visible in the screenshot. Similarly, if _captureElementFromTop_ is set to _true_, the parts of the element that are 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. Otherwise, without specifying a selector, the scroll will be applied to the _window_ object, scrolling the background while keeping the popup window in place. |
| disableAnimation | Boolean | Disable animations and transitions when taking a screenshot. Default is `true` starting from version `8.0.0`. |
| ignoreDiffPixelCount | `` `${number}%` `` or Number | The percentage of pixels to ignore during the diff. Useful to ignore very small differences. Default is `0`. Available starting from version `8.2.0`. |
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",
});
});