使用 Cypress.io 进行角度测试

mstmahmuda11121

图 - Angular 测试 - E2E 测试工具 Cypress 这样做的优点：Cypress 的行为就像拦截器或代理。赛普拉斯可以监控、操纵和模拟来自被测应用程序的所有通信。 所有 E2E 工具的共同点是它们不是为特定的 JavaScript 框架构建的。您可以使用它来测试任何网络应用程序。 如何在我的 Angular 应用程序中使用 Cypress？ 我从一个新启动的 Angular 项目（ ng new cypress-test ）开始。 Cypress 是独立于框架的，这意味着所有网站都可以用它进行测试，它不必是 Angular 应用程序。 使用 Angular，您拥有一个巨大的优势，即通过 CLI，您可以完全自动地从 Protractor（作为标准 E2E 测试工具）切换到 Cypress。 先决条件是使用 CLI 版本 6+ 构建的项目。

这只是一个命令并确认您要更换 Protractor。 第一次测试 测试照常进行。 NG E2E 第一次创建 瑞士 电话号码 文件夹结构和一些配置文件。 图 - Angular 测试 - 来自 Cypress 的文件夹结构和配置文件 Fixtures：可以在这里存储模拟数据，然后可以在测试中使用。 集成：这是编写测试的地方。 plugins：可以在此处集成插件（如果需要的话）。 support：在这里您可以编写自己的命令或覆盖现有命令。 然后 Cypress UI 将启动。 图-角度测试 您可以使用“运行所有规范”按钮来运行所有现有测试文件以及其中编写的测试。所有测试文件都列在“集成测试”列表中，您可以选择在此处执行单个测试文件。 到目前为止，我们只有一个文件，但您可以轻松想象组织测试是多么容易：只需将它们移到不同的文件中即可。




赛普拉斯客户端 我们单击“运行所有规范”，Cypress 客户端就会启动。客户端是一个 Electron 应用程序，用于加载我们的网站并运行测试。 客户可以分为三个区域。区域1为报告区域，输出检测结果。如果将鼠标移到已运行的测试上，您可以在区域 2 中看到应用程序中执行的交互。在区域 3，您可以找到地址栏和游乐场。 图 - 角度测试 - Cypress 客户端 如果单击游乐场按钮 - 十字准线 (1)，则会显示游乐场。这里的工具是选择器按钮 (2)。单击后，您现在可以在应用程序中选择一个元素，并建议该元素使用选择器 (3)，并且您可以使用复制按钮 (4) 将整个调用直接保存到剪贴板。 如果您单击了选择器按钮，当您将鼠标悬停在应用程序中的元素上时，您还将收到有关元素的信息 。