Як перевірити підказку в Selenium веб-драйвер

Автор: Krishna Рунгта Krishna Рунгта
Hours оновлений

Підказка в Selenium

A Підказка в Selenium це текст, який з’являється, коли миша наводить на об’єкт на веб-сторінці. Об’єктом може бути посилання, зображення, кнопка, текстова область тощо. Текст спливаючої підказки часто надає більше інформації про об’єкт, на який користувач наводить курсор миші.

Підказки традиційно реалізовувалися як атрибут 'title' для елемента. Значення цього атрибута відображалося як підказка під час наведення курсора миші. Це статичний текст, який надає інформацію про елемент без стилів.

Зараз доступно багато плагінів для реалізації «підказок». Розширені підказки зі стилями, рендерингом, зображеннями та посиланнями реалізуються за допомогою JavaПлагіни Script/JQuery або використання підказок CSS.

  • Щоб отримати доступ або перевірити статичні підказки, реалізовані за допомогою атрибута HTML “title”, ми можемо просто використати метод getAttribute(“title”) WebElement. Повернене значення цього методу (яке є текстом спливаючої підказки) порівнюється з очікуваним значенням для перевірки.
  • Для інших форм реалізації підказок нам доведеться використовувати «Advanced User Interactions API», наданий веб-драйвером, щоб створити ефект наведення миші, а потім отримати підказку для елемента.

Коротка інформація про Advanced User Interactions API

Advanced User Interactions API надає API для таких дій користувача, як перетягування, наведення курсора, багаторазовий вибір, натискання та відпускання клавіш та інші дії за допомогою клавіатури чи миші на веб-сторінці.

Ви можете звернутися до цього за посиланням щоб дізнатися більше про API.

Давайте подивимося, як використовувати пару класів і методів, які нам знадобляться, щоб перемістити елемент повзунка на зсув.

Крок 1) Щоб використовувати API, потрібно імпортувати такі пакети/класи:

Advanced User Interactions API

Крок 2) Створіть об’єкт класу «Дії» та побудуйте Послідовність дій користувача. Клас Actions використовується для побудови послідовності дій користувача, наприклад moveToElement(), dragAndDrop() тощо. API надає різні методи, пов’язані з діями користувача.

Об’єкт драйвера надається як параметр для його конструктора.

Advanced User Interactions API

Крок 3) Створіть об’єкт дії за допомогою методу build() класу “Дії”. Викличте метод perform(), щоб виконати всі дії, створені об’єктом Actions (тут конструктор).

Advanced User Interactions API

Ми побачили, як використовувати деякі методи дій користувача, надані API – clickAndHold(element), moveByOffset(10,0), release(). API надає багато таких методів.

Див за посиланням для більш докладної інформації.

Як перевірити (обробити) підказку в Selenium

Давайте подивимося демонстрацію доступу та перевірки підказок у простому сценарії

  • Сценарій 1: підказка реалізована за допомогою атрибута «title».
  • Сценарій 2: підказка реалізована за допомогою плагіна jQuery.

Сценарій 1: атрибут HTML 'title'

Для цього випадку візьмемо приклад сайту – https://demo.guru99.com/test/social-icon.html.

Ми спробуємо перевірити спливаючу підказку піктограми «github» у верхньому правому куті сторінки.

Атрибут HTML 'title'

Щоб це зробити, ми спочатку знайдемо елемент і отримаємо його атрибут 'title' і перевіримо за допомогою очікуваного тексту підказки.

Оскільки ми припускаємо, що підказка знаходиться в атрибуті «title», ми навіть не автоматизуємо ефект наведення миші, а просто отримуємо значення атрибута за допомогою методу «getAttribute()».

Атрибут HTML 'title'

Ось код

import org.openqa.selenium.By;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.chrome.ChromeDriver;		
import org.openqa.selenium.*;		

public class ToolTip {				
    public static void main(String[] args) {									
     
        String baseUrl = "https://demo.guru99.com/test/social-icon.html";					
        System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");					
        WebDriver driver = new ChromeDriver();					
        driver.get(baseUrl);					
        String expectedTooltip = "Github";	
        
        // Find the Github icon at the top right of the header		
        WebElement github = driver.findElement(By.xpath(".//*[@class='soc-ico show-round']/a[4]"));	
        
        //get the value of the "title" attribute of the github icon		
        String actualTooltip = github.getAttribute("title");	
        
        //Assert the tooltip's value is as expected 		
        System.out.println("Actual Title of Tool Tip"+actualTooltip);							
        if(actualTooltip.equals(expectedTooltip)) {							
            System.out.println("Test Case Passed");					
        }		
        driver.close();			
   }		
}

Пояснення коду

  1. Знайдіть WebElement, що представляє значок «github».
  2. Отримайте його атрибут «title» за допомогою методу getAttribute().
  3. Порівняйте значення з очікуваним значенням підказки.

Сценарій 2: Плагін JQuery

Існує багато плагінів JQuery, доступних для реалізації підказок, і кожен із них має дещо іншу форму реалізації.

Деякі плагіни очікують, що спливаюча підказка HTML постійно буде присутня поруч із елементом, для якого ця підказка застосовна, тоді як інші створюють динамічний тег «div», який з’являється на льоту під час наведення курсора на елемент.

Для нашої демонстрації розглянемо спосіб реалізації підказки «jQuery Tools Tooltip».

Тут, в URL-адресі – https://demo.guru99.com/test/tooltip.html Ви можете побачити демонстрацію, де при наведенні курсора миші на «Завантажити зараз» ми отримуємо розширену підказку із зображенням, фоном виноски, таблицею та посиланням усередині, яке можна натиснути.

Плагін JQuery

Якщо ви подивитеся на джерело нижче, ви побачите, що тег div, який представляє спливаючу підказку, завжди присутній поруч із тегом посилання «Завантажити зараз». Але код всередині тегу сценарію нижче контролює, коли він має з’явитися.

Плагін JQuery

Давайте спробуємо перевірити лише текст посилання у підказці для нашої демонстрації тут.

Спочатку ми знайдемо WebElement, який відповідає «Завантажити зараз». Потім за допомогою Interactions API ми перемістимося до елемента (наведення миші). Далі ми знайдемо WebElement, який відповідає посиланню всередині відображеної підказки, і перевіримо його на відповідність очікуваному тексту.

Плагін JQuery

Ось код

СТАТТІ ПО ТЕМІ

import org.openqa.selenium.interactions.Action;		
import org.openqa.selenium.interactions.Actions;		
import org.openqa.selenium.By;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.chrome.ChromeDriver;		
import org.openqa.selenium.*;		

public class JqueryToolTip {				
    public static void main(String[] args) {									
     
        String baseUrl = "https://demo.guru99.com/test/tooltip.html";					
        System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");	
        
        WebDriver driver = new ChromeDriver();					
        String expectedTooltip = "What's new in 3.2";					
        driver.get(baseUrl);					
        		
        WebElement download = driver.findElement(By.xpath(".//*[@id='download_now']"));							
        Actions builder = new Actions (driver);							

        builder.clickAndHold().moveToElement(download);					
        builder.moveToElement(download).build().perform(); 	
        
        WebElement toolTipElement = driver.findElement(By.xpath(".//*[@class='box']/div/a"));							
        String actualTooltip = toolTipElement.getText();			
        
        System.out.println("Actual Title of Tool Tip  "+actualTooltip);							
        if(actualTooltip.equals(expectedTooltip)) {							
            System.out.println("Test Case Passed");					
        }		
        driver.close();			
   }		
}

Пояснення коду

  1. Знайдіть WebElement, який відповідає елементу «завантажити зараз», на який ми будемо наводити курсор.
  2. Використовуючи Interactions API, наведіть курсор миші на «Завантажити зараз».
  3. Якщо спливаюча підказка відображається, знайдіть WebElement, який відповідає посиланню всередині спливаючої підказки, тобто тегу «a».
  4. Перевірте текст підказки посилання, отриманий за допомогою getText(), із очікуваним значенням, яке ми зберегли в “expectedToolTip”

Підсумки

У цьому посібнику ви дізналися, як отримати доступ до підказок за допомогою Selenium Веб драйвер.

Підказки реалізуються різними способами –

  • Основна реалізація базується на атрибуті “title” HTML. getAttribute(title) отримує значення підказки.
  • Для інших реалізацій підказок, як-от JQuery, підказок CSS потрібен Interactions API для створення ефекту наведення миші

Advanced User Interactions API–

  • moveToElement(element) класу Actions використовується для наведення миші на елемент.
  • Метод Build() класу Actions створює послідовність дій користувача в об’єкт Action.
  • Perform() класу Action виконує всю послідовність дій користувача одночасно.

Щоб перевірити підказку, ми повинні спочатку навести курсор миші на елемент, потім знайти елемент, який відповідає підказці, і отримати його текст або інші значення для перевірки на очікувані значення.

Вам може сподобатися: