Angular 5中使用Cucumber与Gherkin编写测试遇Undefined错误求助

Got it, let's break down why you're hitting this Cucumber Undefined error in your Angular 5 setup and fix it step by step:

1. First: Match Your Gherkin Step Text Exactly #

The most common cause of this error is a mismatch between the step in your .feature file and the definition in login.step.ts. Cucumber uses exact string matching (including spaces, capitalization, and punctuation) to bind steps to their implementations.

For example, if your Gherkin looks like this:

When I enter the card number in the box

But your step definition is:

When('Enter the card number in the box', function () { ... })

They won't match. Double-check that the string inside When() is 100% identical to the line in your .feature file.

2. Fix Module Import Conflicts #

You're mixing CommonJS (require()) and ES modules (import) in your login.step.ts, which can cause loading issues in Angular's TypeScript environment. Replace the require statement with an ES import for Cucumber:

// Replace this:
const { Given, When, Then, Before } = require('cucumber');

// With this:
import { Given, When, Then, Before } from 'cucumber';

This ensures consistency with Angular's module system and helps Cucumber properly detect your step definitions.

3. Replace the "Pending" Implementation with Actual Angular/Protractor Code #

Returning 'pending' tells Cucumber the step isn't implemented, which can also trigger undefined-like behavior (or mark steps as pending). Replace it with working Protractor code to interact with your login form. Here's a practical example:

import { expect } from 'chai';
import { Given, When, Then, Before } from 'cucumber';
import { browser, by, element, ExpectedConditions } from 'protractor';

When('Enter the card number in the box', async function () {
  // Wait for the card number input to be present (adjust the selector to match your UI)
  const cardInput = element(by.css('input#card-number'));
  await browser.wait(ExpectedConditions.presenceOf(cardInput), 5000, 'Card input timed out');
  
  // Enter a test card number
  await cardInput.sendKeys('4111-1111-1111-1111');
});

• Use async/await because all Protractor browser actions are promise-based.
• Adjust the CSS selector (input#card-number) to match the actual selector of your card number input field.

4. Verify Cucumber Configuration #

Make sure your cucumber.js config file is set up to load your step definition files correctly. Example config:

module.exports = {
  default: [
    '--require-module ts-node/register', // Enable TypeScript support
    '--require src/**/*.step.ts', // Path to your step files (adjust if needed)
    '--format summary'
  ].join(' ')
};

This ensures Cucumber scans all .step.ts files in your src directory for step definitions.

5. Confirm Dependencies Are Compatible #

Angular 5 works best with older, compatible versions of Cucumber and related tools. Ensure your package.json has these dependencies (adjust versions if needed):

{
  "devDependencies": {
    "cucumber": "^4.2.1",
    "protractor-cucumber-framework": "^6.2.0",
    "ts-node": "^7.0.1",
    "chai": "^4.2.0"
  }
}

Run npm install if you've updated these versions.

Walk through these steps one by one, and your Undefined error should be resolved!

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