单元测试和代码检查_测试成为代码的声音检查

单元测试和代码检查

Test, test, one, two, one, two… — a proper soundcheck before going on stage ensures a successful gig and a happy audience. Same is true for an application and the users being the concert goers!

测试，测试，一，二，一，二…–上台前进行适当的声音检查，可以确保演出成功和观众满意。 对于应用程序和用户都是演唱者，情况也是如此！

Tuning the instruments are the unit tests in coding, checking the ensemble playing equals the purpose of integration tests and corresponding to the final soundcheck, the end2end-tests validate the audience experience: Do they like what they hear or see? Do they get what they expect? Do they find their way?

调整乐器是编码中的单元测试，检查合奏演奏是否等于集成测试的目的，并与最终的声音检查相对应，end2end-tests验证了听众的体验：他们喜欢听或看到的内容吗？ 他们能达到他们的期望吗？ 他们找到路了吗？

As a Junior Frontend Developer, the following field report is based on my first experiences with a frontend end2end-testing, comparing two tools and sharing my learnings.

作为初级前端开发人员，以下现场报告基于我的前端端到端测试经验，比较了两种工具并分享了我的经验。

测试工具和仪器 (Testing Tools and Instruments)

You can pick a testing tool from a variety of options: Cypress, Nightwatch.js, WebdriverIO or Selenide just to name a few. In the following I will compare the testing of Cypress, being the most recommended, and Nightwatch.js to take the option of page objects to its fullest.

您可以从多种选项中选择一种测试工具： Cypress ， Nightwatch.js ， WebdriverIO或Selenide等等。 在下文中，我将比较推荐使用的赛普拉斯和Nightwatch.js的测试，以充分利用页面对象的选项。

Especially from a junior position with a limited background of experience, the most valuable criteria are learnability, error logging and documentation to solve the issues and be able to work with the tools independently.

尤其是从经验有限的初级职位开始，最有价值的标准是易学性，错误记录和文档，以解决问题并能够独立使用工具。

So, we test to test and evaluate the differences focusing on the following aspects:

因此，我们测试以集中在以下方面来测试和评估差异：

• Learnability/easy-to-understand
  易学性/易于理解
• Documentation/Problem Solving Support
  文档/问题解决支持
• Logging/Recording of the Testing Process
  记录/记录测试过程
• Syntax/Structure
  语法/结构

Let’s start with…

让我们开始……

柏 (CYPRESS)

Facts & Numbers

事实与数字

The latest version 4.9.0 was released on June 20th in 2020. With 1.220.421 downloads, Cypress has an enormous weekly download count on Npm and

最新版本4.9.0于2020年6月20日发布。赛普拉斯的下载量为1.220.421，每周在Npm和

21,300 Stars on github. The community seems to be quite active and is keen on improving the version on a daily basis to fix bugs and solve issues for everyone.

github上有21,300个星。 该社区似乎非常活跃，并且热衷于每天改进该版本以修复错误并为每个人解决问题。

On May 30th, 2020 Nightwatch.js latest version 1.3.6 was released.

2020年5月30日，发布了Nightwatch.js最新版本1.3.6。

With 194.638 downloads it covers only about 15% of the cypress downloads. I guess this also leads to a noticeably lower engagement on its github commits and stars.

共有194.638次下载，仅占柏树下载的15％。 我猜这也导致其github提交和星级的参与度明显降低。

Learnability

易学性

One can find a number of videos and articles on Cypress testing cases, examples and tutorials. The syntax is quite easy to understand and follow. Tests can be implemented with a basic understanding of the code structure, as the UI is very intuitive. With enough time and passion, one can dig deeper in the page object options to simplify the tests via assertion libraries for common assertions or using a DomainSpecificLanguage (e.g. Cucumber).

您可以找到许多有关赛普拉斯测试案例，示例和教程的视频和文章 。 语法非常容易理解和遵循。 由于UI非常直观，因此可以在基本了解代码结构的情况下执行测试。 只要有足够的时间和热情，就可以通过用于公共断言的断言库或使用DomainSpecificLanguage(例如Cucumber )来更深入地研究页面对象选项，以简化测试。

There are some videos and essays on Nightwatch.js but one will not be drowned by its range. Following a tutorial will help to install the packages and was way easier than following the documentation on the Nightwatch.js-website. Nevertheless, the structure of the website is very helpful to find one’s way through the different pillars of the tool. A detailed explanation on the purpose and advantage of using page objects made it clear that this could be the main advantage of Nightwatch.js.

Nightwatch.js上有一些视频和文章，但不会被其范围淹没。 遵循教程将有助于安装软件包，并且比遵循Nightwatch.js网站上的文档更容易。 然而，网站的结构对于通过工具的不同Struts找到自己的方式非常有帮助。 有关使用页面对象的目的和优点的详细说明清楚地表明，这可能是Nightwatch.js的主要优点。

Documentation / Problem Solving Support

文档/问题解决支持

The Cypress documentation is quite extensive. Especially because it is one of the most popular tools at the moment. For almost every problem, there is a Q&A, stackoverflow chat or a github repo. In addition to that, the documentation carries a proper explanation and syntax-examples for each method.

赛普拉斯的文档非常丰富。 特别是因为它是当前最受欢迎的工具之一。 对于几乎每个问题，都有一个问答，stackoverflow聊天或github回购。 除此之外，文档还为每种方法提供了正确的解释和语法示例。

Having the full documentation on one page helps to easy search for and find what you need — if there is a method for it. Unfortunately, the syntax is often not presented in an example code context which makes it harder to understand which parameters can and must be used to apply the method successfully. Additionally, some cases, such as comparing two input values, are not covered and it is tricky to work around the missing methods.

如果有某种方法，将完整的文档放在一页上可以帮助您轻松搜索和查找所需内容。 不幸的是，语法通常没有在示例代码上下文中显示，这使得更难于理解哪些参数可以且必须用于成功应用该方法。 此外，某些情况(例如比较两个输入值)未涵盖在内，解决丢失的方法很棘手。

Logging /Debugging

记录/调试

With starting Cypress to run the test, one can follow the process in the testing browser and a Cypress console which logs each step, issue and command. In case of a failing test, the full test cases will be executed, and the error messages displayed in the log. This is a very helpful approach, as one failure doesn’t block the execution of the following tests. And by hovering over the logs, the progress will be highlighted in the test-browser.

通过启动赛普拉斯来运行测试，您可以在测试浏览器和赛普拉斯控制台中跟踪该过程，该控制台记录了每个步骤，问题和命令。 如果测试失败，将执行完整的测试用例，并在日志中显示错误消息。 这是一种非常有用的方法，因为一个故障不会阻止以下测试的执行。 通过将鼠标悬停在日志上，进度将在测试浏览器中突出显示。

Testing the usability by watching the test run in the browser helps to follow each step, but you have to focus hard to see the fast process of the test. Therefore, one can get more insights via the error logging in the terminal.

通过查看浏览器中的测试运行来测试可用性有助于遵循每个步骤，但是您必须集中精力查看测试的快速过程。 因此，可以通过终端中的错误记录获得更多见解。

As soon as there is a failure in the test, the process will be stopped and following tests skipped which is one big disadvantage of Nightwatch.js. Furthermore, one cannot get any details on the backend calls and related timing issues. Working process is literally a try and error process.

一旦测试失败，该过程将立即停止并跳过以下测试，这是Nightwatch.js的一大弊端。 此外，人们无法获得有关后端调用和相关时序问题的任何详细信息。 从字面上看，工作过程是一个试错过程。

Let’s move to…

让我们开始……

NIGHTWATCH.JS (NIGHTWATCH.JS)

Facts & Numbers

事实与数字

On May 30th, 2020 Nightwatch.js latest version 1.3.6 was released.

2020年5月30日，发布了Nightwatch.js最新版本1.3.6。

With 194.638 downloads it covers only about 15% of the cypress downloads. I guess this also leads to a noticeably lower engagement on its github commits and stars.

共有194.638次下载，仅占柏树下载的15％。 我猜这也导致其github提交和星级的参与度明显降低。

Learnability

易学性

There are some videos and essays on Nightwatch.js but one will not be drowned by its range. Following a tutorial will help to install the packages and was way easier than following the documentation on the Nightwatch.js-website. Nevertheless, the structure of the website is very helpful to find one’s way through the different pillars of the tool. A detailed explanation on the purpose and advantage of using page objects made it clear that this could be the main advantage of Nightwatch.js.

Nightwatch.js上有一些视频和文章，但不会被其范围淹没。 遵循教程将有助于安装软件包，并且比遵循Nightwatch.js网站上的文档更容易。 然而，网站的结构对于通过工具的不同Struts找到自己的方式非常有帮助。 有关使用页面对象的目的和优点的详细说明清楚地表明，这可能是Nightwatch.js的主要优点。

Documentation / Problem Solving Support

文档/问题解决支持

Having the full documentation on one page helps to easy search for and find what you need — if there is a method for it. Unfortunately, the syntax is often not presented in an example code context which makes it harder to understand which parameters can and must be used to apply the method successfully. Additionally, some cases, such as comparing two input values, are not covered and it is tricky to work around the missing methods.

如果有某种方法，将完整的文档放在一页上可以帮助您轻松搜索和查找所需内容。 不幸的是，语法通常不会在示例代码上下文中显示，这使得很难理解哪些参数可以并且必须用于成功应用该方法。 此外，某些情况(例如比较两个输入值)未涵盖在内，解决丢失的方法很棘手。

Logging / Debugging

记录/调试

Testing the usability by watching the test run in the browser helps to follow each step, but you have to focus hard to see the fast process of the test. Therefore, one can get more insights via the error logging in the terminal.

通过查看浏览器中的测试运行来测试可用性有助于遵循每个步骤，但是您必须集中精力查看测试的快速过程。 因此，可以通过终端中的错误记录获得更多见解。

As soon as there is a failure in the test, the process will be stopped and following tests skipped which is one big disadvantage of Nightwatch.js. Furthermore, one cannot get any details on the backend calls and related timing issues. Working process is literally a try and error process.

一旦测试失败，该过程将立即停止并跳过以下测试，这是Nightwatch.js的一大弊端。 此外，无法获得有关后端调用和相关计时问题的任何详细信息。 从字面上看，工作过程是一个试错过程。

语法击败 (The Syntax-Beat)

The syntax of the two tools varies slightly. To get an idea of the individual structure, I refer to the test of a generate password functionality (highlighted with a red square below) which tests the creation of a password on a button click and compares the value of the firstly generated password to the value after clicking another time. We assume the values are not identical to prove that there is a new random password created on each button click.

两种工具的语法略有不同。 为了了解单个结构，我参考了生成密码功能的测试(下面以红色方框突出显示)，该功能测试单击按钮时密码的创建并将第一生成的密码的值与该值进行比较。再点击一次之后。 我们假设值不相同，以证明每次单击按钮时都会创建一个新的随机密码。

赛普拉斯语法 (Cypress syntax)

Tests are written in spec.js-files, where one can define reusable selectors and list the tests following the given — when — then-approach. User-generated commands or helpers can be used to create functions that simplify and shorten the test code and make it easier to read and follow.

测试用spec.js文件编写，其中可以定义可重用的选择器，并按照给定的方式(当-然后-方法)列出测试。 用户生成的命令或帮助程序可用于创建简化和缩短测试代码并使其更易于阅读和遵循的功能。

Below you can see an example of a reusable method in a helpers.js to be able to test each page without having to log in each time in advance:

下面您可以在helpers.js中看到一个可重用方法的示例，该示例能够测试每个页面而无需事先登录：

The following example is the code of the spec.js where the tests are written. The userIsLoggedIn-method is imported from the file above and the tests for the password generator are running afterwards.

以下示例是编写测试的spec.js代码。 从上面的文件中导入了userIsLoggedIn-method，此后将运行密码生成器的测试。

This will lead to a successful test of the create-password-generation, as you can see below. Not only can you see the commands that Cypress is running, but also the backend-calls and actual validation values.

如下所示，这将成功测试create-password生成。 您不仅可以看到Cypress正在运行的命令，还可以看到后端调用和实际验证值。

Nightwatch.io语法 (Nightwatch.io syntax)

Tests are split into the main test.js and a supporting testCommand.js operating as the page object. The page object will cover the given/when-steps of the tests, while the test.js itself will integrate the functions of its page object and add the assertions to evaluate the success of the test. This pattern of wrapping pages or page fragments makes it possible to write and run the tests from a user perspective without seeing the underlying html actions.

测试分为主test.js和作为页面对象运行的支持testCommand.js。 页面对象将涵盖测试的给定/何时步骤，而test.js本身将集成其页面对象的功能并添加断言以评估测试的成功。 这种包装页面或页面片段的模式使从用户角度编写和运行测试成为可能，而无需查看基础的html操作。

The very well introduced page objects-methodology of nightwatch.js (see the following example) helps to structure the code and keep the tests easy to follow.

nightwatch.js引入的页面对象方法非常好(请参见以下示例)，有助于构造代码并使测试易于遵循。

The Test.js-files are therefore quite short and if you follow a proper command-naming, you can easily understand the single steps of the test.

因此，Test.js文件非常短，如果遵循正确的命令命名，则可以轻松理解测试的单个步骤。

Unfortunately, the logging of the test is only traceable in the terminal as the running test in the browser is faster than you might think. This means that you have to deal with the messages in the terminal and the fact that an error stops the execution of the following tests. This forces you to decide on a testing sequence because as far as I know, you cannot work around it. Lucky you if you see something similar to the log below:

不幸的是，测试的日志只能在终端中追溯，因为浏览器中的运行测试比您想象的要快。 这意味着您必须处理终端中的消息，并且错误会停止以下测试的执行。 这迫使您决定测试顺序，因为据我所知，您无法解决该问题。 幸运的是，如果您看到类似以下日志的内容：

音乐会结束 (End of Concert)

Having to choose between Cypress and Nightwatch.js, I would go with Cypress. The documentation is a big plus and it seems that I can benefit from the experiences and learnings of many other developers and their documentation on the web. In addition to that, the configuration is quite simple and there is no need to install an extra browser or driver for running the tests.

不得不在Cypress和Nightwatch.js之间进行选择，我会选择Cypress。 该文档是一个很大的优点，看来我可以从许多其他开发人员及其在Web上的文档中获得的经验和教训中受益。 除此之外，配置非常简单，无需安装额外的浏览器或驱动程序即可运行测试。

To make the tests even simpler and easier to understand, I would go deeper into the page object options within Cypress and explore a similar structure to separate the test into page objects and HTML wrapper.

为了使测试更加简单和易于理解，我将更深入地研究Cypress中的页面对象选项，并探索一种类似的结构将测试分为页面对象和HTML包装器。

翻译自: https://medium.com/axel-springer-tech/tests-being-the-soundcheck-for-code-9704dacb2429

单元测试和代码检查