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

一、引言

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，然后添加以下代码：

1. describe('Login Page', () => {

2. it('successfully loads', () => {

3. cy.visit('/login') // change URL to match your login page

4. })

5. })

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

五、添加更多的测试

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

1. describe('Login Page', () => {

2. it('successfully logs in', () => {

3. cy.visit('/login')

4. cy.get('input[name=username]').type('testuser')

5. cy.get('input[name=password]').type('password123{enter}')

6. cy.url().should('include', '/dashboard')

7. cy.get('h1').should('contain', 'Welcome, testuser')

8. })

9. })

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

六、运行你的测试

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

npx cypress open

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

八、进阶Cypress

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

1. 测试前置条件：Cypress提供了before和beforeEach函数，你可以在这些函数中设置测试的前置条件，例如登录用户或设置应用状态。

   1. describe('Profile Page', () => {

   2. beforeEach(() => {

   3. cy.visit('/login')

   4. cy.get('input[name=username]').type('testuser')

   5. cy.get('input[name=password]').type('password123{enter}')

   6. cy.url().should('include', '/dashboard')

   7. })

   8. it('displays user profile', () => {

   9. cy.visit('/profile')

   10. cy.get('h1').should('contain', 'Profile')

   11. cy.get('p').should('contain', 'Username: testuser')

   12. })

   13. })

2. 存根和拦截网络请求：Cypress允许你存根和拦截网络请求，这使得你可以在测试中控制服务端的行为。

3. cy.intercept('POST', '/login', {

4. statusCode: 200,

5. body: { status: 'success' }

6. })

7. cy.get('button[type=submit]').click()

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

9. Cypress.Commands.add('login', (username, password) => {

10. cy.visit('/login')

11. cy.get('input[name=username]').type(username)

12. cy.get('input[name=password]').type(`${password}{enter}`)

13. cy.url().should('include', '/dashboard')

14. })

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

1. cy.login('testuser', 'password123')

2. 通过这种方式，你可以提高你的测试代码的可读性和可维护性。

九、结语

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

最后作为一位过来人也是希望大家少走一些弯路，在这里我给大家分享一些软件测试的学习资料和我花了3个月整理的软件测试自学全栈，这些资料希望能给你前进的路上带来帮助。

​视频文档获取方式：
这份文档和视频资料，对于想从事【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！以上均可以分享，点下方小卡片即可自行领取。