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

Mixing Client-/Server-Side Tests

本文关键字：测试 服务器端 客户端 混合      更新时间：2023-09-26

我应该如何构建包含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。我必须想出一些约定来存储和加载加载的客户端脚本。此外，两个不同的测试将有两个不同的注入脚本，因此我们将在存储库中收集大量一次性脚本。我也害怕走这条路，发现这是一个错误的决定或不可能。

有人对此有任何经验吗？

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

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

  • 截获客户端测试结果

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

一直在墙上敲打我的头，试图找出最好的方法来做到这一点。如果有人对类似的事情有任何经验，请插话！

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

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

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

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

相关文章：