手把手教你使用Cypress进行端到端测试

灰太狼 2023-10-12 15:08 17阅读 0赞

### **一、引言** ###

Cypress是一个流行的端到端测试框架，它提供了一个全面的解决方案，可以测试任何在浏览器中运行的内容。不论你是想为一个小型项目添加测试，还是在大型企业级应用中进行端到端测试，Cypress都是一个不错的选择。本文将会手把手教你如何使用Cypress进行端到端测试。

### **二、Cypress简介** ###

Cypress提供了一个简洁而易于理解的API，你可以用它编写所有类型的测试：端到端测试、集成测试、以及单元测试。Cypress还提供了一些独特的特性，如实时重载、自动等待、网络流量控制等，让你的测试更加直观、稳定。

### **三、Cypress安装** ###

首先，我们需要在项目中安装Cypress。确保你已经安装了Node.js，然后在你的项目根目录下运行以下命令：

npm install cypress --save-dev

这会将Cypress添加到你的项目的`devDependencies`中。

### **四、创建你的第一个Cypress测试** ###

Cypress测试使用Mocha的语法，并使用Chai库的断言。以下是一个简单的Cypress测试示例，我们将测试一个登录页面。

首先，在`cypress/integration`目录下创建一个新的文件，例如`login_spec.js`，然后添加以下代码：

describe('Login Page', () => {
      it('successfully loads', () => {
        cy.visit('/login') // change URL to match your login page
      })
    })

这个测试只是简单地访问我们的登录页面，并检查它是否成功加载。

### **五、添加更多的测试** ###

接下来，我们将添加更多的测试来检查登录页面的功能。比如，我们可以测试用户是否能够成功登录：

describe('Login Page', () => {
      it('successfully logs in', () => {
        cy.visit('/login')
    
        cy.get('input[name=username]').type('testuser')
        cy.get('input[name=password]').type('password123{enter}')
    
        cy.url().should('include', '/dashboard')
        cy.get('h1').should('contain', 'Welcome, testuser')
      })
    })

这个测试首先访问登录页面，然后在用户名和密码输入框中输入数据，最后按Enter提交表单。然后，我们检查新的URL是否包含`/dashboard`，并检查页面上是否出现了欢迎信息。

### **六、运行你的测试** ###

要运行你的测试，你可以使用Cypress的图形界面，只需在项目根目录下运行以下命令：

npx cypress open

然后，你可以在打开的Cypress窗口中选择你想要运行的测试文件。

### **八、进阶Cypress** ###

在你熟悉了Cypress的基础用法后，还可以探索Cypress的一些进阶特性，如：

1.  **测试前置条件：Cypress提供了`before`和`beforeEach`函数，你可以在这些函数中设置测试的前置条件，例如登录用户或设置应用状态。**
    
        describe('Profile Page', () => {
          beforeEach(() => {
            cy.visit('/login')
        
            cy.get('input[name=username]').type('testuser')
            cy.get('input[name=password]').type('password123{enter}')
            
            cy.url().should('include', '/dashboard')
          })
        
          it('displays user profile', () => {
            cy.visit('/profile')
        
            cy.get('h1').should('contain', 'Profile')
            cy.get('p').should('contain', 'Username: testuser')
          })
        })
2.  **存根和拦截网络请求：Cypress允许你存根和拦截网络请求，这使得你可以在测试中控制服务端的行为。**

cy.intercept('POST', '/login', {
      statusCode: 200,
      body: { status: 'success' }
    })
    
    cy.get('button[type=submit]').click()

1.  **自定义命令：如果你发现自己在多个测试中重复相同的操作，你可以使用Cypress的自定义命令来重用这些操作。**

Cypress.Commands.add('login', (username, password) => {
      cy.visit('/login')
    
      cy.get('input[name=username]').type(username)
      cy.get('input[name=password]').type(`${password}{enter}`)
    
      cy.url().should('include', '/dashboard')
    })

**然后，在你的测试中就可以直接使用这个命令进行登录：**

cy.login('testuser', 'password123')
    
    通过这种方式，你可以提高你的测试代码的可读性和可维护性。

### 九、结语 ###

**希望本文能帮助你入门Cypress，并开始编写自己的端到端测试。记住，良好的测试是提高软件质量、降低错误和提升开发效率的关键。而使用Cypress等强大的工具，可以使编写和运行这些测试变得更加简单和高效。**

**最后：**下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取**【保证100%免费】**

![8b0171187dce405e878f274a8cdd9ec0.png][]

#### **软件测试面试文档** ####

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

![a3e4226c935c4242804cbdf26b571bc6.png][]

#### **全部资料获取** ####

![20bfdbcca94a4ae5bf95ae05574cd876.gif][]

[8b0171187dce405e878f274a8cdd9ec0.png]: https://img-blog.csdnimg.cn/8b0171187dce405e878f274a8cdd9ec0.png
[a3e4226c935c4242804cbdf26b571bc6.png]: https://img-blog.csdnimg.cn/a3e4226c935c4242804cbdf26b571bc6.png
[20bfdbcca94a4ae5bf95ae05574cd876.gif]: https://img-blog.csdnimg.cn/20bfdbcca94a4ae5bf95ae05574cd876.gif