如何在Cucumber中复用步骤表达式？

你碰到的Multiple step definitions match错误，根源是Cucumber不允许多个步骤文件里存在完全相同的步骤表达式定义。要复用检查banner的步骤，有两种实用方案：

方案一：抽离公共步骤到独立文件 #

把通用的Then('there should be a banner')步骤从各页面的步骤文件中移除，统一放到一个公共步骤文件里，比如./common/steps/bannerSteps.js：

const { Then } = require('cucumber');
const banners = require("../../components/banners");
const assert = require('assert');

Then('there should be a banner', async function() {
    // 若所有页面的banner用统一类名，直接传参；若需区分，可结合当前页面URL或上下文判断
    const bannerValid = await banners.checkBannerExists(this, 'banner');
    assert.ok(bannerValid, 'Banner不存在或不可见');
});

之后，各页面的步骤文件只需保留各自的页面跳转逻辑即可：

首页步骤文件 #

const { Given } = require('cucumber');
const { Builder, until, By } = require('selenium-webdriver');

Given('I am on the home page',  async function () {
    this.driver = new Builder()
        .forBrowser('firefox')
        .build();
    
    await this.driver.get('https://www.awebsite.com');
    await this.driver.wait(until.elementLocated(By.tagName('h1')));
});

关于我们页面步骤文件 #

const { Given } = require('cucumber');
const { Builder, until, By } = require('selenium-webdriver');

Given('I am on the about page',  async function () {
    this.driver = new Builder()
        .forBrowser('firefox')
        .build();
    
    await this.driver.get('https://www.awebsite.com/about');
    await this.driver.wait(until.elementLocated(By.tagName('h1')));
});

这样，所有feature文件里直接调用Then there should be a banner就不会触发重复定义的错误。

方案二：参数化步骤，适配不同页面的banner #

如果不同页面的banner使用不同的CSS类名，可将步骤改为参数化形式，让同一个步骤支持多种场景：

公共步骤文件 #

const { Then } = require('cucumber');
const banners = require("../../components/banners");
const assert = require('assert');

Then('there should be a banner with class {string}', async function(bannerClass) {
    const bannerValid = await banners.checkBannerExists(this, bannerClass);
    assert.ok(bannerValid, `类名为${bannerClass}的Banner不存在或不可见`);
});

对应的feature文件写法 #

首页场景：

Scenario: 首页展示Banner
  Given I am on the home page
  Then there should be a banner with class "banner"

关于我们页面场景：

Scenario: 关于页展示Banner
  Given I am on the about page
  Then there should be a banner with class "about-banner"

优化检查函数的健壮性 #

原checkBannerExists函数在元素不存在时会直接抛出异常，导致测试直接失败。建议修改为捕获异常并返回布尔值，同时增加可见性校验：

const { By } = require('selenium-webdriver');

async function checkBannerExists(webdriver, bannerClass) {
  try {
    const banner = await webdriver.driver.findElement(By.className(bannerClass));
    // 校验元素是否可见
    const isDisplayed = await banner.isDisplayed();
    if (!isDisplayed) return false;
    // 校验元素尺寸有效（避免存在但不可见的情况）
    const rect = await banner.getRect();
    return rect.height > 0 && rect.width > 0;
  } catch (error) {
    // 元素不存在时返回false
    return false;
  }
};

module.exports = { checkBannerExists };

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