【问题标题】:Mixing Client-/Server-Side Tests混合客户端/服务器端测试
【发布时间】:2013-09-14 19:28:23
【问题描述】:

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

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

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

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

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

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

    一个想法是在适当的时候使用 Selenium 注入客户端 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。我必须想出一些约定来存储和加载加载的客户端脚本。此外,两个不同的测试将有两个不同的注入脚本,因此我们将在我们的 repo 中收集大量一次性使用的脚本。我也害怕沿着这条路走下去,发现这是一个错误的决定或不可能的决定。

有人有这方面的经验吗?

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

    我可以使用Sinon.js 制作客户端模拟服务器,或使用nock 拥有一个单独的服务器端模拟服务器。服务器超级简单,但我相信我需要能够在客户端断言来自服务器的响应是预期的。

  • 拦截客户端测试结果

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

一直在试图找出最好的方法来做到这一点。如果有人有类似的经验,请加入!

【问题讨论】:

  • 我不建议在 1 个测试用例中使用 2 个不同的测试框架。这可能会导致维护地狱。有用的是拥有 2 个单独的测试文件,以及一个运行测试的驱动程序,并与 selenium 并行运行 mocha。
  • 您的目标(“然后可以运行客户端测试以确保正确绘制 UI、找到文件等”)仅使用 selenium 就可以实现(除非有一些 UI Selenium 无法处理的怪癖)。那么为什么不直接使用 Selenium 来实现这个目标呢?
  • 你看过其他库使用什么吗?例如,github.com/blueimp/jQuery-File-Upload 使用 Qunit

标签: javascript selenium mocha.js saucelabs


【解决方案1】:

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

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

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-08-27
    • 2011-08-06
    • 1970-01-01
    • 1970-01-01
    • 2012-12-13
    • 1970-01-01
    • 2011-05-04
    相关资源
    最近更新 更多