已编写步骤实现仍提示Step implementation missing的Cypress Cucumber问题

环境说明 #

使用Cypress 10.9.0版本，结合cypress-cucumber-preprocessor进行端到端（E2E）测试。

已编写代码 #

步骤实现代码 #

Given('I am at the portal login page', () => {
    cy.visit(Cypress.env("newPortalWeb_login"), { timeout: 100000 });
})

When('I enter an invalid username on the login page', () => {
    cy.get('#username').type('portal').invoke('removeAttr', 'value').click({ force: true }, { timeout: 30000 })
    cy.get('#password').type('SwY66bc3VZLUFR9')
    cy.get('[type="submit"]').click()
})

Then('an error message is displayed with the text Invalid username/password', () => {
    cy.get(".invalid").should('contain.text', 'Invalid username/password')
})

When('I enter an invalid password on the login page', () => {
    cy.get('#username').type('portaluser')
    cy.get('#password').type('Srntrhn$')
    cy.get('[type="submit"]').click()
})

对应的Feature文件 #

Feature: Login

    Scenario: #1 Test Invalid Username / Invalid Password / Empty Username / Valid Username and Empty Password
        Given I am at the portal login page
        When I enter an invalid username on the login page
        Then an error message is displayed with the text Invalid username/password
        When I enter an invalid password on the login page
        Then an error message is displayed with the text Invalid username/password
        When I enter a valid username with an empty password on the login page
        Then an error message is displayed with the text Please enter your password
        When I enter an empty username with a valid password on the login page
        Then an error message is displayed with the text Please enter your username
        When I enter an empty username with an empty password on the login page
        Then an error message is displayed with the text Please enter your username
        And an error message is displayed with the text Please enter your password

问题描述 #

运行测试时提示“Step implementation missing”错误，错误截图如下：

问题原因及解决方案 #

核心原因 #

Feature文件中存在多个未实现的步骤，具体包括：

• When I enter a valid username with an empty password on the login page
• Then an error message is displayed with the text Please enter your password
• When I enter an empty username with a valid password on the login page
• Then an error message is displayed with the text Please enter your username
• And an error message is displayed with the text Please enter your password

这些步骤没有对应的代码实现，导致Cypress无法匹配执行逻辑。

解决方案 #

1. 补充缺失的步骤实现：在步骤文件中添加对应代码，示例如下：

// 输入有效用户名+空密码
When('I enter a valid username with an empty password on the login page', () => {
    cy.get('#username').type('portaluser')
    cy.get('#password').clear()
    cy.get('[type="submit"]').click()
})

// 验证"请输入密码"提示
Then('an error message is displayed with the text Please enter your password', () => {
    cy.get(".invalid").should('contain.text', 'Please enter your password')
})

// 输入空用户名+有效密码
When('I enter an empty username with a valid password on the login page', () => {
    cy.get('#username').clear()
    cy.get('#password').type('SwY66bc3VZLUFR9')
    cy.get('[type="submit"]').click()
})

// 验证"请输入用户名"提示
Then('an error message is displayed with the text Please enter your username', () => {
    cy.get(".invalid").should('contain.text', 'Please enter your username')
})

// 空用户名+空密码场景的And步骤
And('an error message is displayed with the text Please enter your password', () => {
    cy.get(".invalid").should('contain.text', 'Please enter your password')
})

2. 检查配置正确性：确保cypress-cucumber-preprocessor的配置正确，步骤文件路径被Cypress识别。在cypress.config.js中需正确配置预处理程序，示例：

const { defineConfig } = require("cypress");
const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");
const addCucumberPreprocessorPlugin = require("@badeball/cypress-cucumber-preprocessor").addCucumberPreprocessorPlugin;
const createEsbuildPlugin = require("@badeball/cypress-cucumber-preprocessor/esbuild").createEsbuildPlugin;

module.exports = defineConfig({
  e2e: {
    async setupNodeEvents(on, config) {
      const bundler = createBundler({
        plugins: [createEsbuildPlugin(config)],
      });
      on("file:preprocessor", bundler);
      await addCucumberPreprocessorPlugin(on, config);
      return config;
    },
    specPattern: "cypress/e2e/**/*.feature",
  },
});

3. 步骤匹配注意事项：确保步骤文本完全匹配（包括大小写、空格），避免因文本不一致导致无法识别。

内容的提问来源于stack exchange，提问作者Mehmet Şirin Tarhan