Cypress 自动化测试实战 — 实现一个购物车功能-JavaScript中文网-JavaScript教程资源分享门户

前言

随着互联网技术的发展，前端开发越来越重要，同时也需要保证前端代码的质量和可靠性。而自动化测试是保证前端代码质量和可靠性的重要方法之一。本文将介绍如何使用 Cypress 自动化测试实现一个购物车功能，帮助读者更好地理解 Cypress 自动化测试的使用方法和技巧。

Cypress 简介

Cypress 是一个基于 JavaScript 的前端自动化测试框架，它可以运行在浏览器中，提供了直观的用户界面和强大的 API，可以对 Web 应用进行自动化测试。Cypress 的特点是易于使用、快速稳定、可靠性高、调试方便等。

实现一个购物车功能

项目结构

我们先来看一下本次购物车功能的项目结构：

// javascriptcn.com 代码示例
├── cypress
│   ├── fixtures
│   │   └── example.json
│   ├── integration
│   │   └── shoppingCart.spec.js
│   ├── plugins
│   │   └── index.js
│   └── support
│       ├── commands.js
│       └── index.js
├── cypress.json
└── package.json

在 cypress 目录下，我们可以看到 fixtures、integration、plugins 和 support 四个子目录，分别用于存放测试数据、测试用例、插件和支持文件。

编写测试用例

在 integration 目录下，我们可以新建一个 shoppingCart.spec.js 文件，用于编写购物车功能的测试用例。以下是一个简单的购物车功能测试用例：

// javascriptcn.com 代码示例
describe('Shopping Cart', () => {
  beforeEach(() => {
    cy.visit('/')
  })

  it('should add item to cart', () => {
    cy.get('.product-item').first().click()
    cy.get('.add-to-cart-button').click()
    cy.get('.cart-count').contains('1')
  })

  it('should remove item from cart', () => {
    cy.get('.product-item').first().click()
    cy.get('.add-to-cart-button').click()
    cy.get('.cart-count').contains('1')
    cy.get('.remove-from-cart-button').click()
    cy.get('.cart-count').contains('0')
  })

  it('should update cart item quantity', () => {
    cy.get('.product-item').first().click()
    cy.get('.add-to-cart-button').click()
    cy.get('.cart-count').contains('1')
    cy.get('.cart-item-quantity').type('{backspace}2')
    cy.get('.update-cart-button').click()
    cy.get('.cart-item-quantity').contains('2')
  })
})

在这个测试用例中，我们分别测试了添加商品到购物车、从购物车中删除商品和更新购物车商品数量等功能。

编写页面代码

为了方便测试，我们需要编写一个简单的购物车功能页面。以下是一个简单的购物车功能页面：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Shopping Cart</title>
</head>
<body>
  <div class="product-list">
    <div class="product-item">
      <h2>Product 1</h2>
      <button class="add-to-cart-button">Add to Cart</button>
    </div>
    <div class="product-item">
      <h2>Product 2</h2>
      <button class="add-to-cart-button">Add to Cart</button>
    </div>
    <div class="product-item">
      <h2>Product 3</h2>
      <button class="add-to-cart-button">Add to Cart</button>
    </div>
  </div>
  <div class="cart">
    <h2>Cart</h2>
    <p>Items: <span class="cart-count">0</span></p>
    <ul class="cart-items"></ul>
  </div>
  <script>
    let cartItems = []

    function updateCart() {
      const cartItemsEl = document.querySelector('.cart-items')
      const cartCountEl = document.querySelector('.cart-count')
      cartItemsEl.innerHTML = ''
      cartCountEl.textContent = cartItems.length
      cartItems.forEach(item => {
        const liEl = document.createElement('li')
        liEl.textContent = `${item.name} × ${item.quantity}`
        const removeButtonEl = document.createElement('button')
        removeButtonEl.classList.add('remove-from-cart-button')
        removeButtonEl.textContent = 'Remove'
        removeButtonEl.setAttribute('data-name', item.name)
        removeButtonEl.addEventListener('click', () => {
          cartItems = cartItems.filter(i => i.name !== item.name)
          updateCart()
        })
        const quantityInputEl = document.createElement('input')
        quantityInputEl.classList.add('cart-item-quantity')
        quantityInputEl.type = 'number'
        quantityInputEl.min = 1
        quantityInputEl.value = item.quantity
        const updateButtonEl = document.createElement('button')
        updateButtonEl.classList.add('update-cart-button')
        updateButtonEl.textContent = 'Update'
        updateButtonEl.setAttribute('data-name', item.name)
        updateButtonEl.addEventListener('click', () => {
          const quantity = parseInt(quantityInputEl.value)
          const foundIndex = cartItems.findIndex(i => i.name === item.name)
          cartItems[foundIndex].quantity = quantity
          updateCart()
        })
        liEl.appendChild(removeButtonEl)
        liEl.appendChild(quantityInputEl)
        liEl.appendChild(updateButtonEl)
        cartItemsEl.appendChild(liEl)
      })
    }

    document.querySelectorAll('.add-to-cart-button').forEach(button => {
      button.addEventListener('click', () => {
        const productItemEl = button.closest('.product-item')
        const productName = productItemEl.querySelector('h2').textContent
        const foundItem = cartItems.find(item => item.name === productName)
        if (foundItem) {
          foundItem.quantity++
        } else {
          cartItems.push({ name: productName, quantity: 1 })
        }
        updateCart()
      })
    })
  </script>
</body>
</html>

在这个页面中，我们实现了添加商品到购物车、从购物车中删除商品和更新购物车商品数量等功能。同时，我们还使用了 querySelector、closest、addEventListener 等 DOM API，这些 API 在 Cypress 中也可以很方便地使用。

运行测试用例

在 package.json 中，我们可以添加以下脚本，用于运行 Cypress 测试：

{
  "scripts": {
    "test": "cypress run"
  }
}

然后，在终端中运行 npm run test 命令，即可运行 Cypress 测试。Cypress 会自动打开一个浏览器窗口，并执行测试用例。测试用例执行完成后，Cypress 会给出测试结果和错误信息，方便我们进行调试和修复。

总结

本文介绍了如何使用 Cypress 自动化测试实现一个购物车功能，并对 Cypress 的使用方法和技巧进行了详细的说明。通过本文的学习，读者可以更好地掌握 Cypress 自动化测试的使用方法和技巧，提高前端代码的质量和可靠性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6556d138d2f5e1655d12fb43