前言
在前端开发过程中，测试是至关重要的一环。然而，手动测试的效率低下、覆盖率不足等问题都会导致测试效果并不理想。因此，自动化测试对于提高测试效率、保证代码质量等方面有着重要的作用。本文将介绍一种非 UI 自动化测试神器——Cypress，并提供详细的使用笔记、实际应用案例，希望能对前端自动化测试感兴趣的读者有所启发。
Cypress 简介
Cypress 是一款适用于现代 web 应用的开源自动化测试工具，同时 Cypress 还是一个端到端的测试框架，支持跨平台桌面应用程序的自动化控制。Cypress 使用简单且易于使用，它提供了一个完整的 API，可以直接与您的应用程序进行交互，不需要 Selenium 或 WebDriver 等第三方工具。另外，Cypress 能够做到快速的测试运行速度、实时查看测试结果与报告等特性。
安装及使用
Cypress 的安装流程非常简单，只需要在全局环境下安装即可：
npm install cypress --save-dev
安装完成之后，在项目根目录下运行如下命令即可启动 Cypress：
$(npm bin)/cypress open
Cypress 的使用十分直观，我们可以在界面上直接选择测试文件进行测试，也可以通过命令行启动测试，这里我们以命令行方式为例：
$(npm bin)/cypress run --spec cypress/integration/test.spec.js
以上命令表示运行位于 cypress/integration/test.spec.js 文件中的测试用例。
实战
下面我们将通过一个实际的案例来详细讲解 Cypress 的使用。
以 Vue.js 框架为例，我们写一个计算器组件并编写自动化测试用例。首先，我们写好计算器组件如下：
// www.javascriptcn.com code example
<template>
<div class="calculator">
<div class="display">{{ displayValue }}</div>
<div class="buttons">
<button @click="input('7')">7</button>
<button @click="input('8')">8</button>
<button @click="input('9')">9</button>
<button @click="clear()">C</button>
<button @click="input('4')">4</button>
<button @click="input('5')">5</button>
<button @click="input('6')">6</button>
<button @click="input('+')">+</button>
<button @click="input('1')">1</button>
<button @click="input('2')">2</button>
<button @click="input('3')">3</button>
<button @click="input('-')">-</button>
<button @click="input('.')">.</button>
<button @click="input('0')">0</button>
<button @click="calculate()">=</button>
<button @click="input('*')">*</button>
<button @click="input('/')">/</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
displayValue: '0',
waitingForOperand: false,
operator: null,
buffer: '0',
}
},
methods: {
clear() {
this.displayValue = '0'
this.waitingForOperand = false
this.operator = null
this.buffer = '0'
},
input(value) {
if (this.waitingForOperand) {
this.displayValue = value
this.waitingForOperand = false
} else {
this.displayValue = this.displayValue === '0' ? value : this.displayValue + value
}
},
calculate() {
const currentValue = parseFloat(this.displayValue)
if (this.operator === '+') {
const newValue = parseFloat(this.buffer) + currentValue
this.buffer = newValue.toString()
} else if (this.operator === '-') {
const newValue = parseFloat(this.buffer) - currentValue
this.buffer = newValue.toString()
} else if (this.operator === '*') {
const newValue = parseFloat(this.buffer) * currentValue
this.buffer = newValue.toString()
} else if (this.operator === '/') {
const newValue = parseFloat(this.buffer) / currentValue
this.buffer = newValue.toString()
}
this.operator = null
this.displayValue = this.buffer
this.waitingForOperand = true
},
},
}
</script>
<style lang="scss">
.calculator {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
width: 300px;
margin: 20px auto;
display: flex;
flex-direction: column;
.display {
background-color: #eee;
padding: 10px;
text-align: right;
font-size: 24px;
height: 40px;
border: none;
outline: none;
}
.buttons {
display: flex;
flex-wrap: wrap;
button {
width: 25%;
height: 50px;
background-color: #333;
color: #fff;
font-size: 20px;
border: none;
outline: none;
&:hover {
cursor: pointer;
background-color: #666;
}
&:active {
background-color: #eee;
color: #333;
}
}
}
}
</style>然后，我们编写以下测试用例：
// www.javascriptcn.com code example
describe('Calculator', () => {
beforeEach(() => {
cy.visit('/') // 访问 Vue.js 应用的首页
})
it('should display 0 on startup', () => {
cy.get('.calculator .display').should('have.text', '0')
})
it('should display number', () => {
cy.get('.calculator .buttons button').contains('7').click()
cy.get('.calculator .display').should('have.text', '7')
})
it('should display decimal point', () => {
cy.get('.calculator .buttons button').contains('.').click()
cy.get('.calculator .display').should('have.text', '0.')
})
it('should clear the display', () => {
cy.get('.calculator .buttons button').contains('7').click()
cy.get('.calculator .buttons button').contains('C').click()
cy.get('.calculator .display').should('have.text', '0')
})
it('should perform addition', () => {
cy.get('.calculator .buttons button').contains('7').click()
cy.get('.calculator .buttons button').contains('+').click()
cy.get('.calculator .buttons button').contains('3').click()
cy.get('.calculator .buttons button').contains('=').click()
cy.get('.calculator .display').should('have.text', '10')
})
it('should perform subtraction', () => {
cy.get('.calculator .buttons button').contains('7').click()
cy.get('.calculator .buttons button').contains('-').click()
cy.get('.calculator .buttons button').contains('3').click()
cy.get('.calculator .buttons button').contains('=').click()
cy.get('.calculator .display').should('have.text', '4')
})
it('should perform multiplication', () => {
cy.get('.calculator .buttons button').contains('7').click()
cy.get('.calculator .buttons button').contains('*').click()
cy.get('.calculator .buttons button').contains('3').click()
cy.get('.calculator .buttons button').contains('=').click()
cy.get('.calculator .display').should('have.text', '21')
})
it('should perform division', () => {
cy.get('.calculator .buttons button').contains('7').click()
cy.get('.calculator .buttons button').contains('/').click()
cy.get('.calculator .buttons button').contains('3').click()
cy.get('.calculator .buttons button').contains('=').click()
cy.get('.calculator .display').should('have.text', '2.3333333333333335')
})
})运行以上测试用例后，我们可以看到每个测试的结果，根据测试结果进行相应的修复即可，测试用例覆盖率将决定项目的质量。
结语
本文介绍了一种非 UI 自动化测试神器——Cypress，以 Vue.js 框架为例编写了自动化测试用例并演示了测试执行过程。Cypress 具有良好的易用性、高效的测试运行速度、实时查看测试结果与报告等特点，支持跨平台桌面应用程序的自动化控制。希望能够对前端自动化测试有所启示和指导，以提高我们的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6aff8a941bf7134c813ca