Jak ověřit popis v Selenium webový ovladač

Popisek v Selenium

A Popisek v Selenium je text, který se zobrazí, když najedete myší na objekt na webové stránce. Objektem může být odkaz, obrázek, tlačítko, textová oblast atd. Text nápovědy často poskytuje více informací o objektu, na který uživatel najede nad kurzorem myši.

Popisky byly tradičně implementovány jako atribut 'název' prvku. Hodnota tohoto atributu byla zobrazena jako nápověda při najetí myší. Toto je statický text poskytující informace o prvku bez stylingu.

Nyní je k dispozici mnoho pluginů pro implementaci „nástrojových tipů“. Pokročilé popisky se styly, vykreslováním, obrázky a odkazy jsou implementovány pomocí JavaScript/JQuery pluginy nebo pomocí CSS Tooltips.

  • Pro přístup nebo ověření statických popisků, které jsou implementovány pomocí HTML atributu „title“, můžeme jednoduše použít metodu getAttribute(“title”) WebElementu. Vrácená hodnota této metody (což je text popisku) je porovnána s očekávanou hodnotou pro ověření.
  • U jiných forem implementací popisku budeme muset použít „rozhraní API pro pokročilé uživatelské interakce“, které poskytuje webový ovladač, k vytvoření efektu při najetí myší a následnému načtení popisku pro prvek.

Stručný přehled API pro pokročilé uživatelské interakce

Advanced User Interactions API poskytuje rozhraní API pro uživatelské akce, jako je přetažení, přetažení, vícenásobný výběr, stisknutí a uvolnění kláves a další akce pomocí klávesnice nebo myši na webové stránce.

Můžete odkazovat na toto https://trials.autocruitment.com pro více podrobností o API.

Zde se podívejme, jak použít několik tříd a metod, které bychom potřebovali k posunutí prvku posuvníku o posun.

Krok 1) Aby bylo možné používat rozhraní API, je třeba importovat následující balíčky/třídy:

Rozhraní API pro pokročilé uživatelské interakce

Krok 2) Vytvořte objekt třídy „Akce“ a vytvořte sekvenci uživatelských akcí. Třída Actions se používá k sestavení sekvence uživatelských akcí, jako je moveToElement(), dragAndDrop() atd. Různé metody související s akcemi uživatele poskytuje API.

Objekt ovladače je poskytován jako parametr jeho konstruktoru.

Rozhraní API pro pokročilé uživatelské interakce

Krok 3) Vytvořte objekt Action pomocí metody build() třídy „Actions“. Zavolejte metodu perform() k provedení všech akcí vytvořených objektem Actions (zde tvůrce).

Rozhraní API pro pokročilé uživatelské interakce

Viděli jsme, jak používat některé z metod uživatelských akcí, které poskytuje API – clickAndHold(element), moveByOffset(10,0), release(). API poskytuje mnoho takových metod.

Odkazovat na https://trials.autocruitment.com pro více informací.

Jak ověřit (zpracovat) popis v Selenium

Podívejme se na ukázku přístupu a ověřování tipů nástrojů v jednoduchém scénáři

  • Scénář 1: Popisek je implementován pomocí atributu „title“.
  • Scénář 2: Tooltip je implementován pomocí pluginu jQuery.

Scénář 1: HTML atribut 'title'

Pro tento případ si vezměme příklad webu – https://demo.guru99.com/test/social-icon.html.

Pokusíme se ověřit nápovědu ikony „github“ v pravé horní části stránky.

HTML atribut 'title'

Abychom to mohli udělat, nejprve najdeme prvek a získáme jeho atribut 'title' a ověříme pomocí očekávaného textu tipu nástroje.

Protože předpokládáme, že tip nástroje je v atributu „title“, neautomatizujeme ani efekt najetí myší, ale jednoduše získáváme hodnotu atributu pomocí metody „getAttribute()“.

HTML atribut 'title'

Zde je kód

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();			
   }		
}		

Vysvětlení kódu

  1. Najděte WebElement představující ikonu „github“.
  2. Získejte jeho atribut „title“ pomocí metody getAttribute().
  3. Přiřaďte hodnotu k očekávané hodnotě popisku.

Scénář 2: JQuery Plugin

Pro implementaci popisků je k dispozici spousta pluginů JQuery a každý z nich má trochu jinou formu implementace.

Některé pluginy očekávají, že tooltip HTML bude vždy přítomen vedle prvku, pro který je tooltip použitelný, zatímco jiné vytvoří dynamickou značku „div“, která se objeví za běhu, když na prvek umístíte kurzor.

Pro naši demonstraci se podívejme na způsob implementace popisku nástrojů „jQuery Tools Tooltip“.

Zde v URL – https://demo.guru99.com/test/tooltip.html můžete vidět demo, kde po najetí myší na „Stáhnout nyní“ se nám zobrazí pokročilá nápověda s obrázkem, pozadím popisku, tabulkou a odkazem uvnitř, na který lze kliknout.

Plugin JQuery

Pokud se podíváte na níže uvedený zdroj, můžete vidět, že značka div představující nápovědu je vždy přítomna vedle značky odkazu „Stáhnout nyní“. Kód uvnitř značky skriptu níže však řídí, kdy je třeba vyskakovací okno.

Plugin JQuery

Pokusme se ověřit pouze text odkazu v popisku pro naši ukázku zde.

Nejprve najdeme WebElement odpovídající „Stáhnout nyní“. Poté se pomocí rozhraní Interactions API přesuneme na prvek (najetí myší). Dále najdeme WebElement, který odpovídá odkazu v zobrazeném popisku, a ověříme jej oproti očekávanému textu.

Plugin JQuery

Zde je kód

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();			
   }		
}		

Vysvětlení kódu

  1. Najděte WebElement, který odpovídá prvku „stáhnout nyní“, na který najedeme myší.
  2. Pomocí rozhraní Interactions API najeďte myší na „Stáhnout nyní“.
  3. Za předpokladu, že je zobrazena nápověda, najděte WebElement, který odpovídá odkazu v nápovědě, tj. značce „a“.
  4. Ověřte text popisku odkazu načtený pomocí getText() oproti očekávané hodnotě, kterou jsme uložili v „expectedToolTip“

Shrnutí

V tomto tutoriálu jste se naučili, jak získat přístup k popiskům pomocí Selenium Webový ovladač.

Tipy na nástroje jsou implementovány různými způsoby –

  • Základní implementace je založena na atributu „title“ HTML. getAttribute(title) získá hodnotu popisku.
  • Další implementace tipů nástrojů, jako je JQuery, popisky CSS vyžadují rozhraní Interactions API k vytvoření efektu najetí myší

Advanced User Interactions API –

  • moveToElement(element) třídy Actions se používá k najetí myší na prvek.
  • Metoda Build() třídy Actions vytváří sekvenci uživatelských akcí do objektu Action.
  • Třída Perform() of Action provede všechny sekvence uživatelských akcí najednou.

Abychom mohli ověřit nápovědu, musíme na prvek nejprve najet myší, poté najít prvek, který odpovídá nápovědě, a získat jeho text nebo jiné hodnoty, které lze ověřit oproti očekávaným hodnotám.