Skip to content

Web自动化测试

霍格沃兹测试开发学社

ceshiren.com

自我介绍

  • 江湖代号：老钱 。
  • 互联网行业工作时间10年：2年开发，8年测试；涉及后端开发，测试工具开发，运维，自动化测试，测试管理等工作，目前在一家互联网金融公司担任测试开发工程师。
  • 职业信条：测试不是二等公民，不懂开发误谈测试。

课程安排

  1. WebUI 自动化测试环境准备
  2. 浏览器操作
  3. Web元素定位
  4. 等待与PO模式
  5. 切换运行浏览器

1. WebUI 自动化测试环境准备

Web UI 自动化测试简介

  • Web UI 自动化测试是一种通过编写脚本或使用工具来模拟用户在 Web 应用程序中的操作，从而自动执行测试用例并验证应用的功能、性能和稳定性的方法。
  • Web 自动化测试的主要目标是确保 Web 应用在各种条件下都能按预期工作。
  • 自动化测试旨在减少手动测试的工作量，提高测试的效率和准确性，以及支持持续集成和持续交付流程。

Web UI 自动化测试价值

  • 提高测试覆盖率：自动测试执行大量测试用例，涵盖不同的功能和场景，确保更全面的测试覆盖
  • 节省时间和资源：自动测试在没有人工干预的情况下运行，从而节省测试团队的时间和资源
  • 快速反馈：自动测试快速给出测试结果，有助于开发团队及时发现和修复问题，加速开发周期
  • 减少人为错误：自动测试脚本避免人为疏忽和错误，提高测试的一致性和准确性
  • 支持持续集成：自动测试是持续集成和持续交付流程中的关键环节，确保代码提交后自动运行测试

Selenium 简介

  • Selenium 是用于测试 Web 应用程序用户界面 (UI) 的常用框架
  • 用于运行端到端功能测试的超强工具
  • 支持多种编程语言编写测试
  • 支持在多种不同类型浏览器中运行测试

测试环境准备

  • 浏览器 - Chrome, 下载地址：https://www.google.com/intl/zh-CN/chrome/ - Firefox, 下载地址：https://www.firefox.com.cn/
  • ChromeDriver - 小于 114.0 版本的 ChromeDriver：https://chromedriver.storage.googleapis.com/index.html - 最新版本的 ChromeDirver：https://googlechromelabs.github.io/chrome-for-testing/

测试环境准备

  • Geckodriver (For firefox) - 官网地址：https://github.com/mozilla/geckodriver/releases
  • JDK 17 - 官网地址： https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html
  • 开发工具 IntelliJ IDEA - 官网地址： https://www.jetbrains.com/idea/download

实战环境配置

  • 实战项目源码 https://gitee.com/11547299/i-web-automation
  • WebDriver 路径配置文件 iselenium.properties, 存放目标路径为系统的${user.home} 下
  • 配置内容： - chrome driver 文件路径 - gecko driver 文件路径
  • Demo

实战项目结构

  • 项目架构 Maven
  • 自动化运行框架 JUnit5
  • Web UI 自动化测试框架 Seleinum

本章小结

  • Web UI 自动化测试价值
  • Selenium 框架的优势
  • 基于Selenium 自动化测试项目结构
  • Web UI自动化测试运行环境配置

课程安排

  1. WebUI 自动化测试环境准备

  2. 浏览器操作
  3. Web元素定位
  4. 等待与PO模式
  5. 切换运行浏览器

2. 浏览器操作

Web UI自动化操作第一步

  • 浏览器控制 - 打开，关闭 - 访问网站 - 后退、前进 - 刷新 - 最大最小化 - 设定大小

浏览器控制

  • 打开链接
  • function: openLink()
  • Demo

浏览器控制

  • 刷新
  • function: refresh()
  • Demo

浏览器控制

  • 后退、前进
  • function: goBack()
  • Demo

浏览器控制

  • 改变尺寸
  • function: changeSize()
  • Demo

本章小结

  • 浏览器操作
  • 访问站点
  • 改变大小
  • 后退、前进
  • 刷新

课程安排

  1. WebUI 自动化测试环境准备

  2. 浏览器操作

  3. Web元素定位
  4. 等待与PO模式
  5. 切换运行浏览器

3. Web元素定位

元素定位常用方法

  • 定位是指在进行测试过程中定位网页上的元素位置
  • 定位是自动化测试中至关重要的步骤，它使测试工具能够准确找到并于页面上的元素进行交互
  • 所有的自动化测试动作都必须在定位元素之后才能够进行交互操作

元素定位常用方法

  • By ID
  • function: locatedById()
  • Demo

元素定位常用方法

  • By Name
  • function: locatedByName()
  • Demo

元素定位常用方法

  • By CSS
  • function: locatedByCSS()
  • Demo

元素定位常用方法

  • By XPATH
  • function: locatedByXPath()
  • Demo

本章小结

  • Web 元素定位
  • By.name
  • By.id
  • By.xpath
  • By.cssSelector

课程安排

  1. WebUI 自动化测试环境准备

  2. 浏览器操作

  3. Web元素定位

  4. 等待与PO模式
  5. 切换运行浏览器

4. 等待与PO模式

Web 自动化测试中等待的作用

  • 在做 Web 自动化时， 要等待页面元素加载完成后，才能执行操作
  • 动作抢先做会导致报错，各种找不到元素的错误
  • 原则：自动化动作不能”抢跑“
  • 所以需要适当的等待

等待类型1 - 隐式等待

  • 设置一个等待时间
  • 轮询查找（默认 0.5 秒）元素是否出现
  • 如果没出现就抛出异常
  • 隐式等待的作用范围是全局的

等待类型1 - 隐式等待

  • 隐式等待
  • function: implicitWait()
  • Demo

等待类型2 - 显式等待

  • 显式等待是在代码中定义等待条件
  • 触发该条件后再执行后续代码
  • 根据判断条件进行等待
  • 如果超时则抛出异常退出

等待类型2 - 显式等待

  • 显式等待
  • function: explicitWait()
  • Demo

等待类型3 - 强制等待

  • 强制等待是使线程休眠一定时间
  • 俗称：傻等
  • 好处：简单粗暴
  • 坏处：没啥技巧和”智商“
  • 一般在调试的时候使用

等待类型3 - 强制等待

  • 强制等待
  • function: hardWait()
  • Demo

PO 设计模式简介

  • 目的：使页面元素与操作细节分离
  • 好处：简化代码结构，简化自动化测试代码维护成本

PO 设计模式代码结构

  • Page Object 页面元素类
  • Page Operation 页面操作类
  • Test flow 测试流程类

PO 设计模式代码实战

  • Page Object 代码
    public class BingPage {

    public static WebElement inputTxt(WebDriver driver){
        return driver.findElement(By.cssSelector(".sb_form_q"));
    }

    public static WebElement searchIcon(WebDriver driver){
        return driver.findElement(By.id("search_icon"));
    }
}

PO 设计模式代码实战

  • Page Operation 代码
    public class BingOps {
    public static void inputText(WebDriver driver,  String keyWords){
        WebElement inputTxt = BingPage.inputTxt(driver);
        inputTxt.sendKeys(keyWords);
    }

    public static void clickSearch(WebDriver driver){
        WebElement searchIcon = BingPage.searchIcon(driver);
        searchIcon.click();
    }
}

PO 设计模式代码实战

  • Test flow 代码
    @Test
public void bingPO() throws IOException {
    navigation.to("https://cn.bing.com/");
    BingOps.inputText(driver, "PO模式");
    BingOps.clickSearch(driver);
    wait5s();
}

本章小结

  • 关于等待
  • 隐式等待
  • 显式等待
  • 强制等待
  • PO 模式产生的原因
  • PO 模式的好处
  • PO 模式代码构成

课程安排

  1. WebUI 自动化测试环境准备

  2. 浏览器操作

  3. Web元素定位

  4. 等待与PO模式

  5. 切换运行浏览器

5. 切换运行浏览器

切换浏览器测试的意义

  • 浏览器兼容性测试
  • 执行环境的全面覆盖
  • 一套代码多处运行

依赖环境

  • Chrome浏览器
  • Firefox 浏览器
  • 对应的Driver
  • 配置设定
  • Demo

定制测试用例执行浏览器

  • function: openLinkOnFirefox()
  • Demo

相同测试用例切换不同浏览器运行

  • function: all
  • Demo

本章小结

  • Web自动化测试切换浏览器运行的好处
  • 测试用例定制切换浏览器运行
  • 测试用例批量切换浏览运行

课程安排

  1. WebUI 自动化测试环境准备

  2. 浏览器操作

  3. Web元素定位

  4. 等待与PO模式

  5. 切换运行浏览器

课程总结

  • Selenium
  • 浏览器控制
  • Web元素定位
  • 各种类型的等待
  • 切换不同浏览器运行自动化测试

课后作业

  • 配置 Selenium Web 自动化测试运行环境
  • 编写 Selenium Web 自动化测试用例，分别用如下方法定位元素 - By.id - By.name - By.xpath - By.cssSelector
  • 编写 Selenium Web自动化测试用例，设定浏览器大小，如下： - 最大化 - 最小化 - 宽：800，高： 600
  • 分别将自己编写的自动化测试用例在Chrome 与 Firefox上运行

谢谢