web自动化思维脑图思维导图

U743855066

2024-02-28

浏览量: 146

自动化

API功能

数据开发

web自动化入门与API等相关内容讲解

树图思维导图提供《web自动化思维脑图》在线思维导图免费制作，点击“编辑”按钮，可对《web自动化思维脑图》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：0c082ff94ca08887d2305ecfdab2496f

思维导图大纲

web自动化入门

自动化

概念

由机器设备代替人工自动完成指定目标的过程

优点

减少人工劳动力

提高工作效率

产品规格统一标准

规模化

安全

自动化测试

概念

用程序代替人工去执行测试的过程

应用场景

解决-回归测试

已实现的功能需要回归

已解决的bug需要回归

解决-压力测试

如, 使用 jmeter做接口自动化

解决-兼容性测试

如, 在不同浏览器上做兼容性测试

解决-操作重复的问题

正确认识

优点

较少的时间内运行更多的测试用例

自动化脚本可重复运行

减少人为的错误

克服手工测试的局限性

误区

自动化测试可以完全代替手工测试

自动化测试一定比手工测试厉害

自动化测试可以发现更多bug

自动化测试适用于所有功能

分类

接口-自动化测试

web-自动化测试(本阶段学习)

移动-自动化测试

单元-自动化测试

web自动化测试

概念

用程序代替人工去执行web测试的过程

什么样的项目适合做web自动化?

需求变动不频繁

项目周期较长

项目需要回归测试

web自动化应该什么时候开始做?

手工测试结束后

selenium

web自动化工具简介

主流工具

QTP

一个收费的自动化测试工具, 支持web/桌面自动化测试

selenium

一个开源的web自动化测试工具, 主要做功能测试

robot framework

一个基于python的可扩展的关键字驱动的自动化测试框架

selenium特点

开源

跨平台

支持多种浏览器

支持多种语言

成熟稳定

功能强大

环境搭建

搭建步骤

前提: 基于python搭建

1. python 开发环境

2. 安装 selenium 包

3. 安装浏览器

4. 安装浏览器驱动

安装selenium包

安装

校验

卸载

安装浏览器驱动

前提: 安装了浏览器

https://www.chromedownloads.net/

安装步骤

1.下载浏览器驱动

https://npm.taobao.org/mirrors/chromedriver/

2.把驱动文件所在的目录添加到环境变量Path中

python的安装目录应该已经添加到了环境变量中

只需要把驱动程序放在 python的根目录下

入门示例

需求

通过程序, 启动浏览器, 并打开百度首页, 暂停3秒, 关闭浏览器

实现

步骤

示例代码

小结

自动化/自动化测试/web自动化测试的概念是什么?

自动化测试的应用场景有哪些?

web自动化测试的应用场景有哪些?

什么样的项目适合做web自动化?

web自动化应该什么时候开始做?

编程题

需求: 通过程序启动浏览器, 打开京东首页, 暂停5s, 关闭浏览器

Selenium-API

元素定位基础

为什么进行元素定位

如何进行元素定位

浏览器开发者工具

概念

就是给专业的web应用和网站开发人员使用的工具

作用

定位元素, 查看元素信息

使用

需求: 使用浏览器开发者工具, 查看百度的输入框的相关信息

步骤

安装

无需安装, 浏览器自带了

启动

快捷键一般都是F12

使用方式

方式1

在要查看的元素上点击右键选择"检查"(Chrome) 或者 "查看元素"(Firefox)

方式2

先打开浏览器开发者工具, 点击选择元素的图标, 移动鼠标到要查看的元素, 然后点击

元素定位方式

总体介绍

web案例

受限于网络速度, 我们案例采用本地的 html 页面来演示

这样可以提高学习效率和脚本执行速度

八种定位方式

Selenium 提供了八种定位元素的方式

1. id

2. name

3. class_name

4. tag_name

5. link_text

6. partial_link_text

7. XPath

8. CSS

id定位

说明: 就是通过元素的id属性来定位元素, html规定 id 属性在整个 html 文档中必须唯一的

前提: 元素有id属性

方法

element = driver.find_element_by_id(id)

案例

需求

打开注册A.html 页面, 完成以下操作 1. 使用id定位, 输入用户名: admin 2. 使用id定位, 输入密码: 123456 3. 5s后关闭浏览器

实现

name定位

说明: 就是通过元素的name属性来定位元素, 在html文档中 name 属性值是可以重复的

前提: 元素有name属性

方法

element = driver.find_element_by_name(name)

案例

需求

打开注册A.html 页面, 完成以下操作 1. 使用name定位, 输入用户名: admin 2. 使用name定位, 输入密码: 123456 3. 5s后关闭浏览器

实现

class_name定位

说明: 就是通过元素的class属性值来定位元素, html 通过使用class来定义元素的样式

前提: 元素有class属性

注意: 如果class有多个属性值, 只能使用其中一个

方法

element = driver.find_element_by_class_name(class_name)

案例

需求

打开注册A.html 页面, 完成以下操作 1. 使用class_name定位, 输入电话号码: 13111111111 2. 使用class_name定位, 输入邮箱: 123456@qq.com 3. 5s后关闭浏览器

实现

tag_name定位

说明: tag_name定位就是通过标签名来定位

注意: html本质就是由不同的tag组成, 每一种标签一般在页面中会存在多个, 所以不方便进行精准定位, 一般很少使用

方法

element = driver.find_element_by_tag_name(tag_name) # 如果存在多个相同的标签, 则会返回符合条件的第一个标签 # 如何获取第二个元素? 后面会讲

link_text定位

说明: 是专门用来定位超链接元素(<a>内容...</a>), 并且是通过超链接的文本内容来定位元素

方法

element = driver.find_element_by_link_text(link_text) # link_text: 超链接的全部文本内容

案例

需求

打开注册A.html 页面, 完成以下操作 1. 使用link_name定位(访问新浪网站)超链接, 并点击 2. 5s后关闭浏览器

实现

partial_link_text定位

说明: partial_link_text 定位是对 link_text 定位的补充, link_text 使用全部文本内容匹配元素, 而 partial_link_text 可以使用局部文本内容来匹配元素, 也可以使用全部文本内容匹配元素

方法

element = driver.find_element_by_partial_link_text(partial_link_text) # partial_link_text: 可以传入a标签的局部文本

案例

需求

打开注册A.html 页面, 完成以下操作 1. 使用partial_link_name定位(访问新浪网站)超链接, 并点击 2. 5s后关闭浏览器

实现

定位一组元素

方法

elements = driver.find_elements_by_xxx("xxxxxx") 作用: 1. 查找定位符合条件的所有元素 2. 返回值是一个列表说明: 列表数据格式的读取需要指定下标(下标从0开始)

案例

需求

打开注册A.html 页面, 完成以下操作 1. 使用 tag_name 定位密码输入框(第二个input标签), 并输入123456 2. 5秒后关闭浏览器

实现

元素定位-XPath/CSS

总体介绍

为什么要学习XPath/CSS

XPath定位

什么是XPath

概念

XPath就是XML Path, 它是一门在XML文档中查找元素信息的语言

HTML可以看做是XML的一种实现, 所以Selenium用户可以使用这种强大的语言在web应用中定位元素

XPath定位方式

总体介绍

四种定位方式

路径

元素属性

属性和逻辑结合

层级与属性结合

方法

element = driver.find_element_by_xpath(xpath)

路径

概念

绝对路径

从最外层元素到指定元素之间所有经过元素层级的路径

1 绝对路径以 /html 根节点开始, 使用 / 来分割元素层级如: /html/body/div/fieldset/p[1]/input

2 绝对路径对页面结构要求比较严格, 不建议使用

相对路径

匹配任意层级的元素, 不限制元素的位置

1 相对路径 // 开始

2 格式: //input 或者 //*

练习

需求

打开注册A.html 页面, 完成以下操作: 1.使用绝对路径定位用户名输入框, 并输入 admin 2.暂停 3s 3.使用相对路径定位密码输入框, 并输入 123

实现

利用元素属性

说明: 通过使用元素的属性信息来定位元素格式: //input[@id='userA'] 或者 //*[@id='userA']

练习

属性与逻辑结合

说明: 解决元素之间存在相同属性值的问题格式: //*[@name='xxx' and @class='yyy']

练习

层级与属性结合

说明: 如果通过元素自身的属性不方便直接定位该元素, 则可以先定位到其父元素, 然后再找到该元素格式: //*[@id='p1']/input

练习

XPath扩展

说明: 不使用函数时: //*[@id='xxx'] 使用函数后 //*[text()='xxx'] 文本内容是 xxx 的元素 //*[contains(@attribute, 'xxx')] 属性中含有 xxx 值的元素 //*[starts-with(@attribute, 'xxx')] 属性以xxx开头的元素

CSS定位

什么是CSS

1.CSS 是一种语言, 它用来描述html元素的现实样式 2.在CSS中, 选择器是一种模式, 用于选择需要添加样式的元素 3.在Selenium中也可以使用这种选择器来定位元素提示: 1.在Selenium中推荐使用CSS定位, 因为它比XPath定位速度快 2.CSS选择器语法非常强大, 在这里我们只学习在测试中常用的几个

CSS定位方式

总体介绍

常用定位方式

id选择器

class选择器

元素选择器

属性选择器

层级选择器

方法

element = driver.find_element_by_css_selector(css表达式)

id选择器

说明: 根据元素id属性来选择格式: #id 例如: #userA (选择id属性值为userA的元素)

练习

class选择器

说明: 根据元素class属性来选择格式: .class值例如: .telA (选择class属性值为 telA的元素)

练习

元素选择器

说明: 根据元素的标签名选择格式: 标签名例如: input (选择input元素)

练习

属性选择器

说明: 根据元素的属性名和值来选择格式: [attribute=value] 例如: [type='password'] (选择 type 属性值为 password 的元素)

练习

层级选择器

说明: 根据元素的父子关系来选择格式1: element1>element2 通过element1来定位element2, 并且 element2 必须为 element1 的直接子元素例如1: p[id='p1']>input (定位指定p元素下的直接子元素input) 格式2: element1 element2 通过element1来定位element2, 并且 element2 为 element1的后代元素例如2: p[id='p1'] input (定位指定p元素下的后代元素 input)

练习

CSS扩展

input[type^='p'] type属性以p字母开头的元素 input[type$='d'] type属性以d字母结束的元素 input[type*='w'] type属性包含w字母的元素

练习

XPath和CSS对比

通过标签名定位

XPath

//input

CSS

input

通过id属性定位

XPath

//*[@id='userA']

CSS

#userA

通过class属性定位

XPath

//*[@class='telA']

CSS

.telA

通过其他属性定位

XPath

//*[starts-with(@type,'x')]

以x字母开头的type值的元素

//*[contains(@type, 'x')]

包含x字母的type值的元素

//*[text()='x']

文本内容为 x 的元素

CSS

[type^='x']

以x字母开头的type值的元素

[type*='x']

包含x字母的type值的元素

[type$='x']

以x字母结尾的type值的元素

元素定位总结

元素定位分类汇总

1. id, name, class_name: 元素属性定位 2. tag_name: 元素标签名定位 3. link_text, partial_link_text: 通过文本定位超链接 4. XPath: 通过路径定位元素 5. CSS: 使用CSS选择器定位

另一种写法

方法介绍

第一种

driver.find_element_by_xxx(xxx)

方法: driver.find_element(方式, 值) 备注: 1.需要2个参数, 第1个参数为定位的类型(由By提供), 第2个参数传入具体的值 2.如果要使用By, 需要导包

练习

区别

元素操作

应用的场景

需要让脚本模拟用户的点击操作

需要让脚本模拟用户输入一些内容

需要让脚本模拟用户去清空输入框的内容

方法

click() 点击元素

send_keys(value) 模拟输入

clear() 清除文本

案例

需求

打开注册A页面，完成以下操作 1.通过脚本执行输入用户名：admin；密码：123456；电话号码：18611111111；电子邮件：123@qq.com 2.间隔3秒，修改电话号码为：18600000000 3.间隔3秒，点击‘注册’按钮 4.间隔3秒，关闭浏览器 ps: 元素定位方法不限

浏览器操作

获取元素信息

应用场景

通过获取元素信息来确认定位到的元素是否正确

方法

属性

size

text

方法

get_attribute("xxx")

获取属性值, 参数为属性名

is_displayed()

is_enabled()

is_selected()

案例

需求

实现

鼠标操作

概述

什么是鼠标操作

点击, 右击, 双击, 悬停, 拖拽等

应用场景

现在web产品中存在丰富的鼠标交互方式, 作为一个web自动化测试框架, 需要应对这些鼠标操作的场景

常用方法

说明: 在Selenium中将鼠标操作的方法封装在 ActionChains 类中实例化对象: action = ActionChains(driver) 方法: 1. context_click(element) 右击 2. double_click(element) 双击 3. move_to_element(element) 悬停 4. drag_and_drop(source, target) 拖拽 5. perform() 执行为了更好的学习其他的方法, 我们先学习 perform() 执行方法, 因为ActionChains所有的方法都需要执行才能生效

调用上的小区别: element.click() context_click(element)

鼠标执行 perform()

说明: 在 ActionChains 类中所有提供的鼠标事件方法, 在调用的时候, 所有行为都存储在 ActionChains 对象中, 而 perform() 方法就是真正去执行所有的鼠标事件强调: 必须调用 perform() 方法才能执行鼠标事件

鼠标右击 context_click()

说明: 对于点击鼠标右键, 如果弹出的是浏览器的默认菜单, Selenium并没有提供操作菜单的方法如果是自定义的右键菜单, 则可以通过元素定位来操作菜单中的选项

练习

# 需求: 打开A页面, 在用户名文本框上点击鼠标右键

实现

鼠标双击 double_click()

说明: 模拟鼠标双击左键的操作

练习

需求: 打开A页面, 输入用户名 admin, 暂停3s, 双击鼠标左键(选中admin)

实现

鼠标悬停 move_to_element()

说明: 模拟鼠标悬停在指定元素上

练习

需求: 打开A页面, 模拟鼠标悬停在注册按钮上

实现

鼠标拖动 drag_and_drop()

说明: 模拟鼠标拖动动作, 选定拖动源元素释放到目标元素

关键点分析

1. 源元素 source = driver.find_element_by_xxx("xxx") 2. 目标元素 target = driver.find_element_by_xxx("xxx") 3. 调用方法 action.drag_and_drop(source, target).perform()

练习

需求: 打开 drag.html 页面, 把红色方框拖动到蓝色方框上

实现

键盘操作

应用场景

1. 模拟键盘上一些按键或者组合键的输入, 如: ctrl + c , ctrl + v 2. Selenium中把键盘的按键都封装在 Keys 类中

常用操作

导包 1. send_keys(Keys.BACK_SPACE) 删除键(Backspace) 2. send_keys(Keys.SPACE) 空格键(Space) 3. send_keys(Keys.TAB) 制表键(Tab) 4. send_keys(Keys.ESCAPE) 回退键(ESC) 5. send_keys(Keys.ENTER) 回车键(Enter) 6. send_keys(Keys.CONTROL, 'a') 全选(Ctrl + A) 7. send_keys(Keys.CONTROL, 'c') 复制(Ctrl + C) 提示: 以上方法很多, 不会逐一讲解, 因为调用方法都一样

案例

需求

打开 A 页面, 完成以下操作 1. 输入用户名 admin1, 暂停2s, 删除1 2. 全选用户名 admin 暂停2s 3. 复制用户名 admin 暂停2s 4. 粘贴到电话输入框

实现

元素等待

概念

定位元素时, 如果未找到, 在指定时间内一直等待的过程

分类

隐式等待

显式等待

应用场景

由于一些原因, 我们想找元素没有立刻出来, 此时如果直接定位会报错

1. 网络速度慢

2. 服务器处理请求速度慢

3. 硬件配置原因

隐式等待

方法

driver.implicitly_wait(timeout) # 隐式等待为全局设置 (只需要设置1次, 就会作用于所有元素) # 参数: # timeout: 超时时长, 单位: 秒

案例

显式等待

说明

在Selenium中把显式等待的相关方法封装在 WebDriverWait 类中

方法

# 显式等待, 为定位不同的元素的超时时间设置不同的值 1.导包 2.WebDriverWait(driver, timeout, poll_frequency=0.5) 1.driver: 浏览器驱动对象 2.timeout: 超时时长, 单位: 秒 3.poll_frequency: 检测的间隔时间, 默认为0.5s 3.调用 until(method) 1.method: 函数名称, 该函数用来实现元素定位 2.一般使用匿名来实现: lambda x: x.find_element_by_xxx("xxx") 如:element = WebDriverWait(driver,10,1).until(lambda x: x.find_element_by_xxx("xxx"))

案例

隐式和显式区别

1. 作用域: 隐式等待为全局有效, 显式等待为单个元素有效 2. 使用方法: 隐式等待直接通过驱动对象调用, 而显式等待方法封装在 WebDriverWait 类中 3. 达到最大超时时长后抛出异常不同: 隐式等待为 NoSuchElementException, 显式等待为 TimeoutException

下拉框/弹出框/滚动条操作

下拉框

方法1

传统的方法

方法2

Select类

弹出框

分类

alert

警告框

confirm

确认框

prompt

提示框

错误示范

方法

1. 获取弹出框对象

2. 调用方法操作弹出框

具体方法说明

说明: Selenium中对弹出框的处理, 有专用的方法, 且处理的方法都一样(alert/confirm/prompt) 1.获取弹出框对象 alert = driver.switch_to.alert 2.调用 alert.text 返回alert/confirm/prompt文字信息 alert.accept() 接受对话框选项(确认) alert.dismiss() 取消对话框选项(取消)

正确示范

滚动条

应用场景

在html中, 由于前端技术更新, 很多网站内容都是动态加载的如, 页面注册同意条款, 需要滚动条到最底层才能点击"同意"

实现方式

Selenium中没有提供滚动条的操作

Selenium提供了操作JavaScript的方法

通过JS来操作滚动条

说明

说明: Selenium中没有提供滚动条的操作方法, 但是它提供了执行 JS 的方法, 所有我们可以通过 JS脚本来操作滚动条 1. 设置 JS 脚本控制滚动条 js = "window.scrollTO(0,1000)" (0:左边距, 1000:上边距单位:像素(px)) 2. Selenium 调用执行 JS 脚本的方法 driver.execute_script(js)

案例

frame切换

frame概念

html页面中的一种框架, 主要作用是在当前页面指定区域显示另一个页面元素:

frame : html页面中的一种框架, 主要作用是在当前页面指定区域显示另一个页面元素形式一: <frameset cols="25%,75%"> <frame src="a.html"> <frame src="b.html"> </frameset> 形式二: <iframe name="iframe_a" src="demo.html" width="200" height="200"></iframe>

错误示范

方法

在Selenium中封装了如何切换frame框架的方法

步骤

1.切换到指定的frame

2.恢复默认页面

正确代码

多窗口切换

概念

方法

实现

窗口截图