【Selenium学習】Seleniumの8つの測位方法

1.1 IDの位置決め

HTML タグの id 属性値は一意であるため、id に基づいて複数の要素を見つけることはできません。以下は、Baidu ホームページの検索ボックスに「python」というテキストを入力する例です。図 1.1 に示すように、検索ボックスの id 属性値は「kw」です。

コードは次のとおりです。「find_element_by_id」メソッドは廃止されました。find_element(By.ID, 'kw') を使用してください。

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Firefox()
# 需要将浏览器驱动添加到环境变量中
# 打开百度
driver.get('https://www.baidu.com/')
# 通过id，在搜索输入框中输入文本“python”
driver.find_element(By.ID, 'kw').send_keys('python')
# 点击搜索
driver.find_element(By.ID, 'su').click()
# 关闭浏览器
driver.close()

1.2 名前の位置付け

上記の Baidu 検索ボックスは、図 1.1 に示すように、name を使用して実装することもできます。その name 属性値は "wd" であり、メソッド "find_element(By.NAME, 'wd')" は、次の位置指定を意味します。名前

コードは以下のように表示されます:

driver = webdriver.Firefox()
# 打开百度
driver.get('https://www.baidu.com/')
# 通过name，在搜索输入框中输入文本“自动化测试”
driver.find_element(By.NAME, 'wd').send_keys('自动化测试')
# 点击搜索
driver.find_element(By.ID, 'su').click()
# 关闭浏览器
driver.close()

注: name メソッドを使用して配置する場合は、name 値が一意であることを確認する必要があります。そうでない場合、配置は失敗します。

1.3 クラスの位置付け

Baidu ホームページの検索ボックスを例に挙げます。図 1.1 に示すように、そのクラス属性値は「s_ipt」で、「By.CLASS_NAME, 's_ipt'」は class_name による位置指定を意味します。

コードは以下のように表示されます:

driver = webdriver.Firefox()
# 打开百度
driver.get('https://www.baidu.com/')
# 通过class，在搜索输入框中输入文本“web测试”
driver.find_element(By.CLASS_NAME, 's_ipt').send_keys('web测试')
# 点击搜索
driver.find_element(By.ID, 'su').click()
# 关闭浏览器
driver.close()

1.4 link_text の配置

link_text は、ハイパーリンクの名前全体をキーワードとして使用して、要素を見つけます。 Baidu のホームページにある「ニュース」ハイパーリンクを例にとります。図 1.2 に示すように、キーワードは「ニュース」です。

コードは以下のように表示されます:

driver = webdriver.Firefox()
# 打开百度
driver.get('https://www.baidu.com/')
# 通过link_text定位，点击‘新闻’超链接
driver.find_element(By.LINK_TEXT, '新闻').click()
# 关闭浏览器
driver.close()

注: この方法を使用して要素のハイパーリンクを見つけるには、中国語の文字を完全に記述する必要があります。

1.5 部分リンクテキストの配置

つまり、データベース内のファジー クエリと同様に、ハイパーリンク テキストの一部を使用して要素を検索します。 「ニュース」ハイパーリンクを例にとると、必要なのはハイパーリンクのテキスト全体のサブセットである「新規」という単語だけです。

コードは以下のように表示されます:

driver = webdriver.Firefox()
# 打开百度
driver.get('https://www.baidu.com/')
# 通过partial_link_text定位，用超链接文字的部分文本来定位元素，类似数据库的模糊查询
driver.find_element(By.PARTIAL_LINK_TEXT, '新').click()
# 关闭浏览器
driver.close()

1.6 tag_name の位置決め

Tag_name の位置決めとは、タグ名による位置決めを意味し、図 1.6 に示すように、タグ "form" を配置し、タグの属性値 "name" を出力します。

コードは以下のように表示されます:

driver = webdriver.Firefox()
# 打开百度
driver.get('https://www.baidu.com/')
# tag_name 定位即通过标签名称定位
print(driver.find_element(By.TAG_NAME, 'form').get_attribute('name'))

成功するとコンソールは「f」を出力します:

1.7 CSS の配置

CSS 配置の利点は、高速さと構文の簡潔さです。表 1.1 の内容は、W3School の CSS リファレンス マニュアルからのものです。 CSS の位​​置決め用のセレクターは十数種類ありますが、このセクションでは主によく使われるセレクターをいくつか紹介します。

ここでも Baidu 検索ボックスを例として挙げます。コードは次のとおりです。

driver = webdriver.Firefox()
# 打开百度
driver.get('https://www.baidu.com/')

#  以class选择器为例，实现CSS定位，在搜索框输入“python3”
driver.find_element(By.CSS_SELECTOR, '.s_ipt').send_keys('python3')

#  以id定位语法结构为：#加 id 名，实现CSS定位，在搜索框输入“python3”
driver.find_element(By.CSS_SELECTOR, '#kw').send_keys('python3')

# CSS 定位主要利用属性 class 和 id 进行元素定位。也可以利用常规的标签名称来定位，如输入框标签“input”，在标签内部又设置了属性值为“name=’wd’”
driver.find_element(By.CSS_SELECTOR, "input[name='wd']").send_keys('python3')

# CSS 定位方式可以使用元素在页面布局中的绝对路径来实现元素定位。百度首页搜索输入框元素的绝对路
# 径为“html>body>div>div>div>div>div>form>span>input[name="wd"]”
driver.find_element(By.CSS_SELECTOR, 'html>body>div>div>div>div>div>form>span>input[name="wd"]').send_keys('python3')

# CSS 定位也可以使用元素在页面布局中的相对路径来实现元素定位。相对路径的写法和直接利用标签名称来定位，两者
# 的代码实现的功能是一致的
driver.find_element(By.CSS_SELECTOR, "input[name='wd']").send_keys('python3')

# 点击搜索
driver.find_element(By.ID, 'su').click()
# 关闭浏览器
driver.close()

1.8 XPath の位置決め

XPath を使用して要素を検索する方法は、検索が困難な要素に対して非常に効果的であり、特に id や名前などの属性を持たない一部の要素の場合、ほとんどの場合に解決できます。

XPath は XML Path language の略語で、XML ドキュメントの特定部分の位置を決定するために使用される言語です。 XML ドキュメント内の要素名と属性を検索し、主な目的は XML ドキュメント内のノードを見つけることです。 XPath の配置は CSS の配置よりも柔軟性が高くなります。 XPath は前方または後方に検索できますが、CSS ポジショニングは前方にしか検索できませんが、XPath ポジショニングは CSS よりも遅くなります。

XPath 言語には、ルート ノード、要素、属性、テキスト、処理命令、名前空間などが含まれます。次のテキストは、XML のさまざまなノード タイプを示し、XPath の理解を容易にするために使用される XML サンプル ドキュメントです。

<?xml version = "1.0" encoding = "utf-8" ?> 
<!-- 这是一个注释节点 --> 
<animalList type="mammal"> 
 <animal categoruy = "forest"> 
 <name>Tiger</name> 
 <size>big</size> 
 <action>run</action> 
 </animal> 
</animalList>

このうち、<animalList> はドキュメント ノードでありルート ノードでもあり、<name> は要素ノードであり、type="mammal" は属性ノードです。

ノード間の関係:

• 親ノード。各要素には親ノードがあり、上記の XML の例では、animal 要素が name、size、および action 要素の親ノードです。

• 子ノード。親ノードとは異なり、ここでは詳細には触れません。

• 兄弟ノード。兄弟ノードと呼ばれるものもあります。これは、同じ親ノードを持つノードを表します。上記のコードに示されているように、name、size、および action 要素はすべて兄弟ノードです。

• 祖先ノード。これは、ノードの親ノード、または親ノードの親ノードなどを指します。上記のコードに示すように、name 要素ノードの祖先ノードは、animal とanimalList です。

• 子孫ノード。これは、ノードの子ノード、子ノードの子ノードなどを表します。上記のコードに示すように、animalList 要素ノードの子孫ノードには、animal、name などが含まれます。

ここでも Baidu 検索ボックスを例として挙げます。コードは次のとおりです。

driver = webdriver.Firefox()
# 打开百度
driver.get('https://www.baidu.com/')
# XPath 有多种定位策略，最简单直观的就是写出元素的绝对路径。
driver.find_element(By.XPATH, '/html/body/div/div/div/div/div/form/span/input').send_keys('python3')

# XPath还可以使用元素的属性值来定位。//input 表示当前页面某个 input 标签，[@id='kw'] 表示这个元素的 id 值是 kw。
driver.find_element(By.XPATH, "//input[@id='kw']").send_keys('python3')

# 如果一个元素本身没有可以唯一标识这个元素的属性值，我们可以查找其上一级元素。
# form[@class='fm  has-soutu']通过 class 定位到父元素，后面的/span/input 表示父元素下面的子元素。
driver.find_element(By.XPATH, "//form[@class='fm  has-soutu']/span/input").send_keys('python3')

# 如果一个属性不能唯一区分一个元素，那么我们可以使用逻辑运算符连接多个属性来查找元素
driver.find_element(By.XPATH, "//input[@id='kw' and @class='s_ipt']").send_keys('python3')

# 点击搜索
driver.find_element(By.ID, 'su').click()
# 关闭浏览器
driver.close()

この章では主に Selenium 要素の 8 つの配置方法を紹介します。それぞれの配置方法には独自の特別な使用方法があり、読者はその特殊性をマスターするだけで済みます。プロジェクトでは、より多くのことを使用し、より考え、経験を要約する必要があり、時間が経つにつれて、これらのポジショニング方法についてより深く理解できるようになります。