Как правильно проверять отображение изображения на сайте (Selenium WebDriver, C#)

Как правильно проверять отображение изображения на сайте (Selenium WebDriver, C#)
В процессе написания автоматических тестов иногда приходится проверять видимость/отображение изображения на сайте: главная картинка страницы, блока и т.д. Однако простая проверка методом «Displayed» нам не поможет, а точнее она проверяет не совсем то, что нам нужно. Давайте всё рассмотрим на примерах.

Предварительно сообщу о используемом стеке: Selenium WebDriver + C# + NUnit
Есть у нас следующий код:

Для проверки отображения элемента мы обычно пишем следующий код:

Далее это используется нами в условии if-else или в специальных методах, написанных нами.

Однако данный код на самом деле проверяет не отображение самого изображения на сайте, а видимость «img» и оно будет истинно, даже если само изображение не подгрузилось на сайте. С этой проблемой столкнулся и я. Далее была начата работа по исследованию этой проблемы. И в процессе изучения выяснилось, что для точной проверки придётся использовать дополнительно JavaScript. И сейчас я постараюсь подробно разобрать данный момент.

С помощью JavaScript мы можем получать ширину или высоту изображения, которое подгружается на сайт. Мы будем работать с шириной, так как одной величины нам будет достаточно. Если изображение не подгрузилось на сайт, то его ширина = 0, как и высота. Если изображение подгрузилось, то его ширина > 0. В JavaScript есть метод «naturalWidth» с помощью которого получаем натуральную ширину изображения. Отталкиваясь от сказанного ранее мы и будем строить свой метод проверки отображения изображения на сайте. Привожу готовый метод проверки, чтобы далее разобрать его. В качестве примера с изображением возьмём следующий HTML код:

Метод проверки с пояснениями в коде:

Теперь рассмотрим, как можно использовать метод проверяя изображение различными способами. Вызом метода прост:

Пример 1 (попадает под if строки 16 метода):

Пример 2 (попадает под if строки 12 метода):

Пример 3 (попадает под if строки 18 метода):

Пример 4 (попадает под if строки 14 метода):

Пояснение к примерам 3-4: Хочу обратить внимание, что если вы хотите проверить второе или третье вложенное в любой тег изображение, то придётся дорабатывать метод, так как текущий метод ищет первое изображение (getElementsByTagName(‘img’)[0]).

Во всех примерах я вызываю принудительно ошибку при отсутствии изображения (throw new Exception), которая попадёт в отчёт. Вы можете делать что угодно на своё усмотрение.

Конечно же метод можно доработать и в него передавать строку кода JavaScript для проверки, чтобы эта строка не была жёстко зашита в сам метод. Давайте рассмотрим пример такого метода:

В этом случае в метод будем передавать JavaScript. Этот метод хорош тем, что он универсален и проверять можем любое изображение и с любой вложенностью. Минус – должны быть познания в JavaScript, чтобы правильно составлять код передаваемой в метод строки. Пример использования:

Как видим метод проверки можно модифицировать под свои нужды, как угодно.

У меня к проекту подключено следующее (возможно для вас что-то лишнее будет):

Надеюсь описал доступным языком.

Добавить комментарий

Ваш e-mail не будет опубликован.