Selenium WebDriver で Web テーブルを処理する方法

Selenium の Web テーブルとは何ですか?

A ウェブテーブル Selenium の は、データまたは情報の表形式表現に使用される WebElement です。 表示されるデータまたは情報は、静的または動的のいずれかです。 Web テーブルとその要素には、Selenium の WebElement 関数とロケーターを使用してアクセスできます。 Web テーブルの典型的な例は、電子商取引プラットフォームに表示される製品仕様です。

HTML Web テーブルの読み取り

HTML テーブル内の要素 (通常はテキスト) にアクセスする必要がある場合があります。 ただし、Web デザイナーがテーブル内の特定のセルに id または name 属性を指定することはほとんどありません。 そのため、通常の「By.id()」「By.name()」「By.cssSelector()」などのメソッドは使用できません。 この場合、最も信頼できるオプションは、「By.xpath()」メソッドを使用してアクセスすることです。

Selenium で Web テーブルを処理する方法

Selenium で Web テーブルを処理するための以下の HTML コードを考えてみましょう。

SeleniumでテーブルのXPathを記述する方法

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

SeleniumでテーブルのXPathを記述する方法

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

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

Selenium Web テーブルの例

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

直下の要素はだから私たちはそれを言うことができますの「子」です。 そしてまた、 の「親」です。 XPath 内のすべての子要素は、以下に示すコードのように、XNUMX つのスラッシュ「/」で区切られて親要素の右側に配置されます。

Selenium Web テーブルの例

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

の要素には XNUMX つが含まれますタグ。 今言えるのは、この二つはタグは次の「子」です。 したがって、次のように言えます。 両方の親です要素。

私たちが結論できるもう一つのことは、この XNUMX つは要素は兄弟です。 兄弟とは、同じ親を持つ子要素を指します。.

に到達するには、 (「XNUMX 番目のセル」というテキストが含まれるセル) にアクセスしたい場合は、最初にアクセスする必要があります。 2番目の そして最初ではありません。 単純に「//table/tbody/tr」と書くと、最初のファイルにアクセスすることになります。 鬼ごっこ。

では、XNUMX番目にアクセスするにはどうすればよいですかそれから? これに対する答えは、使用することです 述語.

述語は、子要素をその兄弟要素から区別する、角括弧「[ ]」のペアで囲まれた数値または HTML 属性です。。 以来、 アクセスする必要があるのは 2 番目です。述語として「[XNUMX]」を使用します。

Selenium Web テーブルの例

述語を使用しない場合、XPath は最初の兄弟にアクセスします。 したがって、最初のにアクセスできますこれらの XPath コードのいずれかを使用します。

Xpath を使用した Selenium Web テーブル

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

次にアクセスする必要がある要素は 2 番目の要素です。 ステップ 3 と XNUMX で学んだ原則を適用して、XPath コードを次のように最終的に完成させます。

Xpath を使用した Selenium の Web テーブル

これで正しい XPath ロケーターが得られたので、以下のコードを使用して目的のセルにアクセスし、その内部テキストを取得できます。 上記の HTML コードを C ドライブ内に「newhtml.html」として保存していることを前提としています。

Xpath を使用した Selenium の Web テーブル

public static void main(String[] args) {
	String baseUrl = "http://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();
	}
}

Xpath を使用した Selenium の Web テーブル

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

上で説明したのと同じ原則がネストされたテーブルにも当てはまります。 ネストされたテーブルは、別のテーブル内にあるテーブルです。 以下に例を示します。

Selenium でネストされたテーブルにアクセスする方法

前のセクションの「//parent/child」と述語の概念を使用して、テキスト「4-5-6」を含むセルにアクセスするには、以下の XPath コードを思いつくことができるはずです。

Selenium でネストされたテーブルにアクセスする方法


以下の WebDriver コードは、アクセスしているセルの内部テキストを取得できるはずです。

Selenium でのネストされたテーブルへのアクセス

public static void main(String[] args) {
	String baseUrl = "http://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();
}

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

Selenium でのネストされたテーブルへのアクセス

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

要素が HTML コードの奥深くに記述されており、述語に使用する数値を決定するのが非常に難しい場合は、代わりにその要素の一意の属性を使用できます。

以下の例では、「ニューヨークからシカゴ」セルがマーキュリー ツアーズのホームページの HTML コードの奥深くに配置されています。

属性を述語として使用する Selenium Web テーブルの例

属性を述語として使用する Selenium Web テーブルの例

この場合、テーブルの一意の属性 (width=”270″) を述語として使用できます。 属性は、先頭に @ 記号を付けることで述語として使用されます。。 上の例では、「ニューヨークからシカゴ」セルは最初のセルにあります。 XNUMX番目のしたがって、XPath は以下のようになります。

属性を述語として使用した Selenium Web テーブルの例

XPath コードを Java に置くときは、By.xpath() の文字列引数が途中で終了しないように、「270」の両側の二重引用符にエスケープ文字のバックスラッシュ「\」を使用する必要があることに注意してください。 。

属性を述語として使用した Selenium Web テーブルの例

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

属性を述語として使用した Selenium Web テーブルの例

public static void main(String[] args) {
	String baseUrl = "http://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 Web テーブルの例

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

要素の番号または属性を取得することが非常に困難または不可能な場合、XPath コードを生成する最も簡単な方法は、要素の検査を使用することです。

Mercury Tours のホームページにある以下の例を考えてみましょう。

属性を述語として使用した Selenium Web テーブルの例

ステップ 1

Firebug を使用して XPath コードを取得します。

属性を述語として使用した Selenium Web テーブルの例

ステップ 2

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

属性を述語として使用した Selenium Web テーブルの例

ステップ 3

コードの残りの部分に二重スラッシュ「//」を接頭辞として付けて、WebDriver コードにコピーします。

属性を含む Selenium Web テーブルの例

以下の WebDriver コードは、アクセスしている要素の内部テキストを正常に取得できます。

属性を含む Selenium Web テーブルの例

public static void main(String[] args) {
	String baseUrl = "http://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();
}

まとめ

  • By.xpath() は、Selenium で WebTable の要素にアクセスするためによく使用されます。
  • 要素が HTML コードの奥深くに記述されており、述語に使用する数値を決定するのが非常に難しい場合は、Selenium get table 要素の代わりにその要素の一意の属性を使用できます。
  • 属性は、先頭に @ 記号を付けることで述語として使用されます。
  • Selenium で WebTable にアクセスするために要素の検査を使用する