assertView

Обзор

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

к сведению

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

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

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

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

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

state

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

selector

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

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

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

options

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

Опция	Тип	Описание
ignoreElements	Array или String	Элементы (задаются как селекторы), которые будут проигнорированы при сравнении скриншотов. Игнор реализуется с помощью закраски перечисленных элементов черным цветом. В случае одного элемента параметр можно задавать как строку.
tolerance	Number	Чувствительность к разнице в цветам.
antialiasingTolerance	Number	Чувствительность в антиалиасинге.
allowViewportOverflow	Boolean	По умолчанию Testplane выдает ошибку, если элемент находится за пределами границ вьюпорта. Этот параметр отключает проверку на границы, позволяя снимать скриншоты элементов, не влезающих во вьюпорт. При этом на скриншоте будут видны только те части элемента, которые влезли во вьюпорт. Однако если compositeImage равен true, то части элемента, которые оказались за нижней границей вьюпорта, тоже будут видны на скриншоте. Аналогично если captureElementFromTop равен true, то на скриншот попадут и те части элемента, которые оказались за пределами верхней границы вьюпорта.
captureElementFromTop	Boolean	Снимать скриншот элемента с самого верха. Если элемент находится за пределами вьюпорта, то к нему будет выполнен подскролл.
compositeImage	Boolean	Если элемент не помещается во вьюпорт, то при включении этой опции последовательно будет сделано несколько скриншотов разных частей элемента, после чего скриншоты будут склеены в один, чтобы отобразить элемент полностью.
screenshotDelay	Number	Задержка в миллисекундах перед снятием скриншота. Может пригодиться, когда на странице есть элементы, использующие анимацию, или скроллбар, который исчезает не сразу и попадает на результирующий скриншот.
selectorToScroll	String	Селектор, который нужно скроллировать. Может пригодиться, когда надо сделать скриншот модального окна, которое не помещается на экране. Иначе без указания селектора скролл будет применяться к объекту window, и скроллироваться будет задний фон, оставляя попап-окно на месте.
disableAnimation	Boolean	Отключение анимаций и переходов при снятии скриншота. По умолчанию `true` начиная с версии `8.0.0`
ignoreDiffPixelCount	`${number}%` или Number	Процент пикселей, которые нужно игнорировать при диффе. Удобно для игнорирования очень маленьких диффов. По умолчанию `0`. Доступен начиная с версии `8.2.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",
    });
});

assertView

Обзор​

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

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

state​

selector​

options​

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

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