【WEB自动化测试】-定位元素的八种方式

 一、自动化测试能解决什么问题

• 解决-回归测试
• 解决-压力测试
• 解决-兼容性测试
• 提高测试效率，保证产品质量

回归测试：项目在发新版本之后，对项目之前的功能进行验证

压力测试：可以理解多用户同事去操作软件，统计软件服务器处理多用户登录的能力

兼容性测试：不同浏览器（IE，Firefox，Chrome）等等。

二、什么是WEB自动化测试

概念：让程序代替人工自动验证web项目功能的过程

2.1 什么WEB项目适合做自动化测试

• 需求变动不频繁
• 项目周期长
• 项目需要回归测试

2.2 Web自动化测试在什么阶段开始

• 功能测试完毕(手工测试)

2.3 Web自动化测试所属分类

• 黑盒测试(功能测试)
• 白盒测试(单元测试)
• 灰盒测试(接口测试)

web自动化测试属于黑盒测试

三、自动化测试工具

3.1 主流的Web自动化测试工具

• QTP

        QTP是一个商业化的功能测试工具，收费，支持web，桌面自动化测试

• Selenium

        Selenium是一个开源的web自动化测试工具，免费，主要做功能测试

3.2 什么是Selenium？

Selenium是一个用于web应用程序的自动化测试工具。

 安装：pip3 install selenium

3.2.1 Selenium特点

• 开源软件：源代码开放可以根据需要来增加工具的某些功能
• 跨平台：linux、windows、mac
• 支持多种浏览器：Firefox，Chrome，IE、Edge，Opera、Safari等
• 支持多种语言：Python、java、C#、JavaScript、Ruby、PHP等
• 成熟稳定：目前已经被google、百度、腾旭等公司广泛使用
• 功能强大、能够实现类似商业工具的大部分功能，因为开源性，可实现定制化功能

四、元素定位

4.1 为什么要使用元素定位

要使用web自动化操作元素，必须首先找到此元素

4.2 定位工具

F12键(开发者工具)

4.3 定位元素时依赖于什么？

        1. 标签名

        2.属性

        3. 层级

        4. 路径

4.4 定位方式

1. id
2. name
3. class_name:使用元素的class属性定位
4. tag_name:标签名称<标签名 .../>
5. link_text：定位超链接 a 标签
6. partial_link_text:定位超链接 a 标签 模糊
7. xpath：基于元素路径
8. css：元素选择器

五、通过ID定位元素

#获取浏览器对象
driver = webdriver.Chrome()
#打开URL
url = r"http://localhost:8001/backend/page/login/login.html"
driver.get(url)
#定位元素
username = driver.find_element(By.ID, "username")
# 清空控件内容
username.clear()
#input控件输入内容
username.send_keys("admin")
# 退出浏览器驱动
driver.quit()

六、name定位

name定位就是根据元素name属性来定位。HTML文档中name的属性值是可以重复的

前提：元素有name属性

user = driver.find_elements(By.NAME, 'user')

七、class_name定位

 class_name定位就是根据元素class属性来定位。HTML文档中class的属性值是可以重复的

前提：元素有class属性

user = driver.find_elements(By.CLASS_NAME, 'user')

八、tag_name定位(了解)

通过元素的标签来定位，标签名也就是元素名

driver.find_elements(By.TAG_NAME, 'input')

九、link_text定位

定位超链接标签，只能使用精准匹配(a标签的全部文本内容)

driver.find_element(By.LINK_TEXT, '登录 百度').click()

 十、partial_link_text定位

定位超链接标签，可以使用模糊匹配(a标签的可以唯一定位的部分文本内容)

driver.find_element(By.PARTIAL_LINK_TEXT, '百度').click()

十一、xpath定位

11.1 xpath常用的定位策略

1. 路径
   1. 绝对路径：语法 以单斜杠开头逐级开始编写，不能跳级。如 /html/body/div/p[1]/input
   2. 相对路径：以双斜杠开头，双斜杠后面跟元素名称，不知元素名称可以使用 * 代替

                如：//input           //*

     2. 路径结合属性：在xpath中，所有属性必须使用@符号修饰  如：//*[@id='id值']

     3. 路径结合逻辑(多个属性)：

        语法：//*[@id='id值' and @属性='属性值']

driver.find_element(By.XPATH, "//input[@id='username' and @placeholder='账号']")

      4. 路径结合层级

               语法：//*[@id='父级id属性']/input

        提示：

                1. 一般建议使用指定标签名称，不使用 * 代替，*效率比较慢

                2. 无论是绝对路径还是相对路径。/后面必须为元素的名称或者*

                3. 能使用相对路径就不要使用绝对路径。

11.2 Xpath扩展

        1. //*[text()='XXX'] #定位文本值等于XXX的元素

                提示：一般适合p标签，a标签

        2. //*[contains(@属性,'xxx')] #定位属性包含xxx的元素

                提示：contanins为关键字，不可更改

        3. //*[starts-with(@属性,'xxx')] #定位属性以xxx开头的元素

                提示：starts-with为关键字，不可更改

十二、CSS定位

12.1 什么是CSS定位

1. CSS（Cascading Style Sheets)是一种语言，它用来描述HTML元素的显示样式
2. 在CSS中，选择器是一种模式，用于选择需要添加样式的元素；
3. 在Selenium中也可以使用这种选择器来定位元素

        提示：

                1. 在selenium中推荐使用CSS定位，因为它比XPATH定位速度快

                2. CSS选择器语法非常强大。只列举常用的几种

        CSS定位方法

driver.find_element(By.CSS_SELECTOR,css_selector)

12.2 css定位常用策略(方法)

1.id选择器

2. class选择器

3. 元素选择器

4. 属性选择器

5. 层级选择器

12.3 id选择器

说明：根据元素id属性选择,元素必须有id属性

格式：#id

例如：driver.find_element(By.CSS_SELECTOR, "#username")

        #username <选择id属性值为username的元素>

12.4 class选择器

说明：根据元素class属性来选择

格式：.class  (注：前面是英文点)

例如：driver.find_element(By.CSS_SELECTOR, ".el-input__inner")

        .el-input__inner <选择class属性为el-input__inner的所有元素>

12.5 元素选择器

说明：根据元素名称来选择

格式：element

例如：driver.find_element(By.CSS_SELECTOR, "input")

12.6 属性选择器

说明：根据属性来选择

格式：[属性名=属性值]

例如：driver.find_element(By.CSS_SELECTOR, "[placeholder='账号']")

12.7 层级选择器

 说明：根据层级来选择

格式：1. 父子层级关系：父层级策略>子层级策略

            2. 祖辈后代层级关系：祖辈策略 后代策略  (注中间为空格)

             提示：>与空格的区别，>后面跟的元素必须为子元素，空格则不用，可以为祖辈后代

例如：driver.find_element(By.CSS_SELECTOR, "div>input[id='password']")

           driver.find_element(By.CSS_SELECTOR, "div input[id='password']")

           driver.find_element(By.CSS_SELECTOR, 'div.el-form-item__content>button')

12.8 CSS延伸定位方法

1. 标签名[属性名^="属性值开头部分内容"]：根据给出的属性值开头的内容定位

2. 标签名[属性名&="属性值结尾部分内容"]：根据给出的属性值结尾的内容定位

3. 标签名[属性名*="属性值任意部分内容"]：根据给出的属性值任意的内容定位