assertView
Обзор
Используйте команду assertView, чтобы снять скриншот элемента для определенного состояния теста и сравнить его с эталонным.
Эта команда реализована внутри Testplane, в API WebDriverIO её нет.
Использование
await browser.$(selector).assertView(state, options);
Во время выполнения команда assertView вызывает waitForExist с waitTimeout и waitInterval.
Параметры команды
| Имя | Тип | Описание |
| state | String | Обязательный параметр. Название состояния теста. Должно быть уникальным в пределах одного теста. |
| options | Object | Настройки команды assertView. |
state
Обязательный параметр. Задает название состояния теста. Название должно быть уникальным в пределах одного теста.
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 | Отключение анимаций и переходов при снятии скриншота. По умолчанию |
| ignoreDiffPixelCount | `${number}%` или Number | Процент пикселей, которые нужно игнорировать при диффе. Удобно для игнорирования
очень маленьких диффов. По умолчанию |
Примеры использования
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");
});