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

ツールチップ入力 Selenium

A ツールチップ入力 Selenium ツールチップとは、ウェブページ上のオブジェクトにマウスカーソルを重ねたときに表示される短いテキストです。オブジェクトは、リンク、画像、ボタン、テキストエリアなどです。ツールチップのテキストには、カーソル下の要素に関する詳細情報が表示されることがよくあります。

ツールチップは従来、要素の「title」属性として実装されていました。この属性の値は、マウスカーソルを重ねたときにツールチップとして表示されました。これは、要素に関する情報を提供する静的なテキストであり、スタイルは適用されません。

今日では、ツールチップの実装に利用できるプラグインが多数あります。スタイリング、レンダリング、画像、リンクを備えた高度なツールチップは、 JavaスクリプトやjQueryプラグイン、またはCSSのみのツールチップを使用できます。

• HTMLの「title」属性を介して実装された静的ツールチップにアクセスまたは検証するには、 getAttribute("title") WebElement のメソッド。返された値（ツールチップのテキスト）は、検証のために期待値と比較されます。
• その他のツールチップの実装については、WebDriverが提供する「高度なユーザーインタラクションAPI」を使用してマウスオーバー効果を作成し、要素のツールチップを取得します。

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

高度なユーザーインタラクションAPIは、ドラッグアンドドロップ、ホバー、複数選択、キーの押下と解放、その他のキーボードまたはマウス操作など、ウェブページ上でのユーザー操作を公開します。

これを参照することができます 公式アクションクラスリファレンス APIの詳細については。

ジャンプする前にping シナリオに当てはめて、スライダー要素をオフセット分だけ移動させるために必要なクラスとメソッドを見ていきましょう。

ステップ1） APIを使用するには、以下のパッケージとクラスをインポートしてください。

ステップ2） 「Actions」クラスのオブジェクトを作成し、ユーザー操作のシーケンスを構築します。Actionsクラスは、moveToElement()やdragAndDrop()などの連鎖的な操作を構築します。ドライバオブジェクトは、コンストラクタのパラメータとして渡されます。

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

APIが提供するユーザーアクションメソッドのうち、clickAndHold(element)、moveByOffset(10, 0)、release()などの使用方法を見てきました。APIには他にも多くのメソッドが用意されています。

ツールチップの実装と Selenium 検証アプローチ

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

よくある2つのシナリオを例に、ツールチップへのアクセスと検証について見ていきましょう。

• シナリオ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]"));

        // Read the "title" attribute value of the Github icon
        String actualTooltip = github.getAttribute("title");

        // Assert that the tooltip value matches the expected one
        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. 期待されるツールチップテキストに対して、その値を検証します。

Selenium 4つのヒント： 好む getDomAttribute("title") リテラルHTML属性の場合、 Selenium マネージャーはハードコーディングではなくドライバーを解決する chromedriver.exe.

シナリオ2：jQueryプラグイン

多くのjQueryプラグインはツールチップを実装しており、それぞれ表示方法が若干異なります。

プラグインによっては、ツールチップのマークアップを常にトリガー要素の横に保持するものもあれば、カーソルがトリガー要素に入ったときに動的に「div」タグを作成するものもある。

このデモンストレーションでは、「jQuery Tools Tooltip」スタイルを使用します。

店は開いています https://demo.guru99.com/test/tooltip.html「今すぐダウンロード」にカーソルを合わせると、画像、吹き出しの背景、小さな表、クリック可能なリンクを含む高度なツールチップが表示されます。

ソースコードを調べると、ツールチップを表すdiv要素が既に「今すぐダウンロード」リンクの横に配置されていることがわかります。下のスクリプトタグは、ツールチップが表示されるタイミングを制御しています。

次に、ツールチップ内に表示されているリンクテキストを確認します。

まず、「今すぐダウンロード」のWebElementを探します。インタラクションAPIを使用して、その要素に移動します（マウスオーバー）。次に、表示されたツールチップ内のリンクに対応するWebElementを見つけ、そのテキストが期待値と一致するかどうかを確認します。

ここでは、コードは次のとおりです。

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

        // Hover over the "Download now" link to reveal the tooltip
        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();
    }
}

Code 説明：

1. マウスカーソルを合わせる「今すぐダウンロード」要素に対応するWebElementを探してください。
2. Interactions APIを使用して、「今すぐダウンロード」にカーソルを合わせます。
3. ツールチップが表示されたら、ツールチップ内のリンクを表すWeb要素（「a」タグ）を探します。
4. ツールチップのテキストを読むには getText() そしてそれを、保存されている期待値と比較します。 expectedTooltip.

よくあるご質問