在使用 Cypress 进行前端自动化测试时，我们常常需要在测试用例中使用一些数据。为了避免在代码中硬编码数据，我们可以使用 fixtures 来管理测试数据。本文将介绍如何在 Cypress 中使用 fixtures。
什么是 fixtures？
fixtures 是指在测试用例中使用的静态数据，通常是 JSON、XML、CSV 或者其他格式的文件。fixtures 可以帮助我们将测试数据从测试代码中分离出来，使测试用例更加简洁易读。
在 Cypress 中使用 fixtures 非常简单。我们只需要在项目根目录下创建一个名为 fixtures 的文件夹，然后在该文件夹下创建一个或多个 fixtures 文件即可。
例如，我们可以在 fixtures 文件夹下创建一个名为 users.json 的文件，用来存储测试用例中需要用到的用户信息：
// javascriptcn.com 代码示例
[
{
"name": "Alice",
"email": "alice@example.com",
"password": "password123"
},
{
"name": "Bob",
"email": "bob@example.com",
"password": "password456"
}
]接着，我们可以在测试用例中使用 cy.fixture() 方法来读取 fixtures 文件中的数据：
// javascriptcn.com 代码示例
describe('Login', () => {
beforeEach(() => {
cy.visit('/login')
})
it('should log in successfully', () => {
cy.fixture('users').then(users => {
const user = users[0]
cy.get('#email').type(user.email)
cy.get('#password').type(user.password)
cy.get('form').submit()
cy.url().should('eq', '/dashboard')
})
})
})在上面的示例代码中，我们首先使用 cy.fixture() 方法读取 users.json 文件中的数据，然后选择第一个用户进行登录操作，最后断言登录成功后跳转到了 dashboard 页面。
fixtures 的高级用法
除了简单的读取 fixtures 文件之外，Cypress 还提供了一些高级的 fixtures 用法，例如：
动态 fixtures
有时候我们需要根据测试用例的需要动态生成 fixtures 数据，这时可以使用 cy.wrap() 方法将数据包装成一个 Promise，并将其作为 fixture 数据返回：
// javascriptcn.com 代码示例
it('should create a new user', () => {
const user = {
name: 'Charlie',
email: 'charlie@example.com',
password: 'password789'
}
cy.wrap(user).as('newUser')
cy.get('#create-user').click()
cy.get('#name').type('@newUser')
cy.get('#email').type('@newUser')
cy.get('#password').type('@newUser')
cy.get('form').submit()
cy.get('.message').should('contain', 'User created successfully')
})在上面的示例代码中，我们首先定义了一个名为 newUser 的 fixture，然后在测试用例中使用 @newUser 来引用该 fixture。
fixtures 的别名
在测试用例中使用 cy.fixture() 方法读取 fixtures 数据时，我们可以给 fixtures 数据起一个别名，以便在测试用例中更方便地引用：
// javascriptcn.com 代码示例
it('should log in successfully', function () {
cy.fixture('users').as('users')
cy.get('@users').then(users => {
const user = users[0]
cy.get('#email').type(user.email)
cy.get('#password').type(user.password)
cy.get('form').submit()
cy.url().should('eq', '/dashboard')
})
})在上面的示例代码中，我们使用 as() 方法将读取到的 users.json 文件数据起了一个别名 users，然后在测试用例中使用 @users 来引用该 fixture。
总结
使用 fixtures 可以帮助我们更好地管理测试数据，使测试用例更加简洁易读。在 Cypress 中使用 fixtures 非常简单，我们只需要在项目根目录下创建一个名为 fixtures 的文件夹，然后在该文件夹下创建一个或多个 fixtures 文件即可。除了简单的读取 fixtures 文件之外，Cypress 还提供了一些高级的 fixtures 用法，例如动态 fixtures 和 fixtures 的别名。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6561c5e4d2f5e1655dbcc95b