Как нажать на изображение в Selenium Вебдрайвер
Krishna Рунгта
⚡ Умное резюме
Нажмите на изображение в Selenium WebDriver требует использования CSS-селекторов или стратегий XPath, поскольку элементы изображений не отображают текст ссылки. В этой статье объясняется, как найти изображение, инициировать действие клика и убедиться в успешности навигации.
Нажатие на изображение в Selenium WebDriver — распространенная задача, когда значок, логотип или миниатюра выступают в роли навигационной ссылки. Поскольку изображения не содержат видимого текста, традиционные локаторы текста ссылки не работают, и требуется более надежная стратегия выбора.
Доступ к ссылкам на изображения
Изображения-ссылки — это якоря на веб-страницах, представленные изображением, при нажатии на которое браузер переходит в другое окно или на другую страницу.
Поскольку это изображения, мы не можем использовать методы By.linkText() и By.partialLinkText(), так как ссылки на изображения вообще не содержат текста.
В этом случае следует использовать либо By.cssSelector, либо By.xpath. Первый метод, как правило, предпочтительнее из-за своей простоты и читаемости.
В приведенном ниже примере мы получим доступ к логотипу «Facebook» в верхней левой части страницы восстановления пароля Facebook.
.png)
Для доступа к ссылке на изображение мы воспользуемся By.cssSelector и атрибутом «title» элемента. Затем мы проверим, что браузер перенаправил нас на главную страницу Facebook.
Java Code Пример
Следующие Selenium Фрагмент кода WebDriver запускает Chrome, открывает страницу восстановления пароля Facebook, кликает на изображение логотипа Facebook и отображает заголовок получившейся страницы.
package newproject;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class MyClass {
public static void main(String[] args) {
String baseUrl = "https://www.facebook.com/login/identify?ctx=recover";
System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get(baseUrl);
// click on the "Facebook" logo on the upper left portion
driver.findElement(By.cssSelector("a[title=\"Go to Facebook home\"]")).click();
// verify that we are now back on Facebook's homepage
if (driver.getTitle().equals("Facebook - log in or sign up")) {
System.out.println("We are back at Facebook's homepage");
} else {
System.out.println("We are NOT in Facebook's homepage");
}
driver.close();
}
}Результат
.png)
Рекомендации по правильной фотосъемке
Несколько полезных привычек сделают автоматизацию кликов по изображениям более надежной во всех браузерах и размерах экрана.
- Отдавайте предпочтение стабильным атрибутам, таким как title, alt, aria-label или data-*, вместо глубоко вложенных CSS-путей.
- Перед выполнением клика добавьте явное ожидание WebDriverWait для элемента ElementToBeClickable.
- Для изображений с отложенной загрузкой прокрутите элемент, чтобы он стал видимым, с помощью JavascriptИсполнитель первым.
- Если прозрачное наложение перехватывает клик, следует использовать резервный вариант. JavaСкрипт выполняет клик по нижележащему элементу.
- Проверьте корректность навигации с помощью driver.getTitle() или уникального элемента на целевой странице.
Как ИИ улучшает стратегии поиска изображений
Инструменты тестирования с использованием ИИ, такие как TestimMabl и Healenium анализируют DOM вокруг изображения и предлагают самовосстанавливающиеся локаторы. Когда имя класса или атрибут изменяется после выпуска, фреймворк автоматически заменяет его на наиболее стабильную альтернативу, что снижает количество сбоев при навигации на основе значков.
Инженеры также могут использовать ChatGPT или GitHub Copilot для генерации фрагментов кода WebDriver, предложения надежных выражений CSS или XPath для изображения и составления утверждений для страницы, загружаемой после клика. Сгенерированный код все равно следует проверить на корректность, а также на обработку ожиданий и наложений.
Заключение
Нажатие на ссылки с изображениями в Selenium WebDriver прост в использовании, если выбрать надежный локатор. Наиболее читабельный подход — это использование `by.cssSelector` с атрибутами `title` или `alt`, `by.xpath` — запасной вариант, если разметка неудобна, а явные ожидания делают скрипт надежным при многократном запуске.
