Selenium WebDriver - 單元素定位

---

---

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

透過 ID

為此，我們的第一步是識別元素。我們可以使用元素的 id 屬性進行識別，並使用 find_element_by_id 方法。這樣，將返回具有與 id 屬性匹配的值的第一個元素。

如果找不到與 id 屬性值匹配的元素，則將丟擲 NoSuchElementException 異常。

語法如下：

driver.find_element_by_id("value of id attribute")

讓我們看看 web 元素的 html 程式碼：

上圖中突出顯示的編輯框具有 id 屬性，其值為 gsc-i-id1。讓我們嘗試在識別它之後向此編輯框輸入一些文字。

程式碼實現

識別 web 元素的程式碼實現如下：

from selenium import webdriver
#set chromedriver.exe path
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')

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

#identify edit box with id
l = driver.find_element_by_id('gsc-i-id1')

#input text
l.send_keys('Selenium')

#obtain value entered
v = l.get_attribute('value')
print('Value entered: ' + v)

#driver quit
driver.quit()

輸出

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

透過名稱

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

為此，我們的第一步是識別元素。我們可以使用元素的 name 屬性進行識別，並使用 find_element_by_name 方法。這樣，將返回具有與 name 屬性匹配的值的第一個元素。

如果找不到與 name 屬性值匹配的元素，則將丟擲 NoSuchElementException 異常。

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

driver.find_element_by_name("value of name attribute")

讓我們看看如下所示的 web 元素的 html 程式碼：

上圖中突出顯示的編輯框具有 name 屬性，其值為 search。讓我們嘗試在識別它之後向此編輯框輸入一些文字。

程式碼實現

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

from selenium import webdriver
#set chromedriver.exe path
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')

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

#identify edit box with name
l = driver.find_element_by_name('search')

#input text
l.send_keys('Selenium Java')

#obtain value entered
v = l.get_attribute('value')
print('Value entered: ' + v)

#driver close
driver.close()

輸出

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

透過類名

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

為此，我們的第一步是識別元素。我們可以使用元素的 class 屬性進行識別，並使用 find_element_by_class_name 方法。這樣，將返回具有與 class 屬性匹配的值的第一個元素。

如果找不到與 class 屬性值匹配的元素，則將丟擲 NoSuchElementException 異常。

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

driver.find_element_by_class_name("value of class attribute")

讓我們看看如下所示的 web 元素的 html 程式碼：

上圖中突出顯示的 web 元素具有 class 屬性，其值為 heading。讓我們嘗試在識別它之後獲取該元素的文字。

程式碼實現

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

from selenium import webdriver
#set chromedriver.exe path
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')

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

#identify edit box with class
l = driver.find_element_by_class_name('heading')

#identify text
v = l.text

#text obtained
print('Text is: ' + v)

#driver close
driver.close()

輸出

輸出顯示訊息 - 程序以退出程式碼 0 結束，這意味著上述 Python 程式碼成功執行。此外，webelement 的文字（從 text 方法獲得） - 關於 Tutorialspoint 已列印到控制檯。

透過標籤名

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

為此，我們的第一步是識別元素。我們可以使用元素的標籤名進行識別，並使用 find_element_by_tag_name 方法。這樣，將返回具有與標籤名匹配的第一個元素。

如果找不到與標籤名匹配的元素，則將丟擲 NoSuchElementException 異常。

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

driver.find_element_by_tag_name("tagname of element")

讓我們看看如下所示的 web 元素的 html 程式碼：

上圖中突出顯示的編輯框具有標籤名 - input。讓我們嘗試在識別它之後向此編輯框輸入一些文字。

程式碼實現

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

from selenium import webdriver
#set chromedriver.exe path
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')

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

#identify edit box with tagname
l = driver.find_element_by_tag_name('input')

#input text
l.send_keys('Selenium Python')

#obtain value entered
v = l.get_attribute('value')
print('Value entered: ' + v)

#driver close
driver.close()

輸出

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

透過連結文字

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

為此，我們的第一步是識別元素。我們可以使用元素的連結文字屬性進行識別，並使用 find_element_by_link_text 方法。這樣，將返回具有與給定連結文字匹配的值的第一個元素。

如果找不到與連結文字值匹配的元素，則將丟擲 NoSuchElementException 異常。

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

driver.find_element_by_link_text("value of link text")

讓我們看看如下所示的 web 元素的 html 程式碼：

上圖中突出顯示的連結具有標籤名 - a 和連結文字 - Privacy Policy。讓我們嘗試在識別它之後單擊此連結。

程式碼實現

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

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

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

#identify link with link text
l = driver.find_element_by_link_text('Privacy Policy')

#perform click
l.click()
print('Page navigated after click: ' + driver.title)

#driver quit
driver.quit()

輸出

輸出顯示訊息 - 程序以退出程式碼 0 結束，這意味著上述 Python 程式碼成功執行。此外，應用程式的頁面標題（從 driver.title 方法獲得） - Tutorials Point 的關於隱私政策 - Tutorialspoint 會列印到控制檯。

透過部分連結文字

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

為此，我們的首要任務是識別元素。我們可以使用元素的部分連結文字屬性進行識別，並使用 find_element_by_partial_link_text 方法。這樣，將返回具有給定部分連結文字匹配值的第一個元素。

如果不存在具有部分連結文字匹配值的元素，則將丟擲 NoSuchElementException 異常。

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

driver.find_element_by_partial_link_text("value of partial ink text")

讓我們看看如下所示的 web 元素的 html 程式碼：

上圖中突出顯示的連結的標籤名為 a，部分連結文字為 Refund。讓我們嘗試在識別該連結後點擊它。

程式碼實現

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

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

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

#identify link with partial link text
l = driver.find_element_by_partial_link_text('Refund')

#perform click
l.click()
print('Page navigated after click: ' + driver.title)

#driver quit
driver.quit()

輸出

輸出顯示訊息 - 程序以退出程式碼 0 結束，這意味著上述 Python 程式碼成功執行。此外，應用程式的頁面標題（從 driver.title 方法獲得） - 退款、退款和取消政策 - Tutorialspoint 會列印到控制檯。

透過 CSS 選擇器

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

為此，我們的首要任務是識別元素。我們可以為元素建立一個 CSS 選擇器以進行識別，並使用 find_element_by_css_selector 方法。這樣，將返回具有給定 CSS 匹配值的第一個元素。

如果不存在具有 CSS 匹配值的元素，則將丟擲 NoSuchElementException 異常。

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

driver.find_element_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。

讓我們看看如下所示的 web 元素的 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 element with css
l = driver.find_element_by_css_selector("input[name='search']")
l.send_keys('Selenium Python')
v = l.get_attribute('value')
print('Value entered is: ' + v)

#driver quit
driver.quit()

輸出

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

透過 XPath

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

為此，我們的首要任務是識別元素。我們可以為元素建立一個 XPath 表示式以進行識別，並使用 find_element_by_xpath 方法。這樣，將返回具有給定 XPath 匹配值的第一個元素。

如果不存在具有 XPath 匹配值的元素，則將丟擲 NoSuchElementException 異常。

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

driver.find_element_by_xpath("value of xpath")

建立 XPath 表示式的規則

建立 XPath 表示式的規則如下所述：

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

例如：

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

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

例如：

//img[@alt='tutorialspoint']

讓我們看看從根節點開始的突出顯示連結 - Home 的 HTML 程式碼。

此元素的絕對 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')].

讓我們看看如下所示的網頁元素的 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 element with xpath
l = driver.find_element_by_xpath("//input[@name='search']")
l.send_keys('Selenium Python')
v = l.get_attribute('value')
print('Value entered is: ' + v)

#driver quit
driver.quit()

輸出

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