でツールチップを確認する方法 Selenium webdriver

ツールチップ入力 Selenium

A ツールチップ入力 Selenium Web ページ上のオブジェクトの上にマウスを置くと表示されるテキストです。 オブジェクトには、リンク、画像、ボタン、テキスト領域などが含まれます。多くの場合、ツールチップ テキストは、ユーザーがマウス カーソルを上に置いたオブジェクトに関する詳細情報を提供します。

ツールチップは従来、要素の「タイトル」属性として実装されていました。 この属性の値は、マウスホバー時にツールチップとして表示されました。 これは、スタイルなしで要素の情報を提供する静的テキストです。

現在、「ツールチップ」の実装には多くのプラグインが利用可能です。スタイル、レンダリング、画像、リンクを備えた高度なツールチップは、以下を使用して実装されています。 Javaスクリプト/JQuery プラグインまたは CSS ツールチップを使用します。

• HTML の「title」属性を使用して実装された静的ツールチップにアクセスまたは確認するには、WebElement の getAttribute("title") メソッドを使用するだけです。 このメソッドの戻り値 (ツールチップ テキスト) は、検証のために期待値と比較されます。
• 他の形式のツールチップ実装の場合は、Web ドライバーが提供する「Advanced User Interactions API」を使用してマウス ホバー効果を作成し、要素のツールチップを取得する必要があります。

高度なユーザー インタラクション API の概要

高度なユーザー インタラクション API は、ドラッグ アンド ドロップ、ホバリング、複数選択、キーの押して放すなどのユーザー アクションや、Web ページ上でキーボードまたはマウスを使用するその他のアクション用の API を提供します。

これを参照できます APIの詳細については。

ここでは、スライダー要素をオフセットで移動するために必要ないくつかのクラスとメソッドの使用方法を見てみましょう。

ステップ1） API を使用するには、次のパッケージ/クラスをインポートする必要があります。

ステップ2） 「Actions」クラスのオブジェクトを作成し、ユーザーアクションのシーケンスを構築します。 Actions クラスは、moveToElement()、dragAndDrop() などのユーザー アクションのシーケンスを構築するために使用されます。ユーザー アクションに関連するさまざまなメソッドが API によって提供されます。

ドライバー オブジェクトは、コンストラクターへのパラメーターとして提供されます。

ステップ3） 「Actions」クラスのbuild()メソッドを使用してActionオブジェクトを作成します。 Perform() メソッドを呼び出して、Actions オブジェクト (ここではビルダー) によって構築されたすべてのアクションを実行します。

API によって提供されるユーザー アクション メソッドの一部 (clickAndHold(element)、moveByOffset(10,0)、release()) の使用方法を説明しました。 API には、そのようなメソッドが多数提供されています。

Job Status ページの下部にある のガイドをご参照ください。

でツールチップを確認 (処理) する方法 Selenium

簡単なシナリオでツールチップにアクセスして検証するデモを見てみましょう。

• シナリオ 1: ツールチップは「title」属性を使用して実装されます
• シナリオ 2: ツールチップは jQuery プラグインを使用して実装されます。

シナリオ 1: HTML の「title」属性

このケースでは、サイトの例を見てみましょう – https://demo.guru99.com/test/social-icon.html.

ページ右上の「github」アイコンのツールチップを確認してみます。

これを行うには、まず要素を見つけてその 'title' 属性を取得し、予想されるツール ヒント テキストで検証します。

ツールチップが「title」属性にあると想定しているため、マウスホバー効果を自動化することさえせず、単に「getAttribute()」メソッドを使用して属性の値を取得するだけです。

これがコードです

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 「今すぐダウンロード」の上にマウスを置くと、画像、吹き出しの背景、表、およびクリック可能な内部のリンクを含む高度なツールチップが表示されるデモをご覧ください。

以下のソースを見ると、ツールチップを表す div タグが常に「今すぐダウンロード」リンクのタグの隣に存在していることがわかります。 ただし、以下の script タグ内のコードは、いつポップアップする必要があるかを制御します。

ここでのデモのツールヒントのリンク テキストだけを確認してみましょう。

まず、「今すぐダウンロード」に対応する WebElement を見つけます。次に、Interactions API を使用して、要素 (マウスホバー) に移動します。次に、表示されたツールチップ内のリンクに対応する WebElement を見つけ、予想されるテキストと照合します。

これがコードです

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. インタラクション API を使用して、「今すぐダウンロード」にマウスを置きます。
3. ツールチップが表示されていると仮定して、ツールチップ内のリンク、つまり「a」タグに対応する WebElement を見つけます。
4. getText() を使用して取得したリンクのツールヒント テキストを、「expectedToolTip」に保存した期待値と照合して検証します。

まとめ

このチュートリアルでは、次を使用してツールチップにアクセスする方法を学習しました。 Selenium ウェブドライバー。

ツールチップはさまざまな方法で実装されます。

• 基本的な実装は HTML の「title」属性に基づいています。 getAttribute(title) はツールチップの値を取得します。
• JQuery や CSS ツールチップなどの他のツールチップ実装では、マウス ホバー効果を作成するために Interactions API が必要です

高度なユーザー インタラクション API –

• Actions クラスの moveToElement(element) は、要素にマウスを置くために使用されます。
• Actions クラスの Build() メソッドは、一連のユーザー アクションを Action オブジェクトに構築します。
• Action クラスの Perform() は、ユーザーの一連のアクションをすべて一度に実行します。

ツールヒントを検証するには、まず要素にマウスを移動し、次にツールヒントに対応する要素を見つけて、そのテキストまたはその他の値を取得して、期待値と照合する必要があります。