前言
前端自动化测试的重要性越来越被大家所认识，而其中的一个难点是如何理解并且快速调试测试用例。本文要介绍的 @test-runner/live-view 这个 npm 包，可以帮助我们通过浏览器监控测试用例的执行，并实时显示测试结果，从而加速我们的开发和测试工作。
安装
首先，我们需要安装 @test-runner/live-view，可以通过以下命令完成：
--- ------- -- ----------------------
使用
在项目跟目录执行以下命令开启实时监测：
---------
此时，浏览器会打开限定的端口，并且自动打开对应的网页。这个页面可以根据我们在每个测试用例中写的事件来实时变化。下面是一个例子，在客户端中有这么一个测试用例：
---------------- -- -- -
----- - - ---- --- -- -- -
-------- - -----------
---
---在运行 live-view 之后，我们可以看到如下的页面：
页面上会展示一个测试用例的列表，里面会包含每个用例的名称和运行的结果。有三种不同的状态：
green：表示用例通过red：表示用例失败yellow：表示用例还在运行中
我们也可以通过在命令行中加 -v 参数，进入调试模式。调试模式下，live-view 会把每个测试用例的具体运行状态打印出来。
配置
除了命令行参数之外，我们还可以通过配置文件来调整 live-view 的行为。在项目根目录下，创建一个 test-runner.config.js 文件，然后添加以下的配置项：
-------------- - -
------- -
----------- -----
--
--目前支持的配置项有：
module.typescript
- 类型：boolean
- 默认值：false
- 说明：是否使用 Typescript 来写测试用例。如果为 true，则需要在项目中添加 Typescript 相关依赖。
module.require
- 类型：Array
- 默认值：[]
- 说明：这个配置项用于在每个测试用例之前，全局引入一些依赖。
module.load
- 类型：Array
- 默认值：[]
- 说明：这个配置项用于在每个测试用例之前，通过
require函数加载一些文件。
结语
@test-runner/live-view 是一个优秀的前端自动化测试工具，它能够大大方便我们的测试工作，并且提高我们的开发效率。希望本文能帮助到大家，也期待大家通过这个 npm 包来更好地实践前端自动化测试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedc8d4b5cbfe1ea061232f