assertView

Обзор

Используйте команду assertView, чтобы снять скриншот для определенного состояния теста и сравнить его с эталонным.

к сведению

Команда assertView использует waitForExist (с waitTimeout и waitInterval), чтобы дождаться появления элемента перед снятием скриншота.

Также она автоматически ждет загрузки статики (шрифтов, изображений и т.д.) с помощью команды waitForStaticToLoad.

Использование

await browser.assertView(state, options);
await browser.assertView(state, selector, options);

Параметры команды

Имя	Тип	Описание
state	`string`	Обязательный параметр. Название состояния теста. Должно быть уникальным в пределах одного теста.
selector	`string \| string[]`	Необязательный параметр. Может быть пропущен. Селектор DOM-элемента, который нужно снять. Если параметр не передан, снимается текущий вьюпорт.
options	`AssertViewOpts`	Необязательные настройки команды assertView.

state

Обязательный параметр. Задает название состояния теста. Название должно быть уникальным в пределах одного теста.

selector

Необязательный параметр. Задает селектор DOM-элемента, который нужно снять:

Если селектор не указан, assertView снимет текущий вьюпорт
Если передан массив селекторов, assertView снимет область, которая покрывает все переданные селекторы
Если какой-либо селектор нашел несколько элементов, assertView снимет первый из них

options

Задает настройки команды assertView:

Опция	Тип	Описание
ignoreElements	`string \| string[]`	Элементы (задаются как селекторы), которые будут проигнорированы при сравнении скриншотов. Игнор реализуется с помощью закраски перечисленных элементов черным цветом. Если по любому из селекторов найдено несколько элементов, будут проигнорированы все найденные элементы.
tolerance	`number`	Чувствительность к разнице в цветах, по умолчанию `3.0`. Подробнее.
antialiasingTolerance	`number`	Чувствительность к антиалиасингу, по умолчанию `4`. Подробнее.
allowViewportOverflow	`boolean`	По умолчанию Testplane выводит предупреждение, если элемент не удалось снять целиком. Эта опция отключает предупреждение. Используйте ее вместе с `captureElementFromTop`, чтобы полностью отключить скролл перед снятием скриншота.
captureElementFromTop	`boolean`	По умолчанию Testplane может проскроллить страницу к элементу перед снятием скриншота, если элемент изначально не виден. Если отключить эту опцию и элемент изначально не виден, Testplane выбросит ошибку.
compositeImage	`boolean`	По умолчанию Testplane снимает элемент целиком: делает несколько скриншотов, скроллит элемент и затем склеивает изображения. Если отключить эту опцию, будет снята только та часть элемента, которая видна на первом скриншоте.
screenshotDelay	`number`	Задержка в миллисекундах перед снятием скриншота. Может пригодиться, чтобы дождаться исчезновения скроллбара перед снятием скриншота.
disableAnimation	`boolean`	Отключение анимаций и переходов при снятии скриншота. По умолчанию `true` начиная с версии `8.0.0`
ignoreDiffPixelCount	number \| `${number}%`	Процент пикселей, которые нужно игнорировать при диффе. Удобно для игнорирования очень маленьких диффов. По умолчанию `0`. Доступен начиная с версии `8.2.0`.
waitForStaticToLoadTimeout	`number`	По умолчанию `5000`. Таймаут для команды `waitForStaticToLoad`, которая автоматически вызывается перед снятием скриншота. Если указать `0`, ожидание будет выключено. Доступно начиная с версии `8.32.0`.
disableHover	`"always" \| "never" \| "when-scrolling-needed"`	По умолчанию Testplane отключает hover-эффекты, если для полного скриншота элемента нужен скролл. Доступно начиная с версии `9.0.0`.
cropMargins	`{ top?: number, right?: number, bottom?: number, left?: number }`	Задает отступы, на которые нужно обрезать скриншот. Удобно, например, чтобы обрезать скроллбары на Android-эмуляторах. Доступно начиная с версии `9.0.0`.
selectorToScroll	`string`	Устарело. Начиная с Testplane 9, элемент для скролла определяется автоматически. Ручная настройка влияет на то, какой элемент Testplane будет скроллить при снятии скриншота.

Примеры использования

Визуальная проверка элемента

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");
});

Визуальная проверка всего вьюпорта

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 });
});

Визуальная проверка с дополнительными опциями

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",
    });
});

История

Версия	Изменения
v9.0.0	Крупное обновление логики работы `assertView`, подробнее в статье. Добавлены опции `disableHover` и `cropMargins`. Опция `selectorToScroll` устарела: теперь элемент для скролла определяется автоматически. Значение `tolerance` по умолчанию изменилось с `2.3` на `3.0`.
v8.32.0	Добавлена опция `waitForStaticToLoadTimeout`.
v8.2.0	Добавлена опция `ignoreDiffPixelCount`.
v8.0.0	Значение `disableAnimation` по умолчанию изменилось на `true`.

Обзор​

Использование​

Параметры команды​

state​

selector​

options​

Примеры использования​

История​

Связанные команды​