Vue.js中端到端（e2e）测试的正确方法是什么？

Question

当然，我可以使用selenium-standalone和xpath来测试应用程序。但有时测试SPA可能会很具有挑战性。

例如，angularjs团队为此提供了protractor。

我认为Protractor的原因在于它等待angularjs加载并具有更多功能：

Protractor提供一些新的定位策略和函数，这对自动化AngularJS应用程序非常有帮助。例如: waitForAngular、By.binding、By.repeater、By.textarea、By.model、WebElement.all、WebElement.evaluate等。

所以问题是: 在Vue.js中是否有任何工具或最佳实践来进行端到端测试？

更新:请随意发布有关Vue.js中端到端测试的教程、示例和所有酷炫的内容。谢谢。

- S Panfilov

---

请看一下Vue的创造者Evan You的示例，链接如下：https://github.com/vuejs/vue-cli。此外，还有一些包括测试的示例应用程序链接，例如https://github.com/vuejs-templates/webpack。 - Jeff

Answer 1

您想要的工具是Nightwatch。使用它，您可以进行Vue.js的端到端测试。

更好的是，当您使用vue-cli时，默认情况下已捆绑该工具，可立即运行。

创建启用了Nightwatch的项目的命令行是vue init webpack myProjectName。

这里有一些 教程。

编辑：最近我经常使用Webdriver.io，我必须说我更喜欢它而不是Nightwatch（更好的文档，拥有活跃的社区和实时的gitter，及时处理的问题等）。

- Alex

Answer 2

我建议使用https://devexpress.github.io/testcafe。

优点:

• 易安装
• 完整测试套件
• 支持javascript ES2016 (async/await)
• 具有灵活的选择器系统
• 智能重试策略的断言
• 生成报告

在这里查看简单的教程。

- mlosev

Answer 3

我推荐使用Cypress。

• 只需一个NPM依赖
• 开箱即用的视频录制功能
• 图形用户界面(GUI)可以展示测试的每一步。

我们的文档非常棒：https://on.cypress.io/intro

对于Vue，特别是想要在Hacker News上进行端到端测试的人，可以参考这个教程：https://vuejsdevelopers.com/2018/01/29/vue-js-e2e-test-hacker-news/。如果您想要对Vue组件进行单元测试，则可以使用https://github.com/bahmutov/cypress-vue-unit-test

祝您愉快地测试。

- gleb bahmutov

---

但是Cypress只支持基于Chrome的浏览器，对吗？ - reutsey

有一个极简的工作示例仓库会很不错。这是我今天尝试的第三个端到端测试，快要失去耐心了... - MartianMartian

目前Cypress支持基于Chrome的浏览器，但Firefox支持也即将到来。 - gleb bahmutov

Cypress 的极简工作示例随处可见：https://docs.cypress.io/examples/examples/recipes.html# https://docs.cypress.io/examples/examples/applications.html - gleb bahmutov

你刚刚推荐了自己吗？在荷兰，我们有一句谚语来形容这种情况：“我们是WC鸭子，我们推荐WC鸭子”。 - Nebulosar

Answer 4

看起来这是一个老问题，但在2019年底，最好的方法是 webdriverio：

优点：

1. 大量的插件和集成生态系统。

2. Mocha、cucumber、jasmine运行器。

3. 测试运行器同步模式。

4. 开箱即用的Allure报告生成器和其他工具。

5. 内置Chromedriver服务。

6. 轻松与selenoid集成，并在Docker中获取浏览器集群以进行并行测试执行。

7. 与devtools协议和puppeteer集成，可以使用大量功能。

8. 与云服务提供商集成。

9. 开箱即用的Appium集成。

缺点：

1. 必须手动编写等待代码。

2. 某些功能要求使用promises。

- Artem N