资讯专栏INFORMATION COLUMN

利用 Rize 来进行 UI 测试或 E2E 测试

yimo / 1112人阅读

摘要:约定我们假定要被测试的页面是这样的标题开始编写测试首先是导入。我们推荐使用的语法当然您也可以用方式第一件事是构造一个实例然后要转到要被测试的页面。

之前我曾经在《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,所以整个过程可能比较费时,需要耐心等待。

约定

我们假定要被测试的页面是这样的:


    
        标题
    
    
        
Hello World!
Another Page
开始编写测试

首先是导入。我们推荐使用 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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52012.html

相关文章

  • 利用 Rize 进行 UI 测试 E2E 测试

    摘要:约定我们假定要被测试的页面是这样的标题开始编写测试首先是导入。我们推荐使用的语法当然您也可以用方式第一件事是构造一个实例然后要转到要被测试的页面。 之前我曾经在《Rize - 一个可以让你简单、优雅地使用 puppeteer 的 Node.js 库》一文简单介绍过 Rize 这个库。当时仅仅是介绍这个库本身,关于如何使用,我没有给太多的指导。 这篇文章讲的是如何使用 Rize 来做 U...

    Coding01 评论0 收藏0
  • 利用 Rize 进行 UI 测试 E2E 测试

    摘要:约定我们假定要被测试的页面是这样的标题开始编写测试首先是导入。我们推荐使用的语法当然您也可以用方式第一件事是构造一个实例然后要转到要被测试的页面。 之前我曾经在《Rize - 一个可以让你简单、优雅地使用 puppeteer 的 Node.js 库》一文简单介绍过 Rize 这个库。当时仅仅是介绍这个库本身,关于如何使用,我没有给太多的指导。 这篇文章讲的是如何使用 Rize 来做 U...

    Lin_R 评论0 收藏0
  • Rize - 一个可以让你简单、优雅的使用 puppeteer 的 Node.js 库

    摘要:目前已经成为了非常流行的的库,被广泛用于爬虫或测试。然而,的几乎所有的都是异步的,它返回的是一个。而提供了一系列的,使得测试变得简单方便,测试同样没有问题。更多的可以参考的文档链接在下方。 目前 puppeteer 已经成为了非常流行的 Node.js 的库,被广泛用于爬虫或 UI 测试。 我也很欢喜 puppeteer 这个库。然而,puppeteer 的几乎所有的 API 都是异步...

    JeOam 评论0 收藏0
  • Rize - 一个可以让你简单、优雅的使用 puppeteer 的 Node.js 库

    摘要:目前已经成为了非常流行的的库,被广泛用于爬虫或测试。然而,的几乎所有的都是异步的,它返回的是一个。而提供了一系列的,使得测试变得简单方便,测试同样没有问题。更多的可以参考的文档链接在下方。 目前 puppeteer 已经成为了非常流行的 Node.js 的库,被广泛用于爬虫或 UI 测试。 我也很欢喜 puppeteer 这个库。然而,puppeteer 的几乎所有的 API 都是异步...

    AZmake 评论0 收藏0
  • [缘起] 前端 E2E 测试的困境

    摘要:与其它自动化测试不同,前端的测试一直是个老大难问题,难点主要在于如何描述测试。自动化测试的核心是检查特定输入能不能得到符合预期的结果。结构不能反应视图的真实状态,很可能会出现虽然测试通过,但实际上在用户眼里仍然是错误的表现。 与其它自动化测试不同,前端的 E2E 测试一直是个老大难问题,难点主要在于 如何描述测试。 自动化测试的核心是检查特定输入能不能得到符合预期的结果。对于单元测试和...

    awokezhou 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<