画像をクリックする方法 Selenium ウェブドライバー

画像をクリックすると Selenium アイコン、ロゴ、サムネイルがナビゲーションリンクとして機能する場合、WebDriverはよく利用されるタスクです。画像には目に見えるテキストが含まれていないため、従来のリンクテキストロケーターは機能せず、より信頼性の高いセレクタ戦略が必要となります。

画像リンクへのアクセス

画像リンクとは、ウェブページ上のアンカーとなる画像であり、クリックするとブラウザが別のウィンドウまたはページに移動します。

画像リンクにはリンクテキストがないため、By.linkText() メソッドや By.partialLinkText() メソッドは使用できません。

この場合は、By.cssSelector または By.xpath のいずれかを使用する必要があります。一般的には、そのシンプルさと読みやすさから、前者の方法が好まれます。

以下の例では、Facebook のパスワード回復ページの左上部分にある「Facebook」ロゴにアクセスします。

画像リンクにアクセスするには、By.cssSelectorと要素の「title」属性を使用します。その後、ブラウザがFacebookのホームページに移動したことを確認します。

Java Code 例:

以下 Selenium WebDriver スニペットは Chrome を起動し、Facebook のパスワード回復ページを開き、Facebook のロゴ画像をクリックし、結果として表示されるページタイトルをアサートします。

package newproject;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class MyClass {

    public static void main(String[] args) {
        String baseUrl = "https://www.facebook.com/login/identify?ctx=recover";
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();

        driver.get(baseUrl);
        // click on the "Facebook" logo on the upper left portion
        driver.findElement(By.cssSelector("a[title=\"Go to Facebook home\"]")).click();

        // verify that we are now back on Facebook's homepage
        if (driver.getTitle().equals("Facebook - log in or sign up")) {
            System.out.println("We are back at Facebook's homepage");
        } else {
            System.out.println("We are NOT in Facebook's homepage");
        }
        driver.close();
    }
}

結果

画像を撮影する際のベストプラクティス

いくつかの習慣を身につけることで、ブラウザや画面サイズを問わず、画像クリックの自動化をより確実に実行できるようになります。

• 深くネストされたCSSパスよりも、title、alt、aria-label、data-*などの安定した属性を使用することをお勧めします。
• クリックを発行する前に、ElementToBeClickable に対して明示的な WebDriverWait を追加してください。
• 遅延読み込み画像の場合、要素をスクロールして表示します。 Javascript執行人が先です。
• 透明なオーバーレイがクリックを遮る場合は、 Javaスクリプトで基となる要素をクリックします。
• driver.getTitle() または遷移先のページ上の固有の要素を使用して、ナビゲーションを検証します。

AIが画像位置特定戦略をどのように改善するか

AI 支援テストツールなど TestimMablとHealeniumは、画像周辺のDOMを分析し、自己修復型のロケーターを提案します。リリース後にクラス名や属性が変更された場合、フレームワークは最も安定した代替案に自動的に切り替えるため、アイコンベースのナビゲーションにおける不安定な障害を軽減できます。

エンジニアは、ChatGPTやGitHub Copilotを使用してWebDriverのコードスニペットを生成したり、画像に対して堅牢なCSSやXPath式を提案したり、クリック後に読み込まれるページのアサーションをドラフトしたりすることもできます。生成されたコードは、正確性、待機処理、オーバーレイ処理についてレビューする必要があります。

結論

画像リンクをクリックすると Selenium WebDriverは、安定したロケーターを選択すれば簡単に使用できます。タイトルまたはalt属性を使用したBy.cssSelectorが最も読みやすい方法であり、マークアップが扱いにくい場合はBy.xpathが代替手段となります。また、明示的な待機処理により、スクリプトは複数回実行しても安定した動作を維持できます。

よくあるご質問