三方面带你全面认识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代码：
// 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业务测试代码：