assertView
Overview
Use the assertView command to take a screenshot of an element for a specific test state and compare it with a reference.
Usage
await browser.$(selector).assertView(state, options);
The assertView command uses waitForExist (with
waitTimeout and waitInterval) to wait for the element to exist before taking a screenshot.
It also automatically waits for static (fonts, images, etc.) to load using the waitForStaticToLoad command.
Command Parameters
| Name | Type | Description |
| state | string | Required parameter. The name of the test state. It must be unique within a single test. |
| options | AssertViewOpts | 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 | string | string[] | Elements (specified as selectors) that will be ignored when comparing screenshots. Ignoring is implemented by painting the listed elements black. If multiple elements match any of the selectors, all matches will be ignored. |
| tolerance | number | Sensitivity to color differences, 3.0 by default. Read more. |
| antialiasingTolerance | number | Sensitivity to antialiasing, 4 by default. Read more. |
| allowViewportOverflow | boolean | By default, Testplane will print a warning if element could not be captured in full, this option disables the warning. Use this option in combination with |
| captureElementFromTop | boolean | By default, Testplane may scroll the element into view before capturing a screenshot, if it's not visible initially. If this option is disabled and element is not visible initially, Testplane will throw an error. |
| compositeImage | boolean | By default, Testplane will take capture the element in full by taking multiple screenshots of the element and scrolling, and then stitch them together. When disabled, only the part of the element that is visible on the first screenshot will be captured. |
| screenshotDelay | number | Delay in milliseconds before taking a screenshot. This can be useful to wait for a scrollbar to disappear before capturing a screenshot. |
| disableAnimation | boolean | Disable animations and transitions when taking a screenshot. Default is |
| ignoreDiffPixelCount | number | `${number}%` | Percentage of pixels to ignore in the diff. Useful for ignoring very small diffs. Default is |
| waitForStaticToLoadTimeout | number | Default is If value is set to |
| disableHover | "always" | "never" | "when-scrolling-needed" | By default, Testplane will disable hover effects if scrolling is needed to capture element in full. Available starting from version |
| cropMargins | { top?: number, right?: number, bottom?: number, left?: number } | Determines the margins to crop the screenshot by. Useful to crop scrollbars on android emulators. Available starting from version |
| selectorToScroll | string | Deprecated. Starting from Testplane 9, the scrollable element is determined automatically. Manual override affects what element Testplane will scroll when capturing a screenshot. |
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");
});
History
| Version | Changes |
|---|---|
| v9.0.0 | Major update to the screenshot engine, see full article for
more details. Added |
| v8.32.0 | Added waitForStaticToLoadTimeout option. |
| v8.2.0 | Added ignoreDiffPixelCount option. |
| v8.0.0 | disableAnimation defaults to true. |