Перейти к основному содержимому

assertView

Обзор​

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

к сведению

Эта команда реализована внутри Testplane, в API WebDriverIO её нет.

к сведению

Автоматически вызывает команду waitForStaticToLoad перед снятием скриншота.

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

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

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

ИмяТипОписание
stateStringОбязательный параметр. Название состояния теста. Должно быть уникальным в пределах одного теста.
selectorString или String[]Необязательный параметр. Может быть пропущен. Селектор DOM-элемента, который необходимо заснять. При отсутствии команда скриншотит viewport.
optionsObjectНастройки команды assertView.

state​

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

selector​

Необязательный параметр. Может быть пропущен. Задает селектор DOM-элемента, который необходимо заснять. По умолчанию body. При его отсутствии assertView применяет следующие опции, которые имеют приоритет над assertViewOpts из конфига, но не над параметром options:

{
    allowViewportOverflow: true,
    compositeImage: false,
    captureElementFromTop: false
}

Таким образом, по умолчанию без параметра options assertView скриншотит viewport.

options​

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

ОпцияТипОписание
ignoreElementsArray или String

Элементы (задаются как селекторы), которые будут проигнорированы при сравнении скриншотов. Игнор реализуется с помощью закраски перечисленных элементов черным цветом. В случае одного элемента параметр можно задавать как строку.

toleranceNumberЧувствительность к разнице в цветам.
antialiasingToleranceNumberЧувствительность в антиалиасинге.
allowViewportOverflowBoolean

По умолчанию Testplane выдает ошибку, если элемент находится за пределами границ вьюпорта. Этот параметр отключает проверку на границы, позволяя снимать скриншоты элементов, не влезающих во вьюпорт. При этом на скриншоте будут видны только те части элемента, которые влезли во вьюпорт. Однако если compositeImage равен true, то части элемента, которые оказались за нижней границей вьюпорта, тоже будут видны на скриншоте. Аналогично если captureElementFromTop равен true, то на скриншот попадут и те части элемента, которые оказались за пределами верхней границы вьюпорта.

captureElementFromTopBoolean

Снимать скриншот элемента с самого верха. Если элемент находится за пределами вьюпорта, то к нему будет выполнен подскролл.

compositeImageBoolean

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

screenshotDelayNumber

Задержка в миллисекундах перед снятием скриншота. Может пригодиться, когда на странице есть элементы, использующие анимацию, или скроллбар, который исчезает не сразу и попадает на результирующий скриншот.

selectorToScrollString

Селектор, который нужно скроллировать. Может пригодиться, когда надо сделать скриншот модального окна, которое не помещается на экране. Иначе без указания селектора скролл будет применяться к объекту window, и скроллироваться будет задний фон, оставляя попап-окно на месте.

disableAnimationBoolean

Отключение анимаций и переходов при снятии скриншота. По умолчанию true начиная с версии 8.0.0

ignoreDiffPixelCount`${number}%` или Number

Процент пикселей, которые нужно игнорировать при диффе. Удобно для игнорирования очень маленьких диффов. По умолчанию 0. Доступен начиная с версии 8.2.0

waitForStaticToLoadTimeoutNumber

Таймаут для команды waitForStaticToLoad, автоматически вызываемой перед снятием скриншота. При значении 0. ожидание выключено. По умолчанию 5000. Доступно начиная с версии 8.32.0.

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

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

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