Selenium 简明教程
Selenium Webdriver - Identify Single Element
一旦我们导航到某个网页,我们必须与该页面中可用的 web 元素进行交互,比如点击链接/按钮、在编辑框中输入文本等,以完成我们的自动化测试用例。
Once we navigate to a webpage, we have to interact with the web elements available on the page like clicking a link/button, entering text within an edit box, and so on to complete our automation test case.
By Id
为此,我们的第一个任务是识别该元素。我们可以对某个元素使用 id 属性进行识别,并利用 find_element_by_id 方法。利用该方法会返回属性 id 的匹配值的第一个元素。
For this, our first job is to identify the element. We can use the id attribute for an element for its identification and utilize the method find_element_by_id. With this, the first element with the matching value of the attribute id is returned.
如果没有与 id 属性的匹配值相匹配的元素,则会抛出 NoSuchElementException。
In case there is no element with the matching value of the id attribute, NoSuchElementException shall be thrown.
用于识别元素的 syntax 如下 −
The syntax for identifying an element is as follows −
driver.find_element_by_id("value of id attribute")
让我们看看一个 web 元素的 html 代码 −
Let us see the html code of a web element −

上图中突出显示的编辑框有一个 id 属性,值为 gsc-i-id1。让我们在识别出该编辑框后尝试输入一些文本。
The edit box highlighted in the above image has an id attribute with value gsc-i-id1. Let us try to input some text into this edit box after identifying it.
Code Implementation
识别 web 元素的代码实现如下 −
The code implementation of identifying a web element is as follows −
from selenium import webdriver
#set chromedriver.exe path
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')
#url launch
driver.get("https://www.tutorialspoint.com/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()
Output

输出显示消息 - Process with exit code 0,表示上面的 Python 代码已成功执行。此外,在编辑框中输入的值(通过 get_attribute 方法获取)——Selenium 会以打印的形式出现在控制台中。
The output shows the message - Process with exit code 0 meaning that the above Python code executed successfully. Also, the value entered within the edit box (obtained from the get_attribute method) - Selenium gets printed in the console.
By Name
一旦我们导航到某个网页,我们必须与该页面中可用的 web 元素进行交互,比如点击链接/按钮、在编辑框中输入文本等,以完成我们的自动化测试用例。
Once we navigate to a webpage, we have to interact with the web elements available on the page like clicking a link/button, entering text within an edit box, and so on to complete our automation test case.
为此,我们的第一个任务是识别该元素。我们可以对某个元素使用 name 属性进行识别,并利用 find_element_by_name 方法。利用该方法会返回属性 name 的匹配值的第一个元素。
For this, our first job is to identify the element. We can use the name attribute for an element for its identification and utilize the method find_element_by_name. With this, the first element with the matching value of the attribute name is returned.
如果没有与 name 属性的匹配值相匹配的元素,则会抛出 NoSuchElementException。
In case there is no element with the matching value of the name attribute, NoSuchElementException shall be thrown.
用于按名称识别单个元素的 syntax 如下:
The syntax for identifying single element by name is as follows:
driver.find_element_by_name("value of name attribute")
让我们看看 web 元素的 html 代码,如下所示 −
Let us see the html code of a web element as given below −

上图中突出显示的编辑框具有值为 search 的 name 属性。让我们尝试识别该编辑框后向其中输入一些文本。
The edit box highlighted in the above image has a name attribute with value search. Let us try to input some text into this edit box after identifying it.
Code Implementation
按名称识别单个元素的代码实现如下 −
The code implementation of identifying single element by name is as follows −
from selenium import webdriver
#set chromedriver.exe path
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')
#url launch
driver.get("https://www.tutorialspoint.com/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()
Output

输出显示消息 - Process with exit code 0,表示上面的 Python 代码已成功执行。此外,在编辑框中输入的值(通过 get_attribute 方法获取)——Selenium Java 会以打印的形式出现在控制台中。
The output shows the message - Process with exit code 0 meaning that the above Python code executed successfully. Also, the value entered within the edit box (obtained from the get_attribute method) - Selenium Java gets printed in the console.
By ClassName
一旦我们导航到某个网页,我们必须与该页面中可用的 web 元素进行交互,比如点击链接/按钮、在编辑框中输入文本等,以完成我们的自动化测试用例。
Once we navigate to a webpage, we have to interact with the web elements available on the page like clicking a link/button, entering text within an edit box, and so on to complete our automation test case.
为此,我们的第一个任务是识别该元素。我们可以对某个元素使用 class 属性进行识别,并利用 find_element_by_class_name 方法。利用该方法会返回属性 class 的匹配值的第一个元素。
For this, our first job is to identify the element. We can use the class attribute for an element for its identification and utilise the method find_element_by_class_name. With this, the first element with the matching value of the attribute class is returned.
如果没有与 class 属性的匹配值相匹配的元素,则会抛出 NoSuchElementException。
In case there is no element with the matching value of the class attribute, NoSuchElementException shall be thrown.
用于按类名识别单个元素的 syntax 如下:
The syntax for identifying single element by Classname is as follows :
driver.find_element_by_class_name("value of class attribute")
让我们看看 web 元素的 html 代码,如下所示 −
Let us see the html code of a web element as given below −

上图中高亮的 Web 元素具有值为 heading 的 class 属性。让我们在识别出该元素后尝试获取该元素的文本。
The web element highlighted in the above image has a class attribute with value heading. Let us try to obtain the text of that element after identifying it.
Code Implementation
通过类名识别单个元素的代码实现如下所示:
The code implementation of identifying single element by Classname is as follows −
from selenium import webdriver
#set chromedriver.exe path
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')
#url launch
driver.get("https://www.tutorialspoint.com/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()
Output

输出显示消息 - 退出代码为 0 的进程表示上述 Python 代码执行成功。此外,在控制台中打印了 Web 元素(从 text 方法获得)的文本 - 关于 Tutorialspoint。
The output shows the message - Process with exit code 0 meaning that the above Python code executed successfully. Also, the text of the webelement (obtained from the text method) - About Tutorialspoint gets printed in the console.
By TagName
一旦我们导航到一个网页,我们就必须与页面上可用的网络元素交互,例如单击链接/按钮、在编辑框中输入文本等等,才能完成我们的自动化测试用例。
Once we navigate to a webpage, we have to interact with the webelements available on the page like clicking a link/button, entering text within an edit box, and so on to complete our automation test case.
为此,我们的首要任务是识别元素。我们可以使用元素的标记名称进行识别,并利用 find_element_by_tag_name 方法。通过这种方式,将返回第一个匹配标记名称的元素。
For this, our first job is to identify the element. We can use the tagname for an element for its identification and utilise the method find_element_by_tag_name. With this, the first element with the matching tagname is returned.
如果没有匹配标记名称的元素,则将抛出 NoSuchElementException。
In case there is no element with the matching tagname, NoSuchElementException shall be thrown.
用于通过标记名称识别单个元素的 syntax 如下所示:
The syntax for identifying single element by Tagname is as follows:
driver.find_element_by_tag_name("tagname of element")
让我们看看 web 元素的 html 代码,如下所示 −
Let us see the html code of a web element as given below −

上图中高亮的编辑框标记名称为 input。让我们在识别出该元素后尝试在此编辑框中输入一些文本。
The edit box highlighted in the above image has a tagname - input. Let us try to input some text into this edit box after identifying it.
Code Implementation
通过标记名称识别单个元素的代码实现如下所示:
The code implementation of identifying single element by Tagname is as follows −
from selenium import webdriver
#set chromedriver.exe path
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')
#url launch
driver.get("https://www.tutorialspoint.com/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()
Output

输出显示了信息 - 进程退出代码 0,表明上述 Python 代码已成功执行。此外,在编辑框中输入的值(从 get_attribute 方法获取) - Selenium Python 会在控制台打印出来。
The output shows the message - Process with exit code 0 meaning that the above Python code executed successfully. Also, the value entered within the edit box (obtained from the get_attribute method) - Selenium Python gets printed in the console.
By Link Text
在导航到某个网页后,我们可能通过单击链接来与 Web 元素进行交互以完成我们的自动化测试用例。链接文本用于具有锚标记的元素。
Once we navigate to a webpage, we may interact with a webelement by clicking a link to complete our automation test case. The link text is used for an element having the anchor tag.
为此,我们的首要任务是识别元素。我们可以使用元素的链接文本属性进行识别,并利用 find_element_by_link_text 方法。通过这种方式,将返回第一个与给定链接文本的值匹配的元素。
For this, our first job is to identify the element. We can use the link text attribute for an element for its identification and utilize the method find_element_by_link_text. With this, the first element with the matching value of the given link text is returned.
如果没有与链接文本的值匹配的元素,则将抛出 NoSuchElementException。
In case there is no element with the matching value of the link text, NoSuchElementException shall be thrown.
用于通过链接文本识别单个元素的 syntax 如下所示:
The syntax for identifying single element by Link Text is as follows:
driver.find_element_by_link_text("value of link text")
让我们看看 web 元素的 html 代码,如下所示 −
Let us see the html code of a web element as given below −

上图中高亮的链接具有标记名称 a 和链接文本 - 隐私政策。让我们在识别出该元素后尝试单击此链接。
The link highlighted in the above image has a tagname - a and the link text - Privacy Policy. Let us try to click on this link after identifying it.
Code Implementation
通过链接文本识别单个元素的代码实现如下所示:
The code implementation of identifying single element by Link Text is as follows −
from selenium import webdriver
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')
#url launch
driver.get("https://www.tutorialspoint.com/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()
Output

输出显示消息 - 退出代码为 0 的进程表示上述 Python 代码执行成功。此外,在控制台中打印了应用程序的页面标题(从 driver.title 方法获得) - 关于 Tutorials Point 的隐私政策 - Tutorialspoint。
The output shows the message - Process with exit code 0 meaning that the above Python code executed successfully. Also, the page title of the application (obtained from the driver.title method) - About Privacy Policy at Tutorials Point - Tutorialspoint gets printed in the console.
By Partial Link Text
在导航到某个网页后,我们可能通过单击链接来与 Web 元素进行交互以完成我们的自动化测试用例。部分链接文本用于具有锚标记的元素。
Once we navigate to a webpage, we may interact with a web element by clicking a link to complete our automation test case. The partial link text is used for an element having the anchor tag.
为此,我们的首要任务是识别元素。我们可以使用元素的部分链接文本属性进行识别,并利用 find_element_by_partial_link_text 方法。通过这种方式,将返回第一个与给定部分链接文本的值匹配的元素。
For this, our first job is to identify the element. We can use the partial link text attribute for an element for its identification and utilize the method find_element_by_partial_link_text. With this, the first element with the matching value of the given partial link text is returned.
如果没有与部分链接文本的值匹配的元素,则将抛出 NoSuchElementException。
In case there is no element with the matching value of the partial link text, NoSuchElementException shall be thrown.
用于通过部分链接文本识别单个元素的 syntax 如下所示:
The syntax for identifying single element by Partial Link Text is as follows −
driver.find_element_by_partial_link_text("value of partial ink text")
让我们看看 web 元素的 html 代码,如下所示 −
Let us see the html code of a web element as given below −

上图中高亮的链接具有标签名称 - a 和部分链接文本 - 退款。让我们尝试在识别此链接后单击此链接。
The link highlighted in the above image has a tagname - a and the partial link text - Refund. Let us try to click on this link after identifying it.
Code Implementation
通过部分链接文本识别单个元素的代码实现如下所示 −
The code implementation for identifying single element by Partial Link Text is as follows −
from selenium import webdriver
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')
#url launch
driver.get("https://www.tutorialspoint.com/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()
Output

输出显示消息 - 以退出代码 0 处理,这意味着上述 Python 代码已成功执行。此外,应用程序的页面标题(从 driver.title 方法获得)- 退货、退款和取消政策 - Tutorialspoint 会打印在控制台中。
The output shows the message - Process with exit code 0 meaning that the above Python code executed successfully. Also, the page title of the application (obtained from the driver.title method) - Return, Refund & Cancellation Policy - Tutorialspoint gets printed in the console.
By CSS Selector
一旦我们导航到一个网页,我们就必须与页面上可用的网络元素交互,例如单击链接/按钮、在编辑框中输入文本等等,才能完成我们的自动化测试用例。
Once we navigate to a webpage, we have to interact with the webelements available on the page like clicking a link/button, entering text within an edit box, and so on to complete our automation test case.
为此,我们的首要任务是识别元素。我们可以为元素创建一个 css 选择器,以进行识别并使用 find_element_by_css_selector 方法。这样,将返回具有给定 css 匹配值的第一个元素。
For this, our first job is to identify the element. We can create a css selector for an element for its identification and use the method find_element_by_css_selector. With this, the first element with the matching value of the given css is returned.
如果没有与 css 的匹配值相匹配的元素,则将抛出 NoSuchElementException。
In case there is no element with the matching value of the css, NoSuchElementException shall be thrown.
通过 CSS 选择器识别单个元素的语法如下所示 −
The syntax for identifying single element by CSS Selector is as follows −
driver.find_element_by_css_selector("value of css")
Rules to create CSS Expression
创建 css 表达式的规则如下所述
The rules to create a css expression are discussed below
-
To identify the element with css, the expression should be tagname[attribute='value']. We can also specifically use the id attribute to create a css expression.
-
With id, the format of a css expression should be tagname#id. For example, input#txt [here input is the tagname and the txt is the value of the id attribute].
-
With class, the format of css expression should be tagname.class. For example, input.cls-txt [here input is the tagname and the cls-txt is the value of the class attribute].
-
If there are n children of a parent element, and we want to identify the nth child, the css expression should have nth-of –type(n).

在上面的代码中,如果我们想识别 ul[Questions and Answers] 的第四个 li 子项,则 css 表达式应为 ul.reading li:nth-of-type(4)。类似地,要识别最后一个子项,css 表达式应为 ul.reading li:last-child。
In the above code, if we want to identify the fourth li childof ul[Questions and Answers], the css expression should be ul.reading li:nth-of-type(4). Similarly, to identify the last child, the css expression should be ul.reading li:last-child.
对于其值动态变化的属性,我们可以使用 ^= 来查找其属性值以特定文本开头的元素。例如,input[name^='qa'] 其中,input 是标签名,name 属性的值以 qa 开头。
For attributes whose values are dynamically changing, we can use ^= to locate an element whose attribute value starts with a particular text. For example, input[name^='qa'] Here, input is the tagname and the value of the name attribute starts with qa.
对于其值动态变化的属性,我们可以使用 $ = 来查找其属性值以特定文本结尾的元素。例如,input[class $ ='txt'] 其中,input 是标签名,class 属性的值以 txt 结尾。
For attributes whose values are dynamically changing, we can use $ = to locate an element whose attribute value ends with a particular text. For example, input[class $ ='txt'] Here, input is the tagname and the value of the class attribute ends with txt.
对于值动态变化的属性,我们可以使用 = to locate an element whose attribute value contains a specific sub-text. For example, input[name ='nam']。此处,input 是标签名称,而 name 属性的值包含子文本 nam。
For attributes whose values are dynamically changing, we can use = to locate an element whose attribute value contains a specific sub-text. For example, input[name='nam'] Here, input is the tagname and the value of the name attribute contains the sub-text nam.
让我们看看 web 元素的 html 代码,如下所示 −
Let us see the html code of a web element as given below −

上面图像中突出显示的编辑框具有值的搜索 name 属性,css 表达式应为 input[name='search']。让我们在 identification 它后尝试在此编辑框中输入一些文本。
The edit box highlighted in the above image has a name attribute with value search, the css expression should be input[name='search']. Let us try to input some text into this edit box after identifying it.
Code Implementation
通过 CSS 选择器识别单个元素的代码实现如下所示 −
The code implementation of identifying single element by CSS Selector is as follows −
from selenium import webdriver
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')
#implicit wait time
driver.implicitly_wait(5)
#url launch
driver.get("https://www.tutorialspoint.com/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()
Output

输出显示了信息 - 进程退出代码 0,表明上述 Python 代码已成功执行。此外,在编辑框中输入的值(从 get_attribute 方法获取) - Selenium Python 会在控制台打印出来。
The output shows the message - Process with exit code 0 meaning that the above Python code executed successfully. Also, the value entered within the edit box (obtained from the get_attribute method) - Selenium Python gets printed in the console.
ByXpath
一旦我们导航到一个网页,我们就必须与页面上可用的网络元素交互,例如单击链接/按钮、在编辑框中输入文本等等,才能完成我们的自动化测试用例。
Once we navigate to a webpage, we have to interact with the webelements available on the page like clicking a link/button, entering text within an edit box, and so on to complete our automation test case.
为此,我们的首要任务是识别元素。我们可以为元素创建 xpath,以进行识别并使用 find_element_by_xpath 方法。这样,将返回具有给定 xpath 匹配值的第一个元素。
For this, our first job is to identify the element. We can create an xpath for an element for its identification and use the method find_element_by_xpath. With this, the first element with the matching value of the given xpath is returned.
如果没有与 xpath 的匹配值相匹配的元素,则将抛出 NoSuchElementException。
In case there is no element with the matching value of the xpath, NoSuchElementException shall be thrown.
通过 Xpath 识别单个元素的语法如下所示 −
The syntax for identifying single element by Xpath is as follows −
driver.find_element_by_xpath("value of xpath")
Rules to create Xpath Expression
创建 xpath 表达式的规则如下所述:
The rules to create a xpath expression are discussed below −
-
To identify the element with xpath, the expression should be //tagname[@attribute='value']. There can be two types of xpath – relative and absolute. The absolute xpath begins with / symbol and starts from the root node upto the element that we want to identify.
例如,
For example,
/html/body/div[1]/div/div[1]/a
-
The relative xpath begins with // symbol and does not start from the root node.
例如,
For example,
//img[@alt='tutorialspoint']
让我们从根部开始看高亮链接 - 主页的 html 代码。
Let us see the html code of the highlighted link - Home starting from the root.

此元素的绝对 xpath 可以如下所示 −
The absolute xpath for this element can be as follows −
/html/body/div[1]/div/div[1]/a.
元素主页的相对 xpath 可以如下:
The relative xpath for element Home can be as follows −
//a[@title='TutorialsPoint - Home'].

Functions
还有一些可用的函数可帮助构建相对 xpath 表达式。
There are also functions available which help to frame relative xpath expressions.
text()
text()
它用于识别页面上具有可见文本的元素。xpath 表达式如下所示 −
It is used to identify an element with its visible text on the page. The xpath expression is as follows −
//*[text()='Home'].

starts-with
starts-with
它用于 identification 其属性值以特定文本开头的元素。此函数通常用于在每个页面加载时其值都会发生变化的属性。
It is used to identify an element whose attribute value begins with a specific text. This function is normally used for attributes whose value changes on each page load.
让我们看看 Q/A 链接的 html −
Let us see the html of the link Q/A −

xpath 表达式应如下所示:
The xpath expression should be as follows:
//a[starts-with(@title, 'Questions &')].

contains()
contains()
它标识一个其属性值包含子文本的元素。此函数通常用于在每次页面加载时都会更改其值的属性。
It identifies an element whose attribute value contains a sub-text. This function is normally used for attributes whose value changes on each page load.
xpath 表达式如下 −
The xpath expression is as follows −
//a[contains(@title, 'Questions & Answers')].

让我们看看下面显示的 webelement 的 html 代码 −
Let us see the html code of a webelement as shown below −

上图中高亮的编辑框有一个名为搜索的属性,xpath 表达式应为 //input[@name='search']。让我们在识别出此编辑框后尝试在其中输入一些文本。
The edit box highlighted in the above image has a name attribute with value search, the xpath expression should be //input[@name='search']. Let us try to input some text into this edit box after identifying it.
Code Implementation
通过 XPath 识别单个元素的代码实现如下所示 −
The code implementation of identifying single element by XPath is as follows −
from selenium import webdriver
driver = webdriver.Chrome(executable_path='../drivers/chromedriver')
#implicit wait time
driver.implicitly_wait(5)
#url launch
driver.get("https://www.tutorialspoint.com/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 会在控制台打印出来。
The output shows the message - Process with exit code 0 meaning that the above Python code executed successfully. Also, the value entered within the edit box (obtained from the get_attribute method) - Selenium Python gets printed in the console.