Как да щракнете върху изображение в Selenium Уебдрайвер
⚡ Умно обобщение
Кликнете върху изображението в Selenium WebDriver изисква CSS селектор или XPath стратегии, тъй като елементите на изображението не показват текст на връзката. Тази статия обяснява как да намерите изображението, да задействате действието за щракване и да проверите дали навигацията е успешна.

Щракване върху изображение в Selenium WebDriver е често срещана задача, когато икона, лого или миниатюра се държи като навигационна връзка. Тъй като изображенията не носят видим текст, традиционните локатори на връзки и текст се провалят и е необходима по-надеждна стратегия за селектор.
Достъп до връзки към изображения
Линковете към изображения са котви на уеб страници, представени от изображение, което при щракване пренасочва браузъра към друг прозорец или страница.
Тъй като са изображения, не можем да използваме методите By.linkText() и By.partialLinkText(), защото връзките към изображения изобщо нямат текст на връзката.
В този случай трябва да прибегнем до използването на By.cssSelector или By.xpath. Първият метод обикновено е предпочитан поради своята простота и четимост.
В примера по-долу ще имаме достъп до логото на „Facebook“ в горната лява част на страницата за възстановяване на парола на Facebook.
Ще използваме 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();
}
}
Резултат
Най-добри практики за кликване върху изображения
Няколко навика правят автоматизацията на кликванията върху изображения по-надеждна в различните браузъри и размери на екрана.
- Предпочитайте стабилен атрибут като title, alt, aria-label или data-* пред дълбоко вложени CSS пътища.
- Добавете изрично WebDriverWait за ElementToBeClickable преди издаване на кликването.
- За изображения, заредени чрез лениво зареждане, превъртете елемента в изглед с JavascriptИзпълнителят на първо място.
- Ако прозрачно наслагване препречи кликването, върнете се към JavaСкрипт за кликване върху основния елемент.
- Валидирайте навигацията с driver.getTitle() или уникален елемент на целевата страница.
Как изкуственият интелект подобрява стратегиите за локализиране на изображения
Инструменти за тестване, подпомогнати от изкуствен интелект, като например Testim, Mabl и Healenium анализират DOM около изображение и предлагат самовъзстановяващи се локатори. Когато името или атрибутът на клас се промени след издание, рамката автоматично превключва с най-стабилната алтернатива, което намалява нестабилните грешки при навигация, базирана на икони.
Инженерите могат също да използват ChatGPT или GitHub Copilot, за да генерират фрагменти от WebDriver, да предложат надеждни CSS или XPath изрази за изображение и да изготвят твърдения за страницата, която се зарежда след кликване. Генерираният код все пак трябва да бъде проверен за коректност и за обработка на чакания и наслагвания.
Заключение
Щракване върху връзки към изображения в Selenium WebDriver е лесен за използване, след като изберете стабилен локатор. By.cssSelector с атрибута title или alt е най-четимият подход, By.xpath е резервният вариант, когато маркировката е неудобна, а изричните чакания правят скрипта надежден при изпълнение.

.png)
.png)