selenium中元素的定位方式

一、概述

Selenium是一个用于自动化Web应用程序测试的工具，它支持多种编程语言，如Java、Python、C#等。在Selenium中，元素的定位方式是指如何通过代码找到Web页面上的特定元素，以便进行后续的操作或验证。

二、Selenium中常用的元素定位方式

1. 通过ID定位： 使用元素的唯一标识符（ID）来定位元素。示例代码：driver.find_element(By.ID,'element_id')

2. 通过Name定位： 使用元素的名称（Name）来定位元素。示例代码：driver.find_element(By.NAME,'element_name')

3. 通过XPath定位： 使用XPath表达式来定位元素，XPath是一种用于在XML文档中定位节点的语言。示例代码：driver.find_element(By.XPATH,'//tag[@attribute="value"]')

4. 通过CSS选择器定位： 使用CSS选择器来定位元素。示例代码：driver.find_element(By.CSS_SELECTOR,'css_selector')

5. 通过链接文本定位： 使用链接文本（即<a>标签内的文本）来定位链接元素。示例代码：driver.find_element(By.LINK_TEXT,'link_text')

6. 通过部分链接文本定位： 使用链接文本的一部分来定位链接元素。示例代码：driver.find_element(By.PARTIAL_LINK_TEXT,'partial_link_text')

7. 通过标签名定位： 使用元素的标签名来定位元素。示例代码：driver.find_element(By.TAG_NAME,'tag_name')

8. 通过类名定位： 使用元素的类名来定位元素。示例代码：driver.find_element_by_class_name('class_name')

ps：

1.每种方法都有对应的find_elements_by_xx()方法，返回的值是元素的list列表。

2.一个页面id的值具有唯一性，但是可能存在元素的id值一样，这个取决前端代码的规范程度了。

3.常用的定位方式是id定位或xpath定位。

4.selenium 4.0 以上版本，仅保留 driver.find_element(self, by, value)

 注意：这些定位方式可以单独使用，也可以组合使用，以满足不同场景下的定位需求。在选择定位方式时，建议优先选择ID和类名这样的稳定属性来定位元素，以确保测试脚本的稳定性和可靠性。

三、XPath和CSS选择器

XPath和CSS选择器是两种常用的定位元素的方式。

它们都具有一些独特的特点和注意事项：

XPath定位: XPath（XML Path Language）是一种用于在XML或HTML文档中定位元素的语言。在XPath中，元素可以根据其标签名、属性、层级关系等条件来进行定位。

• 语法： XPath使用路径表达式来定位元素。常见的XPath语法包括标签名、属性、层级关系等，例如//tagname[@attribute='value']。
• 特点： XPath的表达能力非常强大，可以通过路径和条件表达式提供更灵活的定位能力，例如定位父元素/子元素、兄弟元素等。
• 注意事项： 在使用XPath时，应注意以下事项：
  • 尽量避免使用绝对路径，而是使用相对路径，以提高代码的可维护性。
  • 使用简洁的XPath表达式，不要过分依赖元素的层级关系，以避免当页面结构发生变化时定位失败。
  • 避免使用动态生成的属性值来定位元素，选择稳定的属性或其他唯一的特征。

CSS选择器定位: CSS选择器是一种用于选择HTML元素的简洁语法。它采用类似CSS样式的选择器方式来定位元素。

• 语法： CSS选择器使用选择器名称、属性和值来定位元素。常见的CSS选择器包括标签名、类名、属性、子选择器等，例如tagname[attribute='value']。
• 特点： CSS选择器直观且易读，具有较好的性能，当选择器使用得当时，定位元素的速度相对较快。
• 注意事项： 在使用CSS选择器时，应注意以下事项：
  • 选择器应具有唯一性，以避免出现多个匹配元素的情况。
  • 尽量使用简洁的选择器，避免选择器太过复杂，以提高定位的准确性和效率。
  • 对于某些特殊属性值，如包含特殊字符、空格或双引号等的属性，可能需要使用适当的转义符或引号来表示。

综上所述，XPath和CSS选择器都是强大的定位元素工具。选择XPath还是CSS选择器取决于具体的定位需求和测试情景。在选择和使用定位方式时，请注意选择唯一、稳定的属性，并尽量避免使用复杂的表达式和依赖动态值的定位方式。 

四、XPATH 中常见的关系表达

下面是一个表格，展示了XPath中常见的关系及其表达方法：

例如，对于以下HTML结构：

<div class="parent">
    <div class="child">子元素1</div>
    <div class="child">子元素2</div>
    <div class="sibling">相邻兄弟元素</div>
</div>

五，CSS 中常见的关系表达

在 CSS 选择器中，主要包含了根据元素之间的不同关系进行定位的方式，如父子关系、相邻兄弟关系以及兄弟关系等。下面是一个表格示例，展示了不同关系之间的调用和表达方式：

这些关系和操作符可以帮助构建更具体的CSS选择器，以实现所需的元素定位和访问。

六、XPath和CSS选择器 关系表达示例

XPath表达属性关系：

• 使用[@attribute='value']来定位具有特定属性值的元素。

示例：

• 定位具有指定class属性的元素：//tag[@class='class_name']
• 定位具有指定id属性的元素：//tag[@id='element_id']

# 导入selenium库
from selenium import webdriver
 
# 创建浏览器驱动对象
driver = webdriver.Chrome()
 
# 打开网页
driver.get("https://www.example.com")
 
# 使用XPath表达式定位具有特定class属性值的元素
element = driver.find_element_by_xpath("//tag[@class='class_name']")
 
# 使用XPath表达式定位具有特定id属性值的元素
element = driver.find_element_by_xpath("//tag[@id='element_id']")
 
# 使用XPath表达式定位class属性值包含指定文本的元素
element = driver.find_element_by_xpath("//tag[contains(@class, 'partial_class_name')]")
 
# 关闭浏览器驱动
driver.quit()

CSS选择器表达属性关系：

• 使用[attribute='value']来定位具有特定属性值的元素。

示例：

• 定位具有指定class属性的元素：.class_name
• 定位具有指定id属性的元素：#element_id

# 导入selenium库
from selenium import webdriver
 
# 创建浏览器驱动对象
driver = webdriver.Chrome()
 
# 打开网页
driver.get("https://www.example.com")
 
# 使用CSS选择器定位具有特定class属性值的元素
element = driver.find_element_by_css_selector(".class_name")
 
# 使用CSS选择器定位具有特定id属性值的元素
element = driver.find_element_by_css_selector("#element_id")
 
# 使用CSS选择器定位class属性值包含指定文本的元素
element = driver.find_element_by_css_selector(".partial_class_name")
 
# 定位父元素下的子元素
child_element = driver.find_element_by_css_selector("parent_selector > child_selector")
 
# 定位子元素的相邻兄弟元素
sibling_element = driver.find_element_by_css_selector("element_selector + sibling_selector")
 
# 定位元素后的所有兄弟元素
sibling_elements = driver.find_elements_by_css_selector("element_selector ~ sibling_selector")
 
 
# 关闭浏览器驱动
driver.quit()

XPath表达属性关系的其他操作：

• 使用contains(@attribute, 'value')来定位属性值包含指定值的元素。

示例：

• 定位class属性值包含指定文本的元素：//tag[contains(@class, 'partial_class_name')]

CSS选择器表达属性关系的其他操作：

• 使用[attribute*=value]来定位属性值包含指定值的元素。

示例：

• 定位class属性值包含指定文本的元素：.partial_class_name

以上示例展示了如何使用XPath和CSS选择器来表达属性关系。通过使用特定的属性和属性值，可以定位具有特定属性关系的元素。注意，在实际使用过程中，根据具体的元素和需求，可能需要结合其他定位方式来进一步细化定位。

七、XPath和CSS的层级索引进行定位

层级定位
      通过 父标签[父标签属性名=父标签属性值]>（或者空格）子标签  

索引定位
      当父标签中有很多相同的子标签时，通过索引找到所需要定位的元素。
      通过 父标签[父标签属性名=父标签属性值]>子标签：nth-child(索引序号) 

记住：用css_selector进行元素定位，父标签到子标签都用>或空格。如果用的是>，意思是指第一个子标签----，而用空格的话，则可以为任何子标签。

XPath示例：

# 导入selenium库
from selenium import webdriver
 
# 创建浏览器驱动对象
driver = webdriver.Chrome()
 
# 打开网页
driver.get("https://www.example.com")
 
# 使用XPath层级索引定位元素
element_by_xpath = driver.find_element_by_xpath("//div[@id='parent']/div[2]/span[1]")
 
# 打印定位到的元素文本内容
print("通过XPath定位到的元素文本内容：", element_by_xpath.text)
 
# 关闭浏览器驱动
driver.quit()

CSS选择器示例：

# 导入selenium库
from selenium import webdriver
 
# 创建浏览器驱动对象
driver = webdriver.Chrome()
 
# 打开网页
driver.get("https://www.example.com")
 
# 使用CSS选择器层级索引定位元素
element_by_css = driver.find_element_by_css_selector("#parent > div:nth-child(2) > span:nth-child(1)")
 
# 打印定位到的元素文本内容
print("通过CSS选择器定位到的元素文本内容：", element_by_css.text)
 
# 关闭浏览器驱动
driver.quit()

在这个示例中，XPath和CSS选择器都使用了层级索引定位元素。XPath使用方括号中的索引号来表示层级关系，而CSS选择器使用 nth-child() 函数来指定子元素的索引号。您可以根据具体的网页结构和需求来修改索引号以定位到相应的元素。

八、逻辑定位

逻辑定位是指使用逻辑运算符将多个条件组合在一起，以定位满足所有条件的元素。在XPath和CSS选择器中，可以使用逻辑运算符如and、or，not等来实现逻辑定位。

XPath逻辑定位示例：

# 导入selenium库
from selenium import webdriver
 
# 创建浏览器驱动对象
driver = webdriver.Chrome()
 
# 打开网页
driver.get("https://www.example.com")
 
# 使用XPath逻辑定位定位同时满足两个条件的元素
element_by_xpath = driver.find_element_by_xpath("//input[@type='text' and @name='username']")
 
# 打印定位到的元素文本内容
print("通过XPath逻辑定位定位到的元素文本内容：", element_by_xpath.text)
 
# 关闭浏览器驱动
driver.quit()

CSS选择器逻辑定位示例：

# 导入selenium库
from selenium import webdriver
 
# 创建浏览器驱动对象
driver = webdriver.Chrome()
 
# 打开网页
driver.get("https://www.example.com")
 
# 使用CSS选择器逻辑定位定位同时满足两个条件的元素
element_by_css = driver.find_element_by_css_selector("input[type='text'][name='username']")
 
# 打印定位到的元素文本内容
print("通过CSS选择器逻辑定位定位到的元素文本内容：", element_by_css.text)
 
# 关闭浏览器驱动
driver.quit()

九、模糊匹配

模糊匹配是指通过部分匹配元素的属性值或文本内容来定位元素。在XPath和CSS选择器中，可以使用contains函数来实现模糊匹配。

 ^：以什么开头
 $：以什么结尾
 *：匹配所有
 find_element_by_css_selector（“标签名[属性名*（或^，或$）='属性值']”）

XPath模糊匹配示例：

# 导入selenium库
from selenium import webdriver
 
# 创建浏览器驱动对象
driver = webdriver.Chrome()
 
# 打开网页
driver.get("https://www.example.com")
 
# 使用XPath模糊匹配定位包含指定文本的元素
element_by_xpath = driver.find_element_by_xpath("//div[contains(@class, 'partial_class')]")
 
# 打印定位到的元素文本内容
print("通过XPath模糊匹配定位到的元素文本内容：", element_by_xpath.text)
 
# 关闭浏览器驱动
driver.quit()

CSS选择器模糊匹配示例：

# 导入selenium库
from selenium import webdriver
 
# 创建浏览器驱动对象
driver = webdriver.Chrome()
 
# 打开网页
driver.get("https://www.example.com")
 
# 使用CSS选择器模糊匹配定位包含指定文本的元素
element_by_css = driver.find_element_by_css_selector("div[class*='partial_class']")
 
# 打印定位到的元素文本内容
print("通过CSS选择器模糊匹配定位到的元素文本内容：", element_by_css.text)
 
# 关闭浏览器驱动
driver.quit()

这些示例演示了逻辑定位和模糊匹配的使用方法。可以根据具体的需求和网页结构来调整条件和匹配方式。