三方面带你全面认识UI测试（下）

草帽路飞UU

方案落地
　　最终针对常用的业务场景，我选择了Codeceptjs，这是一个E2E的测试集成框架，统一了用户层的api，可以选择多种不同的测试方案，Web端支持Playwright、WebDriver、Puppeteer、Protractor、TestCafe、Nightmare，手机端支持Appium、Detox。
　　·在PC端使用Playwright
　　·在APP端使用Appium
　　在项目落地前，还有个问题需要确定：
　　·E2E测试代码放哪里？（有以下两个选择）
　　 ·跟随项目代码：便于跟随项目的变动进行迭代
　　 ·独立仓库维护：独立维护，跟项目仓库解耦
　　两种选择各有利弊，第一种方案适合项目开发人员维护测试代码，第二种方案适合测试人员独立维护测试代码。

　　初始化项目
　　安装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可以看这里：https://codecept.io/helpers/Playwright/。

　　Page Object Model
　　POM是自动化测试代码中最基础的设计模式，核心思想就是将交互和业务解耦，把能够复用的交互层代码进行抽离。
　　创建PageObject页面：
npx codeceptjs gt  // 也等于 npx codeceptjs generate:pageobject
POM代码：

1. // pages/User.js
   
2. const { I } = inject()
   
3. 
   
4. class User {
   
5.   async login (mobile, token) {
   
6.     await I.seeInCurrentUrl('/login')
   
7.     I.fillField('[name="login-phone"]', mobile)
   
8.     I.fillField('[name="sms-code"]', token)
   
9.     I.click('登录', '[type="submit"]')
   
10.   }
    
11. 
    
12.   async chooseRole (roleName, actionName = '确 定') {
    
13.     const hasRoleName = tryTo(() => I.see(roleName, '.role-item'))
    
14.     if (hasRoleName) {
    
15.       I.click(`text="${roleName}"`)
    
16.       I.click(`text="${actionName}"`)
    
17.     }
    
18.   }
    
19. }
    
20. 
    
21. module.exports = new User()
    
22. module.exports.User = User业务测试代码：
    
23. // specs/login_test.js
    
24. Feature('登录')
    
25. 
    
26. Scenario('跳转到首页', async ({ I, User }) => {
    
27.   await I.amOnPage('/')
    
28.   await User.login(1234567890, 123)
    
29.   await User.chooseRole('经理')
    
30.   await I.seeInCurrentUrl('/home')
    
31. })BDD

复制代码

　　全称：Behavior-driven Development
　　中文：行为驱动开发
　　BDD是一种敏捷软件开发的技术，大致流程如下图：


·业务方、产品经理、开发人员、测试人员一起讨论并明确需求
　　·使用Gherkin来编写描述业务场景的测试用例
　　·开发人员根据Gherkin写的测试用例来编写代码
　　·测试人员根据Gherkin写的测试用例来验收测试
　　BDD最重要的一个特性是：由非开发人员编写测试用例，而这些测试用例是使用自然语言编写的 DSL（领域特定语言）。
　　这样有助于克服开发人员对构建产品需求的理解与业务人员对需求引起的技术困难理解之间的差距。
　　Gherkin 是一种DSL，最初由BDD测试框架Cucumber提出。
　　优点：
　　·支持多语言
　　·业务人员可以读懂
　　·可以描述软件行为

　Gherkin以.feature后缀的文件为载体。
　　每个Gherkin场景都有一个基本的模式，其中包括：条件（假如），事件（当）和结果（那么）：
// features/login.feature
# language: zh-CN
功能: 登录
  场景: 跳转到首页
    假如 进入项目根路径
    那么 进入到登录页面
    当 登录账号1234567890
    当 选择经理角色
    那么 进入到首页　给对应的步骤编写测试代码：

1. // step_definitions/steps.js
   
2. const { I } = inject()
   
3. // Add in your custom step files
   
4. 
   
5. Given('进入项目根路径', () => {
   
6.   I.amOnPage('/')
   
7. })
   
8. 
   
9. Then('进入到登录页面', async () => {
   
10.   await I.seeInCurrentUrl('/login')
    
11. })
    
12. 
    
13. When('登录账号1234567890', async () => {
    
14.   I.fillField('[name="login-phone"]', 1234567890)
    
15.   I.fillField('[name="sms-code"]', 123)
    
16.   I.click('登录', '[type="submit"]')
    
17. })
    
18. 
    
19. When('选择经理角色', async () => {
    
20.   await I.see('经理', '.role-item')
    
21.   I.click('text="经理"')
    
22.   I.click('text="确 定"')
    
23. })
    
24. 
    
25. Then('进入到首页', async () => {
    
26.   await I.seeInCurrentUrl('/home')
    
27. })CI/CD

复制代码

　　基于gitlab pipline实现CI/CD，主要分为两个步骤：
　　·冒烟提测（手动触发 gitlab pipline）
　　·预发发布（自动触发 gitlab api）
　　只需要编写.gitlab-ci.yml：

1. e2e dev:
   
2.   stage: test
   
3.   image: mcr.microsoft.com/playwright:focal
   
4.   before_script:
   
5.     - yarn install
   
6.   script:
   
7.     - yarn e2e:dev
   
8.   only:
   
9.     - web // 只在gitlab web端手动触发
   
10.   artifacts:
    
11.       when: always
    
12.       reports:
    
13.         junit:
    
14.           - output/result.xml
    
15. 
    
16. e2e pre:
    
17.   stage: test
    
18.   image: mcr.microsoft.com/playwright:focal
    
19.   before_script:
    
20.     - yarn install
    
21.   script:
    
22.     - yarn e2e:pre
    
23.   only:
    
24.     - triggers // 只在gitlab api 调用时触发
    
25.   artifacts:
    
26.       when: always
    
27.       reports:
    
28.         junit:

复制代码

          - e2e/output/result.xml测试报告
　　最后，Codeceptjs支持很多Reporter，可以根据个人需要进行配置：https://codecept.io/reports/。
　　由于gitlab pipline的Tests展示只支持junit，因此只需要参照XML Report给Codeceptjs配置junit，就不赘述。