javascript - 混合客户端/服务器端测试

标签 javascript selenium mocha.js saucelabs

我应该如何构建混合了 Selenium 代码(用于设置页面)和客户端 Mocha 代码(用于在被测试的客户端 JS 上实际执行测试)的测试?

我正在测试客户端 javascript 库。单元测试适用于 Karma、Mocha 和 Grunt。单元测试可以在本地运行,也可以通过 SauceLabs 运行。单元测试基本上能够测试直到实际提交文件的所有部分。这部分需要浏览器自动化和/或手动交互,这正是我正在努力解决的问题。

有问题的库是一个 Javascript 文件上传库。它具有分块、自动恢复等功能。它不需要 jQuery,并且适用于各种浏览器(IE7-10、FF、Safari(Mac 和 iOS)、Chrome、Android 常用浏览器)。因此,这些测试涵盖了很多案例和异常。

基本上,我需要使用 Selenium 来设置页面。由于我正在测试客户端 JS 文件上传库,因此我需要使用 Selenium 以编程方式提交文件,以便实际上传文件。提交此文件后(相当于从尝试在线上传一个或多个文件时出现的对话框窗口中选择一个文件)然后可以运行客户端测试以确保 UI 具有已正确绘制,已找到文件等。

我正在努力思考如何正确测试它,以及如何设置我的测试套件以使其在未来可扩展、健壮且简单/易于使用。

  • 我应该注入(inject) JS 代码以使用 Selenium 在客户端运行吗?

    一个想法是在适当的时候用 Selenium 注入(inject)客户端 JS 代码。这是我在想什么的一些伪代码:

describe("A Test", function () {

   it("injects some JS", function (done) {
        // Assume `getClientSideScript` loads some .js file from the filesystem,
        // reads its contents, and returns the contents as a string (to be executed).
        browser.safeExecute(getClientSideScript('initialize'), function (err, result) {
            // At this point, the client-side library is initialized on the page.

            // Assume that `uploadFile` will submit a file to the `<input type='file'>`
            // element
            utils.uploadFile('file.jpg', function (file) {

                browser.safeExecute(getClientSideScript('test_file_submission'), function (err, result) {
                    assert.ok(/* something about the result */);
                });

            });

        }); 
   });
});

对我来说,这会起作用,但看起来像一个巨大的 PITA。我将不得不想出一些约定来存储和加载已加载的客户端脚本。此外,两个不同的测试将有两个不同的注入(inject)脚本,因此我们将在我们的 repo 中收集大量一次性使用的脚本。我也害怕沿着这条路走下去,然后发现这是一个错误的决定或不可能的决定。

谁有这方面的经验?

  • 模拟服务器...我需要一个。

    我可以使用 Sinon.js使模拟服务器成为客户端,或 nock有一个单独的服务器端模拟服务器。服务器 super 简单,但我相信我需要能够向客户端断言服务器的响应是预期的。

  • 拦截客户端测试结果

    与上述类似,当使用 Selenium 使浏览器自动化时,我如何能够拦截客户端代码中的 asserts。例如,假设我想测试我的库和模拟服务器之间的请求-响应周期,并且我想验证如果我的库向服务器发送请求 A,它会期望响应 A。Selenium 无法测试它。我需要能够在客户端捕获断言并通过 Selenium 输出。

我一直在努力寻找最好的方法来做到这一点。如果有人有任何类似的经验,请插话!

最佳答案

我根本不会混合这两种类型的测试。您在这里有几个不同的问题。您仍然可以获得完整的测试覆盖率,而不必像您描述的那样组合测试。

  • 客户端单元测试(使用 Karma、Mocha 等)验证 JavaScript 代码是否按预期运行。
  • 服务器端单元测试(使用 JUnit 或后端存在的任何单元测试框架)验证服务器代码是否按预期运行。
  • 集成或端到端测试(使用 Selenium)验证通常验证多个组件是否正确协同工作。如有必要,您可以为这些使用模拟后端。

您可以创建 Karma/Mocha 单元测试来验证该文件上传操作可能存在的任何处理的详细信息。在这里,您应该测试 UI 下各个 JavaScript 函数的边缘情况。

然后您可以创建一个 Selenium 测试来纯粹测试上传操作和上传文件的预期结果。您可以验证页面上是否存在正确的元素并在上传后具有预期的属性。在这种情况下,JavaScript 是一个黑盒子。您正在从用户的 Angular 进行测试。这将练习您已经单元测试过的一些代码,但它的重点是测试前端和后端之间的连接。

关于javascript - 混合客户端/服务器端测试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18729901/

相关文章:

javascript - 如何在从代码隐藏显示之前在弹出窗口中选择预填充的下拉列表选项

java - 检查按钮是否可用?如果不等待 5 秒再检查一次?

java - Selenium + Java = 断言错误

javascript - 测试应该传递流错误,失败则成功

javascript - knex 中的排水管连接需要比预期更多的时间

javascript - 将 Uint8ClampedArray 缓冲区输出为字节流

javascript - 在鼠标悬停时添加事件,如何仅添加一次事件?

firefox - 如何删除所有域中的所有 cookie?

node.js - Mocha : Cannot read property 'be' of undefined

javascript - 如何将字符串向左滑出,用数组中的下一个元素替换文本,然后滑回原位?