如何在Cypress与Cucumber中将完整场景封装为前置Given步骤

嘿，我完全懂你想要的效果——把那个完整的前置流程封装成一个简洁的Given步骤，这样后续测试场景不用重复写一堆步骤，可读性还强对吧？这在Cypress + Cucumber的组合里完全可以实现，咱们一步步来：

方法一：封装成可复用的Given步骤（最灵活） #

这种方式允许你在任意需要的场景里单独调用这个前置流程，不会影响其他不需要的场景，比用before()钩子要直观得多。

1. 先把原有步骤的逻辑提取成独立函数

首先，把你已有的步骤定义里的业务逻辑抽出来，做成可复用的函数——这样不管是原有步骤还是新的封装步骤，都能调用这些逻辑，避免代码重复：

// 提取登录逻辑
const submitUserCredentials = (userType) => {
  let user = userType === 'valid' ? testUser1 : new User('test@test.test', 'test1234')
  userLogin(user)
}

// 验证仪表盘是否可见
const verifyDashboardIsVisible = () => {
  homepage.mainHome().should('be.visible')
}

// 导航到Manage Things页面
const navigateToManageThingsPage = () => {
  homepage.homeThings().click()
  homepage.thingsManageThings().click()
  cy.get('.form-header').should('contain', 'Things')
}

// 执行通用搜索操作
const performGenericThingSearch = () => {
  thingsMenu.manageThingsSearch().click()
  thingsMenu.manageThingsTable().should('be.visible')
}

2. 更新原有步骤定义调用这些函数

把原来的步骤定义改成调用上面的函数，保持原有步骤的可用性：

Given('I have submitted {string} user credentials', (userType)=>{
  submitUserCredentials(userType)
})

When('I am taken to the dashboard', ()=>{
  verifyDashboardIsVisible()
})

And('I navigate to Manage Things', () =>{
  navigateToManageThingsPage()
})

Then('I make a generic search for things', () =>{
  performGenericThingSearch()
})

3. 创建新的封装Given步骤

现在就可以写你想要的那个简洁的Given步骤了，里面按顺序调用所有前置逻辑：

Given('A valid user can navigate to & Search Things', () => {
  // 按顺序执行完整的前置流程
  submitUserCredentials('valid')
  verifyDashboardIsVisible()
  navigateToManageThingsPage()
  performGenericThingSearch()
})

4. 在新场景里使用这个封装步骤

现在你的.feature文件就可以写成非常简洁的样子：

Scenario: Edit the first thing in the list
  Given A valid user can navigate to & Search Things
  When I select edit on the first thing
  Then I should see the edit thing form

Scenario: View details of a specific thing
  Given A valid user can navigate to & Search Things
  When I click on the third thing in the list
  Then I should see the thing details page

方法二：使用Cucumber Background（适合同文件内批量场景） #

如果你的多个场景都需要这个前置流程，而且都在同一个.feature文件里，也可以用Cucumber的Background关键字，它会在该文件内的每个场景执行前自动运行：

Background:
  Given I have submitted "valid" user credentials
  When I am taken to the dashboard
  And I navigate to Manage Things
  Then I make a generic search for things

Scenario: Edit the first thing in the list
  When I select edit on the first thing
  Then I should see the edit thing form

Scenario: Delete the second thing in the list
  When I select delete on the second thing
  Then I should see the confirmation dialog

为什么before()钩子不适合你的需求？ #

你提到之前尝试过before()，它确实能在场景前执行代码，但有几个明显的问题：

• 不直观：场景本身的描述里看不到前置操作，其他维护者看.feature文件时，不知道before()里做了什么，降低了可读性。
• 灵活性差：before()会对当前文件的所有场景生效，如果你有部分场景不需要这个完整的前置流程，就会导致冗余执行甚至测试失败。
• 和Cucumber的步骤体系脱节：before()是Mocha的钩子，不属于Cucumber的步骤定义体系，调试和维护起来不如统一用Cucumber步骤方便。

内容的提问来源于stack exchange，提问作者kkibbey96