手把手教你使用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')

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

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

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

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

10. })

11. })

这个测试首先访问登录页面，然后在用户名和密码输入框中输入数据，最后按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')

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

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

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

   9. })

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

   12. cy.visit('/profile')

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

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

   16. })

   17. })

   ​​​​​​​

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

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

2. statusCode: 200,

3. body: { status: 'success' }

4. })

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

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

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

2. cy.visit('/login')

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

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

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

8. })

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

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

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

九、结语

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

感谢每一个认真阅读我文章的人，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走：

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你!有需要的小伙伴可以点击下方小卡片领取