如何在我的 Angular 应用程序中使用 Cypress

mstmahmuda11121

图 - Angular 测试 cypress-test 应用程序正在运行！ 到代码 好吧， 我们已经用第一个测试的标题定义了一个测试用例 a。 我们进入应用程序的主页。 我们正在寻找包含我们预期文本的跨度。 就是这么简单。 如果查找元素不太容易，Cypress 客户端会向我们提供选择器按钮作为帮助。 我们在记者区看到测试是绿色的。如果您现在将鼠标移到测试的第 2 行上，您将看到应用程序中找到的所有跨度。 如果搜索到的文本不存在跨度，则会出现超时和错误。 与元素交互 通过.get()找到的任何元素都可以接收操作。这些是用户可以执行的常见操作（例如单击或输入文本）。 以下是操作列表现在我们要编写第二个测试。 当您单击后续步骤之一时，显示屏上应显示特定的输出（看起来像控制台）。 因此，我们首先创建一个新的 i t()，其标题为： 图 - 角度测试 - new it() 到代码 现在让我们测试所有“后续步骤”按钮。 我为所有“后续步骤”和相关消息构建了一个小对象。


图 - 角度测试 - 所有“后续步骤”的小对象 到代码 我现在想要迭代这个对象并 瑞士 电话号码 在每次迭代中运行测试。 图 - 角度测试 - 在每次迭代中运行测试 到代码 这样我就已经确保了按钮的存在。现在我必须检查是否显示了预期的文本。 为此，我们必须获取元素并检查其内容。 然后我们也会进行这个测试。 这是完整的it 图 - 角度测试 - 完成它() 到代码 别名 使用 Cypress，我们可以选择将元素存储为别名，以便可以多次访问它们。我们使用方法创建别名，然后可以使用.get('@myAlias')方法访问它。前面的 为 Cypress 提供了重要指示，表明这是一个别名。 您可以在beforeEach()中执行此操作。 图 - 角度测试 - beforeEach() 到代码 现在我们可以在上次的书面测试中使用这个别名。 图 - Angular 测试代码示例 到代码 我们的应用程序非常有限，但在实际项目中，您将需要填写并提交表单。 测试可能如下所示： 图 - 角度测试示例 到代码 HTTP 调用 我们还可以检查发送数据是否有效。




为此，我们需要激活服务器模块中包含的功能。 该模块提供了监视、操作或响应所有 HTTP 通信的能力。 这意味着我们不需要处理后端。 首先必须启动服务器模块，这也发生在beforeEach()中。 cy.server(); 我仍然可以选择将各种配置传递到服务器。此信息可以在文档中找到。 现在，如果我们想“模拟”一个端点，这非常容易。为此定义了一条路线： 图 - 角度测试 - “模拟”端点 到代码 我们看到这个API变化很大。 下面是一个例子： 只要响应好而且小，直接写在mock中也是可以的（注意，个人意见！）。但这很少符合真实的开发人员生活。为此，赛普拉斯提供了使用文件形式的模拟数据作为响应的选项。 这就是cypress\fixtures文件夹的用途。我可以在此处存储文件，然后将其用作响应。这是一个。