Selenium WebDriver에서 툴팁을 확인하는 방법

Selenium의 툴팁

A Selenium의 툴팁 웹 페이지의 개체 위로 마우스를 가져갈 때 나타나는 텍스트입니다. 객체는 링크, 이미지, 버튼, 텍스트 영역 등이 될 수 있습니다. 도구 설명 텍스트는 사용자가 마우스 커서 위에 올려놓은 객체에 대한 자세한 정보를 제공하는 경우가 많습니다.

도구 설명은 전통적으로 요소에 대한 '제목' 속성으로 구현되었습니다. 이 속성의 값은 마우스를 올리면 도구 설명으로 표시됩니다. 스타일 지정 없이 요소 정보를 제공하는 정적 텍스트입니다.

이제 '도구 설명' 구현에 사용할 수 있는 플러그인이 많이 있습니다. 스타일 지정, 렌더링, 이미지 및 링크가 포함된 고급 도구 설명은 JavaScript/JQuery 플러그인을 사용하거나 CSS 도구 설명을 사용하여 구현됩니다.

  • HTML "제목" 속성을 사용하여 구현된 정적 도구 설명에 액세스하거나 확인하려면 WebElement의 getAttribute("제목") 메서드를 사용하면 됩니다. 이 메서드의 반환 값(도구 설명 텍스트)은 확인을 위해 예상 값과 비교됩니다.
  • 다른 형태의 도구 설명 구현의 경우 웹 드라이버에서 제공하는 "고급 사용자 상호 작용 API"를 사용하여 마우스 호버 효과를 만든 다음 요소에 대한 도구 설명을 검색해야 합니다.

고급 사용자 상호 작용 API에 대한 간략한 설명

고급 사용자 상호 작용 API는 웹페이지에서 드래그 앤 드롭, 마우스 오버, 다중 선택, 키 누르기 및 놓기, 키보드나 마우스를 사용하는 기타 작업과 같은 사용자 작업에 대한 API를 제공합니다.

당신은 이것을 참조할 수 있습니다 링크 더 많은 것을 위해tails API에서.

여기에서는 슬라이더 요소를 오프셋만큼 이동하는 데 필요한 몇 가지 클래스와 메서드를 사용하는 방법을 살펴보겠습니다.

단계 1) API를 사용하려면 다음과 같이 하세요.wing 패키지/클래스를 가져와야 합니다.

고급 사용자 상호 작용 API

단계 2) "Actions" 클래스의 객체를 생성하고 사용자 작업 시퀀스를 구축합니다. Actions 클래스는 moveToElement(), dragAndDrop() 등과 같은 일련의 사용자 작업을 작성하는 데 사용됩니다. API는 사용자 작업과 관련된 다양한 메서드를 제공합니다.

드라이버 개체는 해당 생성자에 대한 매개 변수로 제공됩니다.

고급 사용자 상호 작용 API

단계 3) Action 클래스의 build() 메소드를 사용하여 Action 객체를 생성합니다. Perform() 메소드를 호출하여 Actions 객체(여기서는 빌더)에 의해 구축된 모든 액션을 실행합니다.

고급 사용자 상호 작용 API

API에서 제공하는 일부 사용자 작업 메서드(clickAndHold(element), moveByOffset(10,0), release())를 사용하는 방법을 살펴보았습니다. API는 이러한 많은 메소드를 제공합니다.

자세한 내용은 링크 더 많은 것을 위해tails.

Selenium에서 툴팁을 확인(처리)하는 방법

간단한 시나리오에서 도구 설명에 액세스하고 확인하는 데모를 살펴보겠습니다.

  • 시나리오 1: "제목" 속성을 사용하여 도구 설명이 구현됩니다.
  • 시나리오 2: 도구 설명은 jQuery 플러그인을 사용하여 구현됩니다.

시나리오 1: HTML '제목' 속성

이 경우 예제 사이트를 살펴보겠습니다. https://demo.guru99.com/test/social-icon.html.

페이지 오른쪽 상단에 있는 “github” 아이콘의 툴팁을 확인해 보겠습니다.

HTML '제목' 속성

이를 위해 먼저 요소를 찾아 '제목' 속성을 가져온 다음 예상되는 도구 설명 텍스트로 확인합니다.

도구 설명이 "title" 속성에 있다고 가정하므로 마우스 호버 효과를 자동화하지 않고 단순히 "getAttribute()" 메서드를 사용하여 속성 값을 검색합니다.

HTML '제목' 속성

다음은 코드입니다.

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. "github" 아이콘을 나타내는 WebElement를 찾으세요.
  2. getAttribute() 메소드를 사용하여 "title" 속성을 가져옵니다.
  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. 도구 설명이 표시된다고 가정하면 도구 설명 내부의 링크, 즉 "a" 태그에 해당하는 WebElement를 찾으세요.
  4. "expectedToolTip"에 저장한 예상 값과 비교하여 getText()를 사용하여 검색된 링크의 도구 설명 텍스트를 확인합니다.

요약

이 튜토리얼에서는 Selenium 웹 드라이버를 사용하여 도구 설명에 액세스하는 방법을 배웠습니다.

도구 설명은 다양한 방식으로 구현됩니다.

  • 기본 구현은 HTML의 "제목" 속성을 기반으로 합니다. getAttribute(title)은 툴팁의 값을 가져옵니다.
  • JQuery와 같은 다른 도구 설명 구현, CSS 도구 설명에는 마우스 호버 효과를 생성하기 위한 Interactions API가 필요합니다.

고급 사용자 상호 작용 API –

  • Actions 클래스의 moveToElement(element)는 요소에 마우스를 올리는데 사용됩니다.
  • Actions 클래스의 Build() 메서드는 일련의 사용자 작업을 Action 개체로 만듭니다.
  • Action 클래스의 Perform()은 모든 일련의 사용자 작업을 한 번에 실행합니다.

도구 설명을 확인하려면 먼저 요소를 마우스로 가리킨 다음 도구 설명에 해당하는 요소를 찾고 텍스트 또는 기타 값을 가져와 예상 값과 비교하여 확인해야 합니다.