Web自动化001-Web自动化前端基础及Selenium原理和环境搭建
Web自动化前端基础及Selenium原理和环境搭建
1.什么是web自动化测试？
web自动化测试是指利用自动化的测试工具或者框架，通过编写脚本和模拟用户在web页面上的任意操作
web自动化测试是一种比较高效，准确、可重复测试的方法，可以大大的降低成本，从而提高效率，缩短测试周期
2.接口自动化和web自动化的区别
测试环境：
- 接口自动化：http协议（接口）还有比如TCP/IP SDK GRPC等相关接口
- Web自动化测试：浏览器（web页面,UI界面层）
测试结果：
- 接口自动化：发送1个请求、获取1个响应
- Web自动化测试：无序，延迟，异步
测试代码：
- 接口自动化：常用request发送请求
- Web自动化：页面的跳转，点击，输入，双击，拖拽，选择框等等
测试断言：
- 接口自动化：断言接口响应内容信息
- Web自动化: 网址、标题、页面内容(文件，颜色，大小，位置。。。。）
3.web自动化测试流程
web自动化测试和手工功能测试的本质区别是:前置使用工具，代码自动化执行 后者是人工手动去执行
- 需求分析：需要明确测试的目标还有范围---测什么 建议是先有手工测试用例，再从手工测试用例中筛选出来适合做自动化的测试用例，将这些用例使用自动化脚本进行覆盖，从而替换手工用例的执行。
- 技术选型：需要根据需求和项目的特点，选择合适的自动化测试框架或者工具，需要判断当前的项目是否适合做自动化，做自动化后提升的地方在哪-效率有没有质的提升，能否节省测试工作的人力和时间的成本，有没有遇到自动化的技术瓶颈问题----做自动化的最终目的，是希望后期可以将一部分手工用例被自动化脚本取代执行。
- 一个中小型项目的测试用例可能就四千多条，一般自动化的覆盖率在1/3
- 不能完完全全代替手工测试，因为其存在很多的瓶颈、难点、以及一些没有必要的场景 正常比例1/3
- 使用什么语言做自动化（java、python c++） 使用什么第三方库（seleniumbase,cypress,selenium) 使用什么测试框架(pytest、unittest,Testng,behave，Junit，Googletest) 日志(logging) 测试报告(pytest-html.allure)
- 搭建自动化测试的环境：测试环境(web服务环境和地址），测试服务器和测试硬件的资源，测试数据--参数化 有效的数据 无效的数据 实参，测试的工具等等
- 编写测试用例脚本：pom设计模式(一个页面定义为一个类，页面中需要使用的属性/页面的元素定义为类属性，需要的操作定义为页面的类方法，实际使用的时候，只需要导入这个类，类实例化对象，调用对象的方法），关键字设计模式（Excel)进行 极限封装 相当于封装后 在excel中写好用例 直接可以去运行
- （脚本核心要素：可重复性、可维护性、可扩展性等）
- 自动化执行测试用例：需要让用例的脚本自动化的去执行，收集测试的结果和日志信息
- 测试结果：预期结果和实际结果之间的对比 需要断言，自动化测试的用例每一条都需要添加断言
- 分析测试结果：对测试的结果进行全面的分析，去发现测试的缺陷和性能瓶颈（比如页面的加载时间，数据展示的时间）
- 进行缺陷管理：需要将测试的缺陷记录在缺陷管理中
- 禅道、TAPD、JIRA、pingcode
- 完善持续集成：需要将自动化的测试集成到持续系统中，实现自动化测试的持续化和自动化的部署
- jenkins
- gitlab-runner
4.web自动化测试的场景
核心使用场景：
- 冒烟测试-基本的功能全跑一遍
- 回归测试-对之前版本的功能测试，对之前修复的问题测试
- web端直面用户端（E2E测试）的测试
- 扩展：
- E2E测试（End-to-End Testing）指的是对整个软件系统进行全面、完整的测试，包括从用户界面到后端数据库的所有功能和处理流程。它模拟真实的用户场景，通过自动化或手动的方式测试整个应用程序，并确保其能够正确地处理输入和输出数据，满足业务需求和用户期望。
- E2E测试通常需要模拟多种使用情况和环境，比如不同的浏览器、操作系统、网络连接等，以验证系统在各种情况下都能正常运行和响应。E2E测试一般基于功能需求文档和业务流程来设计测试用例，测试过程中会涉及到单元测试、集成测试、系统测试等多个层次，旨在尽可能发现并排除系统中的缺陷和故障。
- E2E测试是软件测试过程中非常重要的一部分，可以有效地提高软件质量和用户体验，减少软件维护成本和风险，是软件开发生命周期中必不可少的一个环节。
- 目的:为了高效率，比较常用于线上巡查
5.web页面构造
web（页面）=html+css+javaScript(前端三剑客）
css用来处理页面的样式和UI效果 js用来作为页面的数据和行为的交互
html:是一门标记语言，由标记（标签)组成，决定了网页的内容
css:给内容进行修饰，颜色，大小，字体，位置等等
JavaScript:执行交互，改变html和css
html标签语言的基本介绍
- 没有逻辑判断
- 没有数据计算
- 标签先后顺序不重要
- 标签大多数都是闭合（有始有终）---成对存在的，部分标签是单个存在的（如：br换行标签）
基本的构造形式
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
- 基本格式：开始标签，内容，结束标签
- 标签大多数都是闭合，但是也有单标签
- 标签语言容错率特别高--存在自己的遇错处理机制（语法存在通常不会报错，只是不可用）
- 可以对标签进行注释 ctrl+/
标签=元素
6.常见的标签（元素）基本使用
段落:P 换行：br 输入框 ：input 文本域：textarea 按钮:button
超链接：a 图片：img 列表：ol或者ul ---有序列表/无序列表
块标签：div
标签的基本使用内容：
下面是一些demo的示例代码
<!-- 示例代码： -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的页面</title>
</head>
<body>
<!--段落:P-->
<p>测试</p>
<p>研发</p>
<p>123</p>
<br>进行换行操作
<!--输入框：input-->
<input>
<br>
<!--文本域:<textarea-->
<textarea>开始写论文</textarea>
<!--<button 按钮-->
<button>
确定
</button>
<button>
取消
</button>
<a href="https://www.bilibili.com/">跳转到哔站页面</a>
<img src="kanrong.png" alt="图片示例">
<!--图片<img src="">-->
<ol>
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
</ol>
<ul>
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
</ul>
</body>
</html>
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的页面2</title>
</head>
<body>
<!--文件上传-->
<input type="file">
<br>
<!--单选框-->
<form>
<input type="radio" value="A" name="石头">A<br>
<input type="radio" value="B" name="石头">B<br>
<input type="radio" value="C" name="石头">C<br>
</form>
<!--复选框-->
<form>
<input type="checkbox" value="A" name="石头1">A<br>
<input type="checkbox" value="B" name="石头2">B<br>
<input type="checkbox" value="C" name="石头3 ">C<br>
</form>
<!--下拉框-->
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</body>
</html>
复杂标签的基本使用
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的页面2</title>
</head>
<body>
<!--文件上传-->
<input type="file">
<br>
<!--单选框-->
<form>
<input type="radio" value="A" name="石头">A<br>
<input type="radio" value="B" name="石头">B<br>
<input type="radio" value="C" name="石头">C<br>
</form>
<!--复选框-->
<form>
<input type="checkbox" value="A" name="石头">A<br>
<input type="checkbox" value="B" name="石头">B<br>
<input type="checkbox" value="C" name="石头">C<br>
</form>
<!--下拉框-->
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<!--表单标签-->
<form>
<p>
<label>姓名：</label><input type="text">
</p>
<p>
<label>密码：</label><input type="password">
</p>
<p>
<label>性别：</label>
<input type="radio">男
<input type="radio">女
</p>
<p>
<label>爱好:</label>
<input type="checkbox">唱歌
<input type="checkbox">跑步
<input type="checkbox">游泳
</p>
<p>
<label>照片：</label>
<input type="file">
</p>
<p>
<label>个人描述：</label>
<textarea></textarea>
</p>
<p>
<label>籍贯：</label>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
页面的设计模式：DMO
文档对象模型
以面向对象的思路，使用和操作html文档
"DMO"是指文档对象模型（Document Object Model）。文档对象模型是一种用于表示和操作HTML、XML和XHTML等文档的编程接口。
文档对象模型（DOM）将HTML或XML文档表示为一个树状结构，其中每个元素、属性、文本等都被表示为一个节点，节点之间有层次关系。通过使用DOM，可以使用脚本语言（如JavaScript）访问和操作文档中的各个元素、属性和文本。
DOM提供了一组API（应用程序编程接口），使开发者能够通过编程方式对网页进行操作。这些API包括访问和修改元素、添加和删除节点、更改样式和属性等功能。通过DOM，开发者可以动态地更新网页内容、响应用户操作以及与用户交互。
DOM不仅仅是在网页开发中常用的概念，还在许多其他应用程序领域中被使用，如XML处理和服务器端JavaScript（如Node.js）等。
页面的操作设计模式：POM
页面对象的模型
页面的标签元素属性 页面的操作方法 页面的业务
以面向对象的思路，使用和操作html文档
在Web自动化测试中，POM指的是"页面对象模型"（Page Object Model）。POM是一种设计模式，用于组织和管理Web应用程序的自动化测试代码。
Page Object Model的基本思想是将每个网页视为一个对象，并将其相关的操作和行为封装在该对象的类中。每个页面对象类（Page Object Class）对应于一个页面或一个页面的一部分，它提供了对页面元素和操作的抽象和封装。
POM的优势包括：
1. 可维护性：通过将页面元素和操作封装在页面对象类中，可以使测试代码更易于维护和理解。如果页面发生变化，只需要更新相应的页面对象类，而不需要在整个测试代码中进行修改。
2. 可重用性：可以在不同的测试用例中重用页面对象类，减少了代码的重复编写。
3. 可读性：通过使用POM，测试代码的可读性得到提高，因为测试用例可以更加清晰地描述和理解。
4. 维护测试数据分离：可以将测试数据与页面对象类分离，使测试数据更易于管理和更新。
使用POM的一般流程包括：
1. 创建页面对象类：为每个页面或页面的一部分创建一个页面对象类，定义页面元素和相关操作的方法。
2. 将测试用例与页面对象类关联：在编写测试用例时，使用页面对象类中的方法来操作页面元素。
3. 组织测试用例：使用页面对象类的方法来编写和组织测试用例。
POM是一种常用的设计模式，用于提高Web自动化测试的可维护性和可读性。它使得测试代码更模块化、可重用，并且减少了测试代码的重复性。
7.selenium的基本介绍
selenium是一个用于web应用程序的测试工具
特点：
- 开源软件：开源代码可以进行自定义的扩展和添加额外的功能
- 跨平台：windows、linux、Mac
- 支持多语言的：python、java、c#、JavaScript、ruby等等
- 核心功能：可以在多个浏览器或者不同类型的浏览器上进行自动化测试
- 成熟稳定：市面上占用率非常高
- 功能丰富：自定义功能和定制化功能
8.selenium中的webdriver
selenium的原理
Selenium实现web自动化测试的底层原理是通过操作浏览器的DOM（文档对象模型）来实现的。
具体来说，Selenium会启动一个浏览器实例，然后通过WebDriver与浏览器进行交互，执行一系列操作，如打开网页、输入文本、点击按钮等，最终获取页面元素的状态和结果。在执行这些操作的过程中，Selenium会调用浏览器提供的API，通过模拟用户的操作来与页面进行交互。
在底层实现上，Selenium会通过JavaScript注入的方式来控制浏览器。具体来说，Selenium会在浏览器中注入一段JavaScript代码，通过这段代码来操作页面元素、获取元素状态等。
总之，Selenium实现web自动化测试的底层原理是通过控制浏览器来模拟用户操作，从而实现对页面的测试和验证。
选择一种支持的编程语言：python
需要配置不同的浏览器的驱动（webdriver）
一般都会选择谷歌浏览器进行自动化测试
安装第三方库selenium
9.selenium环境搭建
- 查看谷歌浏览器的版本号：
- 下载对应的驱动
- http://chromedriver.storage.googleapis.com/index.html （老版本情况）
- 注意：驱动的版本号一定要跟浏览器的版本保持一致
- 后面发现浏览器更新比较快，最新的浏览器驱动下载地址如下：谷歌：
- 其实官方文档也详细的告知我们浏览器的下载地址，我在这里粘一下：
- 在pycharm中安装selenium的环境
- pip install selenium
- 默认安装最新版本
- 如果之前安装过selenium那么进行卸载：
- pip uninstall selenium
- 统一版本号：selenium 4.9.1（可以通过pip list查看是否安装对应的版本号）
- 把驱动放到当前项目就可以启动浏览器
检测环境搭建：
示例代码：
# 1.先进行导入selenium里面的驱动webdriver
import time
from selenium import webdriver
# 2.创建驱动对象(谷歌)
driver = webdriver.Chrome()
# webdriver.Firefox()
# webdriver.Ie()
# webdriver.Safari()
# 3.准备一个需要被测url地址
url = "https://www.baidu.com/"
# 4.访问被测试页面
driver.get(url)
# 5.将页面最大化
driver.maximize_window()
time.sleep(3)
# 6.关闭驱动对象
driver.quit()
