Skip to main content

接口测试与界面测试

界面测试rize+puppeteer

Rize是一个提供顶层的、流畅并且可以链式调用API的库，可以简单地使用pupetter

特性

  • 完全支持TypeScript
  • 可链式调用API
  • 仍然可以访问底层的puppeteer的浏览器实例和页面实例
  • 提供了很多方便有用的断言方法

npm install --save-dev puppeteer rize

指定Chromium镜像

Linux和macOS

PUPPETEER_DOWNLOAD_HOST=https://npm.taobao.org/mirrors yarn add --dev puppeteer rize

windows

SET PUPPETEER_DOWNLOAD_HOST=https://npm.taobao.org/mirrors yarn add --dev puppeteer rize

TypeScript需要安装puppeteer类型定义文件

npm install --save-dev @types/puppeteer

API

使用goto方法访问一个页面，可以前进后退或刷新当前页面

rize.goto('http://example.com');
.forward()
.back()
.refresh()
页面配置
//指定user agent
rize.withUserAgent()
//http认证
rize.widthAuth('username', 'password')
//修改http头
rize.withHeaders({})
页面中执行函数

在nodejs环境中执行使用execute

可以在浏览器中执行函数或表达式

rize.evaluate(() =>console.log('output in browser not nodejs'))

可以给执行的函数传递参数

const greeting ="hi"
eize.exaluate(message => console.log(message), greeting)

为了保持 API 能可链式调用， evaluate 方法不会返回您的函数或表达式的返回值，它只会返回当前 Rize 实例，如果需要获取函数或表达式的返回值使用 evaluateWithReturn

(async () => {
  const rize = new Rize()
  const byExpr = await rize.evaluateWithReturn('document.title')
  const byFunc = await rize.evaluateWithReturn(() => document.title)
})()

添加标签

addScriptTag、addStyleTag

  • 参数type为url，value为远程JS/CSS文件的URL
  • 参数type为path，本地css/JS文件的路径
  • type为content，应该给出有效的javascript/css代码

多页面

rize.newPage() rize.closePage() rize.switchPage()

交互
rize.click(选择器)

rize.hover()
//输入框中输入内容,继续使用只会继续追加文本
rize.type('[name=""]', 'Rize')
//清空输入框
rize.clear('[]')
表单交互
rize.check('input#item1[type="checkbox"]').uncheck('input#item2[type="checkbox"]')

rize.radio('input#sex[type="radio"]', 'male')

rize.select('select#food', 'vegetables')  // 单选
rize.select('select#character', ['Rize', 'Syaro'])  // 多选
rize.uploadFile('input[type="file"]', 'my-file.png')
使用键盘
rize.press('Enter')
rize.keyDown('Enter')
rize.keyUp('Enter')
使用鼠标
rize.mouseMoveTo(50, 45)
rize.mouseClick(1, 1)
rize.mouseClick(1, 1, { button: 'right' })
rize.mouseClick(1, 1, { clickCount: 2 })
rize.mouseClick(1, 1, { button: 'right', clickCount: 2 })

rize.mouseDown()             // 按下鼠标左键一次
rize.mouseDown('middle')     // 按下鼠标中键一次
rize.mouseDown('right')      // 按下鼠标右键一次
rize.mouseDown('left', 2)    // 按下鼠标左键两次
rize.mouseDown('right', 2)   // 按下鼠标右键两次

mouseUp 方法的用法与 mouseDown 方法相同。

查找元素

Rize的所有API都可以使用CSS的选择器

提供查找元素的方法

  • find
  • findAll
  • findByXPath

第一个参数：findAll 方法的第一个参数是 CSS 选择器，而 findByXPath 方法的第一个参数是 XPath 表达式

第二个参数：index，必须指定想要的元素在元素搜索结果数组中的索引。

#第三个参数：是一个函数，可以传递 Rize 的 API。但要注意，并不是全部的 API 都是可以的。

测试

puppeteer 仅仅是一个用于控制 Chromium 的软件，不可能提供断言方法用于测试。

rize.assertUrlIs('https://example.com/')
rize.assertUrlMatch(/^https?/)
rize.assertQueryStringHas('key')
ize.assertQueryStringHas('key', 'value')
rize.assertQueryStringMissing('nope')
rize.assertTitle('page title')
rize.assertTitleContains('title')
rize.assertSeeIn('#greeting', 'Hello!')

rize.assertElementPresent('div')
rize.assertElementMissing('div')
rize.assertElementVisible('div')
rize.assertElementHidden('div')

rize.assertClassHas('#greeting', 'pull-right')
rize.assertClassMissing('#greeting', 'pull-left')

rize.assertChecked('input[type=checkbox]')
rize.assertNotChecked('input[type=checkbox]')
rize.assertRadioSelected('input[type=radio]', 'south')
rize.assertRadioNotSelected('input[type=radio]', 'north')


获取数据

(async () => {
  const rize = new Rize()
  const title = await rize.title()
})()

(async () => {
  const rize = new Rize()
  const text = await rize.text()
})()

(async () => {
  const rize = new Rize()
  const html = await rize.html()
})()

(async () => {
  const rize = new Rize()
  const url = await rize.url()
})()

(async () => {
  const rize = new Rize()
  const value = await rize.queryString('key1')
})()

(async () => {
  const rize = new Rize()
  const cookie = await rize.cookie()    // 只获取一个 cookie
  const cookies = await rize.cookies()  // 获取包含 cookies 的数组
})()

元素

(async () => {
  const rize = new Rize()

  // 获取属性
  const value = await rize.attribute('input', 'value')
  
  // 获取样式
  const fontSize = await rize.style('div', 'font-size')
  
  // 获取值。这等同于 `rize.attribute(/* 选择器 */, 'value')`
  const val = await rize.value('input')
  
  // 获取某个元素是否包含某个 class
  const hasMyClass = await rize.hasClass('div', 'my-class')
})()

const rize = new Rize()
rize.value('input', 'new-value')
// ... 这里可以使用可链式调用的方法

(async () => {
  const rize = new Rize()
  const visible = await rize.isVisible('div')
  const present = await rize.isPresent('canvas')
})()

接口测试mocha

Karma为前端自动化测试提供了跨浏览器测试的能力，

Mocha是前端自动化测试框架，测试框架需要解决兼容不同风格断言库，测试用例分组，同步异步测试架构，生命周期钩子等框架级的能力。

Chai是一个断言库合集，支持expect,assert,should断言语法