Popper: 实时跨浏览器自动化测试工具

Popper: 实时跨浏览器自动化测试工具

在Web的广泛普及中，其痛点在于进行准确的测试变得复杂。常常见到模糊的浏览器兼容性声明，如“IE9+”，仿佛只要IE9能工作，其他所有操作系统和平台组合都应无问题！对于那些需要更真实数据的人，Popper模块让早期开发周期中的测试变得轻松许多，甚至可以实时进行。

这是Ripple v0.3在最新Chrome，Firefox，IE，Android和iOS上的测试结果快照。

功能特性

1. 使用BrowserStack和Sauce Labs孵化代理。
2. 支持多仓库测试，即使一个模块的变动可能影响其他模块（例如utilise的microlibs或Ripple v0.3）。
3. 在实时中聚合每个仓库、每个浏览器以及全局的结果。
4. 文件变更时自动重跑测试。
5. 打开自己的浏览器标签作为测试代理，适合企业环境使用。
6. 自动识别操作系统/浏览器，并提供简单图标。
7. 提供命令行接口（CLI），默认设置便利。
8. .popper.yml文件可为每个仓库持久化配置测试参数。
9. 代理控制台/错误语句，使远程调试移动设备更加容易。
10. 强制在特定代理上重新运行测试。
11. 查看结果页面快照流，由代理产生。
12. 集成持续集成（CI），通过npm test调用popper，如果所有定义的浏览器测试通过，将干净退出。
13. 可以增加CI超时时间，通过POPPER_TIMEOUT=毫秒设置。
14. 可选隧道功能，允许完全禁用ngrok隧道。
15. 添加自己的远程农场。
16. 添加自定义的测试运行器。

使用方法

全局安装：

npm i -g popper

局部安装：

npm i -D popper

运行：

popper

开启调试模式并查看日志：

NODE_ENV=debug popper

如果你设置了BROWSERSTACK_USERNAME和BROWSERSTACK_KEY环境变量，Popper会使用BrowserStack启动测试代理。

运行时，打开localhost:1945进行测试，同时保持localhost:1945/dashboard打开来查看测试结果的实时更新。

CLI选项

你可以通过命令行、YAML或JS API设置以下选项：

使用: popper

选项:
    -b, --browsers: 要运行测试的浏览器，默认无
    -t, --test: 用于生成测试捆绑包的命令， 默认为 "browserify test.js"
    -p, --port: 运行的端口，默认为1945
    -w, --watch: 监听文件变化的文件或目录，默认为当前目录
    -n, --notunnel: 禁止打开隧道，默认开启
    -l, --timeout: CI模式下等待结果的最大时间，默认为POPPER_TIMEOUT或20000
    -r, --runner: 测试运行器，可选'mocha' 或 'tape'，默认为'mocha'
    -f, --farm: 远程浏览器农场，默认为browserstack

默认选项

如果没有从本地YAML配置或命令行参数提供某些选项，它们将使用以下默认值：

• 全局：none
• 浏览器：none
• 测试：browserify test.js
• 端口：1945
• 监听：.（当前目录）
• 关闭隧道：false
• 运行器：mocha
• 超时时间：process.env.POPPER_TIMEOUT || 20000
• 农场：browserstack

YAML配置（示例）

可以参考utilise的配置和rijs/reactive的配置。

JS API配置（示例）

参考Ripple的配置。

应用场景

Popper适用于任何需要跨浏览器实时测试的项目，无论是在个人项目还是大型团队协作中。特别是当你需要确保你的代码在各种浏览器环境下都能正常工作，或者在持续集成环境中快速验证新代码的兼容性时，它都是理想的选择。

项目特点

• 实时性：文件改变即触发重新测试，立即反馈结果。
• 灵活性：支持多种配置方式（CLI、YAML、JS API）适应不同需求。
• 扩展性：可以通过添加农场和测试运行器来自定义测试环境。
• 自动化：与CI系统集成，一键完成多浏览器测试。

总之，Popper是现代前端开发者进行跨浏览器自动化测试的强大工具，它的强大功能和易用性使得测试变得更加简单高效。无论是个人开发者，还是团队协作，都可以考虑将其纳入日常的开发流程，提升产品质量和效率。