Как да щракнете върху изображение в Selenium Уебдрайвер

⚡ Умно обобщение

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

  • 🖱️ Основно действие: Използвайте driver.findElement(By.cssSelector(…)).click(), за да извършите щракване върху произволен елемент от изображението, рендиран вътре в котва.
  • 🎯 Избор на локатор: By.linkText и By.partialLinkText не работят за изображения, така че са необходими By.cssSelector или By.xpath.
  • 🧪 Стъпка за проверка: Потвърдете успешното кликване, като използвате driver.getTitle() за заглавие на новата страница спрямо очаквания целеви низ.
  • 🤖 AI помощ: Съвременните AI плъгини предлагат стабилни CSS селектори и автоматично поправяне на локатори, когато маркировката на приложението или стойностите на атрибутите се променят.
  • 🛠️ Често срещани клопки: Скритите, лениво заредените или припокриващите се изображения често изискват изрично изчакване, превъртане в изглед или JavaКликнете върху скрипта, за да се регистрирате правилно.

Кликнете върху Изображение в Selenium

Щракване върху изображение в 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();
    }
}

Резултат

Кликнете върху Изображение в Selenium Уебдрайвер

Най-добри практики за кликване върху изображения

Няколко навика правят автоматизацията на кликванията върху изображения по-надеждна в различните браузъри и размери на екрана.

  • Предпочитайте стабилен атрибут като 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 е резервният вариант, когато маркировката е неудобна, а изричните чакания правят скрипта надежден при изпълнение.

Въпроси и Отговори

Намерете изображението с By.cssSelector или By.xpath, използвайки стабилен атрибут, като например title, alt или aria-label, след което извикайте .click() върху върнатия WebElement. Проверете резултата с driver.getTitle() или уникален елемент на целевата страница.

Да. Инструменти като Testim, Mabl и ChatGPT проверяват околния DOM и предлагат стабилен селектор, базиран на атрибутите title, alt, aria-label или data. Инженерите все пак трябва да прегледат генерирания локатор за уникалност и устойчивост.

Самовъзстановяващият се локатор е функция на изкуствен интелект, която замества алтернативен селектор, когато оригиналният се повреди. Фреймворци като Healenium и Mabl наблюдават промените в атрибутите около изображението и избират най-стабилния заместител, което намалява нестабилните тестове след обновяване на потребителския интерфейс.

И двата локатора съвпадат с видимия текст вътре в котва. Връзка към изображение обгръща етикет img и не показва текстов възел, така че съвпадението винаги не връща нищо. Използвайте By.cssSelector или By.xpath с title, alt или aria-label вместо това.

Ако наслагване, модален прозорец или подсказка блокират изображението, превъртете го, за да се покаже с JavascriptИзпълнител и добавете WebDriverWait за ElementToBeClickable. Като резервен вариант, изпълнете JavaСкриптът кликва върху WebElement, за да заобиколи припокриванетоping слой.

Потвърдете новото заглавие на страницата с driver.getTitle(), текущото URL с driver.getCurrentUrl() или наличието на уникален елемент на целевата страница. Комбинацията от тези проверки дава на теста увереност, че кликването наистина е задействало навигацията.

Обобщете тази публикация с: