での Web テーブルの処理方法 Selenium

HTMLウェブテーブルの読み取り

テスターは、HTMLテーブル内の要素（通常はテキスト値）にアクセスする必要がある場面が多々あります。しかし、Webデザイナーは個々のセルにid属性やname属性を付与することはほとんどありません。そのため、By.id()、By.name()、By.cssSelector()といったメソッドは、ほとんど機能しません。このような場合、テーブルタグ内の親子関係をたどるBy.xpath()が最も信頼性の高い選択肢となります。

での Web テーブルの処理方法 Selenium

Web テーブルを処理するための以下の HTML コードを検討してください。 Selenium.

我々は使用するだろう XPath 「XNUMX 番目のセル」というテキストを含むセルの内部テキストを取得します。

ステップ 1 – 親要素 (テーブル) を設定する

WebDriver の XPath ロケーターは常に二重スラッシュ「//」で始まり、その後に親要素が続きます。。ここでは Web テーブルを扱っているため、 Selenium、親要素は常に鬼ごっこ。私たちの最初の部分は、 Selenium したがって、XPath テーブルロケーターは「//table」で始まる必要があります。

ステップ 2 – 子要素を追加する

直下の要素は、 それでは逆に、は親ですXPath のすべての子要素は、以下に示すように、親要素の右側にスラッシュ「/」で区切られて配置されます。

ステップ 3 – 述語を追加する

の要素には2つ含まれていますタグ。この2つタグは、 それで両方の親です。要素は兄弟関係にある。 兄弟姉妹とは、同じ親を共有する子要素のことです。.

到達するために「第4セル」を含むものにアクセスするには、まず 2番目の 最初のものではありません。「//table/tbody/tr」とだけ書くと最初のものが対象になります。タグ。

では、2番目のものにアクセスするにはどうすればよいでしょうか？ ？答えは、 述語. 述語とは、角括弧「[ ]」で囲まれた数値またはHTML属性であり、子要素を兄弟要素と区別するものです。必要な行は2行目なので、述語として「[2]」を使用します。

述語を省略すると、XPath は最初の兄弟を返します。したがって、以下の XPath コードのいずれも最初の兄弟に到達します。 。

ステップ 4 – 適切な述語を使用して後続の子要素を追加する

次に必要な要素は2番目ですステップ2とステップ3のルールを適用すると、以下に示すXPathが得られます。

正しいXPathロケーターがわかったので、以下のコードを使ってセルにアクセスし、その内部テキストを読み取ることができます。これは、HTMLページをCドライブに「newhtml.html」という名前で保存済みであることを前提としています。

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/write-xpath-table.html";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(
        By.xpath("//table/tbody/tr[2]/td[2]")).getText();
    System.out.println(innerText);
    driver.quit();
}

ネストしたテーブルへのアクセス

同じ原則は、ネストされたテーブルにも適用されます。 ネストされたテーブルとは、別のテーブルの中に配置されたテーブルのことです。。 以下に例を示します。

前のセクションで説明した親/子と述語の概念を使用して、「4-5-6」というテキストを含むセルにアクセスするには、以下に示す XPath を構成できます。

以下のWebDriverコードは、対象セルの内部テキストを取得します。

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/accessing-nested-table.html";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(
        By.xpath("//table/tbody/tr[2]/td[2]/table/tbody/tr/td[2]")).getText();
    System.out.println(innerText);
    driver.quit();
}

以下の出力は、内部テーブルに正常にアクセスされたことを確認します。

属性を述語として使用する

要素がHTMLの奥深くに位置していて、兄弟要素の数を数えるのが困難な場合は、その要素固有の属性を使用することができます。

以下の例では、「ニューヨークからシカゴ」セルは、 Mercury ツアーのホームページ。

テーブルの固有属性（width=”270″）を述語として使用できます。 属性は、先頭に @ 記号を付けることで述語として使用されます。上記の例では、「ニューヨークからシカゴ」セルは最初のセルに位置しています。 4番目のしたがって、XPathは以下の図のようになるはずです。

XPath を内部に配置するときは、次の点に注意してください。 Java「270」の周りの二重引用符をバックスラッシュでエスケープして、By.xpath() 文字列が途中で終了しないようにします。

これで、以下のコードを使用してそのセルにアクセスする準備が整いました。

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/newtours/";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(By
        .xpath("//table[@width=\"270\"]/tbody/tr[4]/td"))
        .getText();
    System.out.println(innerText);
    driver.quit();
}

ショートカット: 要素の検査を使用してテーブルにアクセスする Selenium

要素のインデックスや属性を取得するのが難しい場合、XPathを生成する最も速い方法は、最新のブラウザの開発者ツールにある「要素を検証」を使用することです。

以下の例を考えてみましょう。 Mercury ツアーのホームページ。

ステップ 1

対象のセルを右クリックして「検証」を選択するとDOMパスが表示され、完全なXPathをコピーできます。

ステップ 2

最初の「table」親要素を探し、その左側にあるものをすべて削除します。

ステップ 3

残りのXPathの先頭に二重スラッシュ「//」を付けて、WebDriverコードにコピーしてください。

以下のWebDriverコードは、深くネストされた要素の内部テキストを取得します。

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/newtours/";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(By
        .xpath("//table/tbody/tr/td[2]"
        + "//table/tbody/tr[4]/td/"
        + "table/tbody/tr/td[2]/"
        + "table/tbody/tr[2]/td[1]/"
        + "table[2]/tbody/tr[3]/td[2]/font"))
        .getText();
    System.out.println(innerText);
    driver.quit();
}

動的Webテーブルの行と列を数える方法

ダッシュボードや検索結果などの動的な Web テーブルは、読み込みごとに異なる行数を表示します。これらを処理するには、 findElements すべてのリストに格納し、ループ処理で各セルを読み取ります。以下のコードスニペットは、IDが「customers」のテーブル内の行数をカウントし、すべてのセルを読み取ります。

List<WebElement> rows = driver.findElements(
    By.xpath("//table[@id='customers']//tr"));
System.out.println("Total rows: " + rows.size());

for (int i = 1; i <= rows.size(); i++) {
    List<WebElement> cells = driver.findElements(
        By.xpath("//table[@id='customers']//tr[" + i + "]/td"));
    for (WebElement cell : cells) {
        System.out.println(cell.getText());
    }
}

ロケーターを WebDriverWait 　 visibilityOfAllElementsLocatedBy テーブルがAJAXによって読み込まれる際に、この処理が行われます。これにより、レンダリングの遅いグリッド上で古い要素参照が残るのを防ぎます。

Selenium 4. Webテーブルの相対ロケーター

Selenium 4では、視覚的な位置に基づいて要素を対象とする相対ロケーターが導入されました。これは、行の順序が変更されたためにXPathインデックスが機能しなくなった場合に役立ちます。 above(), below(), toLeftOf(), toRightOf(), near() すべてアンカーWebElementを受け入れます。

import static org.openqa.selenium.support.locators.RelativeLocator.with;

WebElement emailHeader = driver.findElement(By.xpath("//th[text()='Email']"));
WebElement emailCell = driver.findElement(
    with(By.tagName("td")).below(emailHeader));
System.out.println(emailCell.getText());

相対ロケーターは、列の順序が変わっても読みやすさを維持します。データ駆動型ページでは、明示的な待機処理と組み合わせることで、より効果的な結果が得られます。

動的なWebテーブルを処理するためのAIツール

AI支援テストプラットフォームは、頻繁に変更されるグリッド上のロケーターのメンテナンスを削減します。 Testim, マブル, 機能化 コンピュータビジョンとDOMモデルを組み合わせて、列のずれを検出し、ロケーターを自己修復します。固定のXPathインデックスではなく、ヘッダーテキストとセルの類似性に基づいて行を識別します。

純粋な Selenium プロジェクト、図書館など ヒーレニウム WebDriverをラップし、実行時に破損したロケーターを書き換えます。これらのツールをWebDriverWaitと組み合わせることで、UI変更のたびにセレクタを書き換えることなく、動的なテーブルスクリプトの安定性を維持できます。

製品概要

• By.xpath() は Web テーブルのセルにアクセスする最も信頼性の高い方法です。 Selenium.
• 兄弟の数を数えるのが難しい場合は、@記号を接頭辞として付けた一意の属性を述語として使用します。
• findElementsはリストを返します動的テーブルにおける行数カウントをサポートする。
• Selenium 4つの相対ロケーター（上、下、近く）により、位置指定XPathへの依存度が軽減されます。
• DevToolsの要素検査機能は、深く埋め込まれたセルのXPath生成を高速化します。
• AIツールなど TestimMabl、Healeniumは、グリッド変更のための自己修復ロケーターです。

よくあるご質問