三方面带你全面认识UI测试(下)

发表于:2021-11-25 09:39  作者:逸杰   来源:掘金

字体: | 上一篇 | 下一篇 |我要投稿 | 推荐标签: UI自动化测试

  方案落地
  最终针对常用的业务场景,我选择了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

  业务测试代码:
// 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是一种敏捷软件开发技术,大致流程如下图:

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

  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,可以根据个人需要进行配置:https://codecept.io/reports/。
  由于gitlab pipline的Tests展示只支持junit,因此只需要参照XML Report给Codeceptjs配置junit,就不赘述。

  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理

评 论

论坛新帖



建议使用IE 6.0以上浏览器,800×600以上分辨率,法律顾问:上海信义律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2021, 沪ICP备05003035号
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪公网安备 31010102002173号

51Testing官方微信

51Testing官方微博

扫一扫 测试知识全知道