应用 Rize 来举行 UI 测试或 E2E 测试

2024年5月3日 136次阅读 来源: gplane

之前我曾经在《Rize – 一个能够让你简朴、文雅地运用 puppeteer 的 Node.js 库》一文简朴引见过 Rize 这个库。当时仅仅是引见这个库自身，关于怎样运用，我没有给太多的指点。

这篇文章讲的是怎样运用 Rize 来做 UI 测试或 E2E 测试。

在正式最先之前，先给能够没相识过 Rize 的同砚做个简朴的引见：Rize 是一个供应了相对顶层而且可链式挪用的 API 的库，可与 puppeteer 一同运用。现在开源在 GitHub，地点是 https://github.com/g-plane/rize，迎接人人前去 GitHub 给个 star。

装置

首先是装置 Rize 和 puppeteer。

如果您运用 Yarn：

$ yarn add --dev rize puppeteer

如果您运用 npm：

$ npm install --save-dev rize puppeteer

考虑到国内的收集缘由，您能够须要运用国内的 Chromium 镜像：

关于 Linux 或 macOS 用户：

PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org yarn add --dev puppeteer rize

Windows 用户：

SET PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org yarn add --dev puppeteer rize

（npm 用户同理）

因为装置 puppeteer 的时刻会下载 Chromium，所以全部历程能够比较费时，须要耐烦守候。

商定

我们假定要被测试的页面是如许的：

<html>
    <head>
        <title>题目</title>
    </head>
    <body>
        <div class="greeting">
            Hello World!
        </div>
        <a href="">Another Page</a>
        <button id="btn">Click Me</button>
        <input type="checkbox" name="cb1" checked />
        <input type="checkbox" name="cb2" />
    </body>
</html>

最先编写测试

首先是导入。我们引荐运用 ES2015 的 import 语法：

import Rize from 'rize'

固然您也能够用 CommonJS 体式格局：

const Rize = require('rize')

第一件事是组织一个 Rize 实例：

describe('UI test', () => {
  it('example test', async () => {
    const rize = new Rize()
  })
})

然后要转到要被测试的页面。我们假定前面设定的页面运行在 http://localhost:8000/ 上，那末我们能够：

describe('UI test', () => {
  it('example test', async () => {
    const rize = new Rize()
    rize
      .goto('http://localhost:8000/')
   })
})

断言

断言页面题目

我们能够运用 assertTitle 方法来断言当前页面的题目：

describe('UI test', () => {
  it('example test', async () => {
    const rize = new Rize()
    rize
      .goto('http://localhost:8000/')
      .assertTitle('题目')
   })
})

断言文本内容

能够运用 assertTitle 方法来断言当前页面存在指定的文本：

describe('UI test', () => {
  it('example test', async () => {
    const rize = new Rize()
    rize
      .goto('http://localhost:8000/')
      .assertTitle('题目')
      .assertSee('Hello World!')
   })
})

我们还能够明白在某个元素中存在指定文本，只需给出该元素的 CSS 选择器即可：

describe('UI test', () => {
  it('example test', async () => {
    const rize = new Rize()
    rize
      .goto('http://localhost:8000/')
      .assertTitle('题目')
      .assertSee('Hello World!')
      .assertSeeIn('.greeting', 'Hello World!')
   })
})

断言是不是存在指定的类名

我们能够断言某个元素存在指定的类名：

describe('UI test', () => {
  it('example test', async () => {
    const rize = new Rize()
    rize
      .goto('http://localhost:8000/')
      .assertTitle('题目')
      .assertSee('Hello World!')
      .assertSeeIn('.greeting', 'Hello World!')
      .assertClassHas('div', 'greeting')
   })
})

还能够断言不存在指定的类名：

describe('UI test', () => {
  it('example test', async () => {
    const rize = new Rize()
    rize
      .goto('http://localhost:8000/')
      .assertTitle('题目')
      .assertSee('Hello World!')
      .assertSeeIn('.greeting', 'Hello World!')
      .assertClassHas('div', 'greeting')
      .assertClassMissing('div', 'greet')
   })
})

断言表单状况

我们能够断言一些表单控件的状况，比方复选框（checkbox）选中或未选中：

describe('UI test', () => {
  it('example test', async () => {
    const rize = new Rize()
    rize
      .goto('http://localhost:8000/')
      .assertTitle('题目')
      .assertSee('Hello World!')
      .assertSeeIn('.greeting', 'Hello World!')
      .assertClassHas('div', 'greeting')
      .assertClassMissing('div', 'greet')
      .assertChecked('[name="cb1"]')     // 断言已选中
      .assertNotChecked('[name="cb2"]')  // 断言未选中
   })
})

与页面交互

在现实测试的历程当中，我们不单单议须要举行一些断言，还须要与页面举行交互。

比方，我们以上面的页面为例，我们能够单击谁人按钮：

describe('UI test', () => {
  it('example test', async () => {
    const rize = new Rize()
    rize
      .goto('http://localhost:8000/')
      .assertTitle('题目')
      .assertSee('Hello World!')
      .assertSeeIn('.greeting', 'Hello World!')
      .assertClassHas('div', 'greeting')
      .assertClassMissing('div', 'greet')
      .assertChecked('[name="cb1"]')     // 断言已选中
      .assertNotChecked('[name="cb2"]')  // 断言未选中
      .click('#btn')
   })
})

也能够单击某个链接，我们只须要给出该链接上的文本：

describe('UI test', () => {
  it('example test', async () => {
    const rize = new Rize()
    rize
      .goto('http://localhost:8000/')
      .assertTitle('题目')
      .assertSee('Hello World!')
      .assertSeeIn('.greeting', 'Hello World!')
      .assertClassHas('div', 'greeting')
      .assertClassMissing('div', 'greet')
      .assertChecked('[name="cb1"]')     // 断言已选中
      .assertNotChecked('[name="cb2"]')  // 断言未选中
      .click('#btn')
      .clickLink('Another Page')
   })
})

固然，我们还能与表单举行交互。比方，勾选某个复选框：

describe('UI test', () => {
  it('example test', async () => {
    const rize = new Rize()
    rize
      .goto('http://localhost:8000/')
      .assertTitle('题目')
      .assertSee('Hello World!')
      .assertSeeIn('.greeting', 'Hello World!')
      .assertClassHas('div', 'greeting')
      .assertClassMissing('div', 'greet')
      .assertChecked('[name="cb1"]')     // 断言已选中
      .assertNotChecked('[name="cb2"]')  // 断言未选中
      .click('#btn')
      .clickLink('Another Page')
      .check('[name="cb2"]')
   })
})

或许作废勾选某个复选框：

describe('UI test', () => {
  it('example test', async () => {
    const rize = new Rize()
    rize
      .goto('http://localhost:8000/')
      .assertTitle('题目')
      .assertSee('Hello World!')
      .assertSeeIn('.greeting', 'Hello World!')
      .assertClassHas('div', 'greeting')
      .assertClassMissing('div', 'greet')
      .assertChecked('[name="cb1"]')     // 断言已选中
      .assertNotChecked('[name="cb2"]')  // 断言未选中
      .click('#btn')
      .clickLink('Another Page')
      .check('[name="cb2"]')
      .uncheck('[name="cb1"]')
   })
})

封闭浏览器

在完成一切事情以后，须要退出浏览器：

describe('UI test', () => {
  it('example test', async () => {
    const rize = new Rize()
    rize
      .goto('http://localhost:8000/')
      .assertTitle('题目')
      .assertSee('Hello World!')
      .assertSeeIn('.greeting', 'Hello World!')
      .assertClassHas('div', 'greeting')
      .assertClassMissing('div', 'greet')
      .assertChecked('[name="cb1"]')     // 断言已选中
      .assertNotChecked('[name="cb2"]')  // 断言未选中
      .click('#btn')
      .clickLink('Another Page')
      .check('[name="cb2"]')
      .uncheck('[name="cb1"]')
    await rize.end()
   })
})

更多

现实上 Rize 的功用远不只上面那些。想要猎取更多信息，能够前去以下页面：

Rize 的 GitHub 堆栈：https://github.com/g-plane/rize （迎接 star）

Rize 的文档教程：https://rize.js.org/

Rize 一切的 API 参考：https://rize.js.org/api/classes/_index_.rize.html

    原文作者：gplane
    原文地址: https://segmentfault.com/a/1190000013788226
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞