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