Angular Cypress 示例：使用 Cypress 测试 Angular App

介绍

我们使用不同的技术构建一个好的网站，例如 React、Angular 和其他现代技术。在测试方面，客户希望进行单元测试或端到端测试。因此，在今天的 Angular Cypress 示例中，您将学习如何在角度应用程序中设置名为 CYPRESS 的端到端测试框架，并编写一些基本测试用例。

什么是赛普拉斯？

Cypress 是一个用于网站测试的端到端自动化测试框架。如果你的项目需要做自动化测试，可以从cypress入手。JavaScript 的使用使赛普拉斯自动化对开发人员特别有吸引力。

教程目标：使用 Angular 12 的 Cypress

在开发应用程序之前，让我们看看我们将构建什么。观看下面的视频以了解我们的演示应用程序的外观。Angular Cypress 示例：项目设置

在我们开始我们的 angular cypress 示例并开始编写测试用例之前，我们将克隆存储库。存储库包含样板文件，我们将在其中添加代码以稍后测试应用程序。如果您愿意，您也可以使用您的项目。

打开终端并运行以下命令以在本地系统中设置项目。

在 Angular 项目中安装 Cypress

首先，我们需要在我们的应用程序中添加 cypress，因此使用以下命令在我们的 master 分支中添加 cypress。

上面的命令将使用一些文件设置基本的必需配置，并创建一个sepc.ts文件作为样本 cypress 测试文件。

检查赛普拉斯测试用例

单击spec.ts文件，它将运行该文件的赛普拉斯测试用例。

共享规范成功/失败报告

它将在终端中运行并共享规范成功和失败报告。

使用 Cypress 测试 Angular 应用程序

我们现在将看到如何使用 cypress 及其方法编写实际的 cypress 测试用例。所以我希望现在你对这个项目和柏树的设置都很好，让我们在柏树上动手吧。

在 cypress 中有多种方法可以访问应用程序的特定 URL。我们可以选择元素，例如我们如何使用文档.getElementById方法并检查断言。

这类似于编写规范的单元测试，就像我们需要编写描述一样，在其中，我们需要使用其方法编写规范，如下所示。

describe('我的第一个测试', () =>{
  it('访问初始项目页面', () =>{
    cy.visit('/')
    cy.contains（'欢迎'）
    cy.contains（'沙盒应用程序正在运行！'）
  })})

但是在这里，一件重要的事情是您不需要导入任何东西，例如服务或任何依赖项，我们通常在单元测试中这样做。

Angular 中的单元测试可以参考之前的博客，对你很有帮助。使用 Jasmine 和 Karma 在 Angular 中进行单元测试（第 1 部分）和在 Angular 中使用 Jasmine 和 Karma 进行单元测试（第 2 部分）

我们将在我们的 cypress angular 示例中编写以下两个测试用例：

• 访问登录页面。

• 要输入有效的电子邮件地址和密码，稍后重定向到仪表板。

第一个测试用例：应该访问登录页面

// 规格.tsdescribe( '我的第一个测试', () =>{
  it('应该访问登录页面', ()={
    cy.visit('/登录');
   cy.url().should('包含', '登录')
    cy.get('#loginFormTitle').should ('be.visible');
    cy.get('#loginFormTitle').should ('have.text', '登录表单');
  })})

如果我们修改上图中提到的现有测试用例，并按照博客前面所述的那样单击 spec.ts，它将给出如下图所示的输出以及成功的测试用例。

• 我们在测试用例中所写的内容是什么意思？

cy.visit('/登录');

➡ 它将访问/重定向到给定的 URL。例如，cy.visit('/注册');会自动访问注册页面。

cy.url().should('包含', '登录')

➡ 它将检查应该重定向该 URL 的页面是否包含登录作为关键字。例如，如果我们将使用cy.url().should('includes', 'login1');而不是提到的内容，然后它会给出如下图所示的错误。然后它将停止执行该规范。

cy.get('#loginFormTitle').should('be.visible');

• 使用cy.get()方法，我们可以按照访问它的方式获取元素“document.getelementbyid(#id)”在 JS 中。

• 我们可以使用类、id 访问特定元素。更好的做法是仅使用 id 获取元素。

• 我那个元素将在 DOM 中，然后它将是可见的，我们可以使用 should() 方法检查它的柏树断言.should('be.visible');如果它在 dom 中不存在，那么我们可以使用.should('not.exist');例如，如何为下图添加 not.exit。// 规格.tsdescribe('我的第一个测试', () =>{

 it('应该访问登录页面', () =>{
    cy.visit('/登录');
    cy.url().should('包括', '登录');
    cy.get('#loginFormTitle').should('be.visible');
    cy.get('#loginFormTitle').should ('have.text', '登录表单');
    cy.get('#loginFormEmailInputValue').should('not.exist');
    cy.get('#loginFormPasswordInputValue').should('not.exist');
 })});

第二个测试用例：应输入有效的电子邮件和密码。重定向到仪表板

现在我们将在 angular cypress 示例中编写我们的第二个测试用例，即输入有效的电子邮件/密码，然后将用户重定向到仪表板。

// 规格.ts它应该输入有效的电子邮件和密码并重定向到仪表板', ()>{
  cy.visit('/登录');
  cy.url().should ('包含', '登录');
  cy.get('#loginFormEmailInput').type('parthagmail.com);
  cy.get('#loginFormPasswordInput').type(' Parth@123 ');
  cy.get('#loginFormSubmitButton').click();
  cy.get('#loginFormEmailInputValue').should 'be.visible');
  cy.get ('#loginFormEmailInputValue').should( 'have.text', 'Email: parth@gmail.com ');
  cy.get ('#loginFormPasswordInputValue').should('be.visible');
  cy.get('#loginFormPasswordInputValue').should('have.text', '密码: Parth@123 ');});

现在，既然你对这个 type() 和 click() 方法非常熟悉，我就不需要解释了，不是吗？

Github 存储库：Cypress 和 Angular 教程

只需访问存储库下方并设置项目。

Github 源代码：angular-cypress-example

git 克隆 https://github.com/bacancy-parthsardhara/cypress-testing-angular.gitcd cypress-testing-angularnpm 安装ng s -o

结论

（言鼎科技）