Selenium WebDriver - 識別多個元素

---

---

在本節中，我們將學習如何透過各種選項識別多個元素。讓我們從瞭解如何透過 Id 識別多個元素開始。

透過 id

不建議透過定位器 id 來識別多個元素，因為 id 屬性的值對於每個元素都是唯一的，並且適用於頁面上的單個元素。

透過類名

導航到網頁後，我們必須與頁面上可用的 Web 元素進行互動，例如單擊連結/按鈕，在編輯框中輸入文字等，以完成我們的自動化測試用例。

為此，我們的首要任務是識別這些元素。我們可以使用元素的 class 屬性進行識別，並利用 find_elements_by_class_name 方法。透過此方法，所有具有匹配的 class 屬性值的元素都將以列表的形式返回。

如果不存在具有匹配 class 屬性值的元素，則將返回一個空列表。

透過類名識別多個元素的語法如下：

driver.find_elements_by_class_name("value of class attribute")

讓我們看看具有 class 屬性的 Web 元素的 html 程式碼，如下所示：

上圖中突出顯示的 class 屬性值為 toc chapters。讓我們嘗試計算此類 Web 元素的數量。

程式碼實現

透過類名識別多個元素的程式碼實現如下：

from selenium import webdriver
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')

#implicit wait time
driver.implicitly_wait(5)

#url launch
driver.get("https://tutorialspoint.tw/about/about_careers.htm")

#identify elements with class attribute
l = driver.find_elements_by_class_name("chapters")

#count elements
s = len(l)
print('Count is:')
print(s)

#driver quit
driver.quit()

輸出

輸出顯示訊息 - 程序退出程式碼為 0，這意味著上述 Python 程式碼成功執行。此外，控制檯中還列印了具有 class 屬性值 chapters（從 len 方法獲取）的 Web 元素總數 - 2。

透過標籤名

導航到網頁後，我們必須與頁面上可用的 Web 元素進行互動，例如單擊連結/按鈕，在編輯框中輸入文字等，以完成我們的自動化測試用例。

為此，我們的首要任務是識別這些元素。我們可以使用元素的標籤名進行識別，並利用 find_elements_by_tag_name 方法。透過此方法，所有具有匹配標籤名的元素都將以列表的形式返回。

如果不存在具有匹配標籤名的元素，則將返回一個空列表。

透過標籤名識別多個元素的語法如下：

driver.find_elements_by_tag_name("value of tagname")

讓我們看看一個 Web 元素的 html 程式碼，如下所示：

上圖中突出顯示的標籤名為 h4。讓我們嘗試計算具有標籤名 h4 的 Web 元素的數量。

程式碼實現

透過標籤名識別多個元素的程式碼實現如下：

from selenium import webdriver
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')

#implicit wait time
driver.implicitly_wait(5)

#url launch
driver.get("https://tutorialspoint.tw/index.htm")

#identify elements with tagname
l = driver.find_elements_by_tag_name("h4")

#count elements
s = len(l)
print('Count is:')
print(s)

#driver quit
driver.quit()

輸出

輸出顯示訊息 - 程序退出程式碼為 0，這意味著上述 Python 程式碼成功執行。此外，控制檯中還列印了具有標籤名 h4（從 len 方法獲取）的 Web 元素總數 - 1。

透過部分連結文字

導航到網頁後，我們可能需要透過單擊連結與 Web 元素進行互動以完成我們的自動化測試用例。部分連結文字用於具有錨標記的元素。

為此，我們的首要任務是識別這些元素。我們可以使用元素的部分連結文字屬性進行識別，並利用 find_elements_by_partial_link_text 方法。透過此方法，所有具有匹配給定部分連結文字值的元素都將以列表的形式返回。

如果不存在具有匹配部分連結文字值的元素，則將返回一個空列表。

透過部分連結文字識別多個元素的語法如下：

driver.find_elements_by_partial_link_text("value of partial link text")

讓我們看看連結的 html 程式碼，如下所示：

上圖中突出顯示的連結 - 使用條款的標籤名為 a，部分連結文字為 - 條款。讓我們嘗試在識別後識別文字。

程式碼實現

透過部分連結文字識別多個元素的程式碼實現如下：

from selenium import webdriver
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')

#implicit wait time
driver.implicitly_wait(5)

#url launch
driver.get("https://tutorialspoint.tw/about/about_careers.htm")

#identify elements with partial link text
l = driver.find_elements_by_partial_link_text('Terms')

#count elements
s = len(l)

#iterate through list
for i in l:

#obtain text
   t = i.text
print('Text is: ' + t)

#driver quit
driver.quit()

輸出

輸出顯示訊息 - 程序退出程式碼為 0，這意味著上述 Python 程式碼成功執行。此外，控制檯中還列印了使用部分連結文字定位器（從 text 方法獲取）識別的連結文字 - 使用條款。

透過連結文字

導航到網頁後，我們可能需要透過單擊連結與 Web 元素進行互動以完成我們的自動化測試用例。連結文字用於具有錨標記的元素。

為此，我們的首要任務是識別這些元素。我們可以使用元素的連結文字屬性進行識別，並利用 find_elements_by_link_text 方法。透過此方法，所有具有匹配給定連結文字值的元素都將以列表的形式返回。

如果不存在具有匹配連結文字值的元素，則將返回一個空列表。

透過連結文字識別多個元素的語法如下：

driver.find_elements_by_link_text("value of link text")

讓我們看看連結的 html 程式碼，如下所示：

上圖中突出顯示的連結 - Cookie 策略的標籤名為 a，連結文字為 - Cookie 策略。讓我們嘗試在識別後識別文字。

程式碼實現

透過連結文字識別多個元素的程式碼實現如下：

from selenium import webdriver
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')

#implicit wait time
driver.implicitly_wait(5)

#url launch
driver.get("https://tutorialspoint.tw/about/about_careers.htm")

#identify elements with link text
l = driver.find_elements_by_link_text('Cookies Policy')

#count elements
s = len(l)

#iterate through list
for i in l:

#obtain text
   t = i.text
print('Text is: ' + t)

#driver quit
driver.quit()

輸出

輸出顯示訊息 - 程序退出程式碼為 0，這意味著上述 Python 程式碼成功執行。此外，控制檯中還列印了使用連結文字定位器（從 text 方法獲取）識別的連結文字 - Cookie 策略。

透過名稱

導航到網頁後，我們必須與頁面上可用的 Web 元素進行互動，例如單擊連結/按鈕，在編輯框中輸入文字等，以完成我們的自動化測試用例。

為此，我們的首要任務是識別這些元素。我們可以使用元素的 name 屬性進行識別，並利用 find_elements_by_name 方法。透過此方法，將返回具有匹配 name 屬性值的元素，並以列表的形式返回。

如果不存在具有匹配 name 屬性值的元素，則將返回一個空列表。

透過名稱識別多個元素的語法如下：

driver.find_elements_by_name("value of name attribute")

讓我們看看一個 Web 元素的 html 程式碼，如下所示：

上圖中高亮顯示的編輯框有一個名為“search”的name屬性。讓我們嘗試在識別它之後向此編輯框中輸入一些文字。

程式碼實現

透過Name識別多個元素的程式碼實現如下：

from selenium import webdriver
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')

#implicit wait time
driver.implicitly_wait(5)

#url launch
driver.get("https://tutorialspoint.tw/index.htm")

#identify elements with name attribute
l = driver.find_elements_by_name('search')

#count elements
s = len(l)

#iterate through list
for i in l:

#obtain text
   t = i.send_keys('Selenium Python')
   v = i.get_attribute('value')
print('Value entered is: ' + v)

#driver quit
driver.quit()

輸出

輸出顯示訊息 - 程序退出程式碼為0，這意味著上述Python程式碼已成功執行。此外，在編輯框中輸入的值（從get_attribute方法獲取） - Selenium Python 會列印到控制檯。

透過CSS選擇器

導航到網頁後，我們必須與頁面上可用的 Web 元素進行互動，例如單擊連結/按鈕，在編輯框中輸入文字等，以完成我們的自動化測試用例。

為此，我們的首要任務是識別元素。我們可以為它們的識別建立CSS選擇器，並利用find_elements_by_css_selector方法。這樣，具有給定CSS匹配值的元素將以列表的形式返回。

如果不存在具有CSS匹配值的元素，則將返回一個空列表。

語法透過CSS選擇器識別多個元素如下：

driver.find_elements_by_css_selector("value of css")

CSS表示式規則

下面討論了建立CSS表示式的規則：

• 要識別具有CSS的元素，表示式應為tagname[attribute='value']。我們還可以專門使用id屬性來建立CSS表示式。
• 使用id，CSS表示式的格式應為tagname#id。例如，input#txt [此處input是標籤名，txt是id屬性的值]。
• 使用class，CSS表示式的格式應為tagname.class。例如，input.cls-txt [此處input是標籤名，cls-txt是class屬性的值]。
• 如果父元素有n個子元素，並且我們想識別第n個子元素，則CSS表示式應具有nth-of –type(n)。

在上面的程式碼中，如果我們想識別ul[Questions and Answers]的第四個li子元素，則CSS表示式應為ul.reading li:nth-of-type(4)。類似地，要識別最後一個子元素，CSS表示式應為ul.reading li:last-child。

對於值動態變化的屬性，我們可以使用^=來定位其屬性值以特定文字開頭的元素。例如，input[name^='qa'] [此處input是標籤名，name屬性的值以qa開頭]。

對於值動態變化的屬性，我們可以使用$=來定位其屬性值以特定文字結尾的元素。例如，input[class$='txt'] 這裡，input是標籤名，class屬性的值以txt結尾。

對於值動態變化的屬性，我們可以使用*=來定位其屬性值包含特定子文字的元素。例如，input[name*='nam'] 這裡，input是標籤名，name屬性的值包含子文字nam。

讓我們看看一個webelement的html程式碼：

上圖中高亮顯示的編輯框有一個名為“search”的name屬性，CSS表示式應為input[name='search']。讓我們嘗試在識別它之後向此編輯框中輸入一些文字。

程式碼實現

透過CSS選擇器識別多個元素的程式碼實現如下：

from selenium import webdriver
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')

#implicit wait time
driver.implicitly_wait(5)

#url launch
driver.get("https://tutorialspoint.tw/index.htm")

#identify elements with css
l = driver.find_elements_by_css_selector("input[name='search']")

#count elements
s = len(l)

#iterate through list
for i in l:

#obtain text
   t = i.send_keys('Tutorialspoint')
   v = i.get_attribute('value')
print('Value entered is: ' + v)

#driver quit
driver.quit()

輸出

輸出顯示訊息 - 程序退出程式碼為0，這意味著上述Python程式碼已成功執行。此外，在編輯框中輸入的值（從get_attribute方法獲取） - Tutorialspoint 會列印到控制檯。

透過XPath

導航到網頁後，我們必須與頁面上可用的 Web 元素進行互動，例如單擊連結/按鈕，在編輯框中輸入文字等，以完成我們的自動化測試用例。

為此，我們的首要任務是識別元素。我們可以為它們的識別建立XPath，並利用find_elements_by_xpath方法。這樣，具有給定XPath匹配值的元素將以列表的形式返回。

如果不存在具有XPath匹配值的元素，則將返回一個空列表。

語法透過XPath識別多個元素如下：

driver.find_elements_by_xpath("value of xpath")

XPath表示式規則

下面討論了建立XPath表示式的規則：

• 要識別具有XPath的元素，表示式應為//tagname[@attribute='value']。XPath可以分為兩種型別：相對XPath和絕對XPath。絕對XPath以/符號開頭，從根節點開始到我們要識別的元素。

例如：

/html/body/div[1]/div/div[1]/a

• 相對XPath以//符號開頭，並且不從根節點開始。

例如：

//img[@alt='tutorialspoint']

讓我們看看從根開始的高亮連結 - Home的html程式碼。

元素Home的絕對XPath可以如下所示：

/html/body/div[1]/div/div[1]/a.

元素Home的相對XPath可以如下所示：

//a[@title='TutorialsPoint - Home'].

函式

還有一些可用的函式可以幫助構建相對XPath表示式：

text()

它用於藉助頁面上的可見文字識別元素。XPath表示式如下：

//*[text()='Home'].

starts-with

它用於識別其屬性值以特定文字開頭的元素。此函式通常用於屬性值在每次頁面載入時都會更改的情況。

讓我們看看元素Q/A的html：

XPath表示式應如下所示：

//a[starts-with(@title, 'Questions &')].

contains()

它識別其屬性值包含子文字的元素。此函式通常用於屬性值在每次頁面載入時都會更改的情況。

XPath表示式如下：

//a[contains(@title, 'Questions & Answers')].

讓我們看看一個webelement的html程式碼：

上圖中高亮顯示的編輯框有一個名為“search”的name屬性，XPath表示式應為//input[@name='search']。讓我們嘗試在識別它之後向此編輯框中輸入一些文字。

程式碼實現

透過XPath識別多個元素的程式碼實現如下：

from selenium import webdriver
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')

#implicit wait time
driver.implicitly_wait(5)

#url launch
driver.get("https://tutorialspoint.tw/index.htm")

#identify elements with xpath
l = driver.find_elements_by_xpath("//input[@name='search']")

#count elements
s = len(l)

#iterate through list
for i in l:

#obtain text
   t = i.send_keys('Tutorialspoint - Selenium')
   v = i.get_attribute('value')
print('Value entered is: ' + v)

#driver quit
driver.quit()

輸出

輸出顯示訊息 - 程序退出程式碼為0，這意味著上述Python程式碼已成功執行。此外，在編輯框中輸入的值（從get_attribute方法獲取） - Tutorialspoint - Selenium 會列印到控制檯。