阿里十年测试老鸟解析UI自动化测试

目录

前言

一、技术选型

二、方案落地

三、初始化项目

基础示例

Page Object Model

BDD

CI/CD

四、测试报告


前言

最近在研究E2E自动化测试,发现市面上关于自动化测试的介绍乏善可陈,因此本文将从概念介绍,技术选型,方案落地三个方面来聊聊UI自动化测试。

 

从上图可以看出,整个金字塔模型由三层组成:

  1. 单元测试(Unit Tests)
  2. 服务测试(Service Tests)
  3. UI测试(UI Tests)

整个金字塔模型代表着越上层的测试集成度越高,执行速度越慢,越下层的测试隔离性越好,执行越快越轻量。

从测试金字塔中可以得到适合自己的经验法则:

  1. 构建不同粒度的测试

  2. 越高层次的测试应该越少,制定合理的测试策略

为了保持测试金字塔测形状,一个快速、可维护、覆盖范围合理的测试组合应该是这样的:

  1. 大量小而快的单元测试
  2. 全面的接口测试
  3. 少量的UI测试

都说业内最佳实践看Google,Google的自动化测试分层比例是:

  1. 单元测试(70%)
  2. 接口测试(20%)
  3. UI测试(10%)

UI测试 VS E2E测试

1.UI测试(User Interface Test)

用户界面测试

2.E2E测试(End-to-end Test)

端到端测试,模拟用户真实使用场景的测试

测试金字塔的顶层(UI测试)并非这里字面意义上的“UI测试”,这一点比较有误导性,对于现代前端应用,UI测试侧重产品的UI交互是否正确,模拟后端进行测试也可以,放在单元测试里去做也可以。

而E2E测试,是需要模拟用户真实场景的测试,检查整个系统是否以正确的方式运作。

所以广义上的“UI测试”(测试金字塔的UI Tests)可以认为是E2E测试。

什么场景适合

  1. 需求稳定,不会频繁变更
  2. UI界面稳定,变动少
  3. 项目周期长
  4. 大量的回归测试

一、技术选型

目前市面上常见的几种E2E测试方案有

  1. 基于WebDriver:Selenium,Appium
  2. 基于CDP:Puppeteer,Playwright
  3. Inject Script:Cypress

二、方案落地

最终针对常用的业务场景,我选择了Codeceptjs,这是一个E2E的测试集成框架,统一了用户层的api,可以选择多种不同的测试方案,Web端支持Playwright、WebDriver、Puppeteer、Protractor、TestCafe、Nightmare,手机端支持Appium、Detox。

  1. 在PC端使用Playwright
  2. 在APP端使用Appium

在项目落地前,还有个问题需要确定:

  1. E2E测试代码放哪里?(有以下两个选择)
  2. 跟随项目代码:便于跟随项目的变动进行迭代
  3. 独立仓库维护:独立维护,跟项目仓库解耦

两种选择各有利弊,第一种方案适合项目开发人员维护测试代码,第二种方案适合测试人员独立维护测试代码

三、初始化项目

安装codeceptjs

npm install -D codeceptjs

初始化项目

npx codeceptjs init

选择测试框架

? What helpers do you want to use?
❯◉ Playwright
 ◯ WebDriver
 ◯ Protractor
 ◯ Puppeteer
 ◯ Appium
 ◯ Nightmare
 ◯ FileSystem

选择完Playwright,输入完一些自定义配置就会开始安装对应的测试框架以及创建一系列的文件。 安装完成后,会提示你创建一个测试文件,输入文件名后,就可以开始愉快的编写测试代码啦。

// 目录结构
|- output // 测试报告文件夹
|- specs // 测试代码文件夹
 |- login_test.js 
|- codecept.conf.js // codecept配置文件
|- jsconfig.json
|- package.json
|- steps_file.js // 给实例对象绑定一些公共方法

基础示例

Feature('登录')

Scenario('跳转到首页', async ({ I }) => {
  await I.amOnPage('/')
  await I.seeInCurrentUrl('/login')
  I.fillField('[name="login-phone"]', 1234567890)
  I.fillField('[name="sms-code"]', 123)
  I.click('登录', '[type="submit"]')
  await I.see('经理', '.role-item')
  I.click('text="经理"')
  I.click('text="确 定"')
  await I.seeInCurrentUrl('/home')
})

如上代码,就是一个基础登录流程的E2E测试代码,想了解Playwright的相关api可以看这里

Page Object Model

POM是自动化测试代码中最基础的设计模式,核心思想就是将交互和业务解耦,把能够复用的交互层代码进行抽离。

创建PageObject页面

npx codeceptjs gt  // 也等于 npx codeceptjs generate:pageobject

POM代码

// pages/User.js
const { I } = inject()

class User {
  async login (mobile, token) {
    await I.seeInCurrentUrl('/login')
    I.fillField('[name="login-phone"]', mobile)
    I.fillField('[name="sms-code"]', token)
    I.click('登录', '[type="submit"]')
  }

  async chooseRole (roleName, actionName = '确 定') {
    const hasRoleName = tryTo(() => I.see(roleName, '.role-item'))
    if (hasRoleName) {
      I.click(`text="${roleName}"`)
      I.click(`text="${actionName}"`)
    }
  }
}

module.exports = new User()
module.exports.User = User

业务测试代码

// specs/login_test.js
Feature('登录')

Scenario('跳转到首页', async ({ I, User }) => {
  await I.amOnPage('/')
  await User.login(1234567890, 123)
  await User.chooseRole('经理')
  await I.seeInCurrentUrl('/home')
})

BDD

全称:Behavior-driven Development

中文:行为驱动开发

BDD是一种敏捷软件开发的技术,大致流程如下图:

  1. 业务方、产品经理、开发人员、测试人员一起讨论并明确需求
  2. 使用Gherkin来编写描述业务场景的测试用例
  3. 开发人员根据Gherkin写的测试用例来编写代码
  4. 测试人员根据Gherkin写的测试用例来验收测试

BDD最重要的一个特性是:由非开发人员编写测试用例,而这些测试用例是使用自然语言编写的 DSL(领域特定语言)。

这样有助于克服开发人员对构建产品需求的理解与业务人员对需求引起的技术困难理解之间的差距。

Gherkin 是一种DSL,最初由BDD测试框架Cucumber提出。

优点:

  1. 支持多语言
  2. 业务人员可以读懂
  3. 可以描述软件行为

 

Gherkin以.feature后缀的文件为载体。

每个Gherkin场景都有一个基本的模式,其中包括:条件(假如),事件(当)和结果(那么)

// features/login.feature
# language: zh-CN
功能: 登录
  场景: 跳转到首页
    假如 进入项目根路径
    那么 进入到登录页面
    当 登录账号1234567890
    当 选择经理角色
    那么 进入到首页

给对应的步骤编写测试代码

// step_definitions/steps.js
const { I } = inject()
// Add in your custom step files

Given('进入项目根路径', () => {
  I.amOnPage('/')
})

Then('进入到登录页面', async () => {
  await I.seeInCurrentUrl('/login')
})

When('登录账号1234567890', async () => {
  I.fillField('[name="login-phone"]', 1234567890)
  I.fillField('[name="sms-code"]', 123)
  I.click('登录', '[type="submit"]')
})

When('选择经理角色', async () => {
  await I.see('经理', '.role-item')
  I.click('text="经理"')
  I.click('text="确 定"')
})

Then('进入到首页', async () => {
  await I.seeInCurrentUrl('/home')
})

CI/CD

基于gitlab pipline实现CI/CD,主要分为两个步骤:

  • 冒烟提测(手动触发 gitlab pipline)
  • 预发发布(自动触发 gitlab api)

只需要编写.gitlab-ci.yml

e2e dev:
  stage: test
  image: mcr.microsoft.com/playwright:focal
  before_script:
    - yarn install
  script:
    - yarn e2e:dev
  only:
    - web // 只在gitlab web端手动触发
  artifacts:
      when: always
      reports:
        junit: 
          - output/result.xml

e2e pre:
  stage: test
  image: mcr.microsoft.com/playwright:focal
  before_script:
    - yarn install
  script:
    - yarn e2e:pre
  only:
    - triggers // 只在gitlab api 调用时触发
  artifacts:
      when: always
      reports:
        junit: 
          - e2e/output/result.xml

四、测试报告

最后,Codeceptjs支持很多Reporter,可以根据个人需要进行配置

最后:【可能给你带来帮助的教程】

以上软件测试资料需要的可以私信我关键词(资料)免费获取

这还有一份216页软件测试工程师面试宝典文档资料。以及相对应的视频学习教程免费分享!,其中资料包括了有基础知识、Linux必备、Shell、互联网程序原理、Mysql数据库、抓包工具专题、接口测试工具、测试进阶-Python编程、Web自动化测试、APP自动化测试、接口自动化测试、测试高级持续集成、测试架构开发测试框架、性能测试、安全测试等。

学习不要孤军奋战,最好是能抱团取暖,相互成就一起成长,群众效应的效果是非常强大的,大家一起学习,一起打卡,会更有学习动力,也更能坚持下去。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值