JavaScript+WDIO+Cucumber中复用Feature文件变量的方案咨询

我之前在维护类似的JS+Cucumber+WebdriverIO框架时也碰到过这种复用冲突的问题，复制代码或者合并用例确实是下下策，给你分享几个我实践下来好用的优雅方案：

一、先定位核心问题 #

你遇到的测试失败，大概率是两个原因：

1. Page对象状态污染：如果多个测试用例共享同一个Page实例，前一个测试的操作会残留状态影响下一个测试
2. Step定义硬编码绑定：Example1的Step逻辑如果直接写死调用example1.page.js，Example2复用Scenario Outline时会错误地操作Example1的页面元素

二、具体解决方案 #

1. 抽象公共Page基类，实现多态复用 #

把所有Page对象的通用逻辑抽成基类，业务Page继承基类实现特有逻辑，既避免重复代码，又保证各自的独立性：

// pages/base.page.js
class BasePage {
    constructor() {
        // 通用初始化逻辑，比如基础URL、通用元素定位
        this.baseUrl = 'https://your-test-domain.com';
    }

    // 通用操作：输入文本
    async enterText(selector, text) {
        await $(selector).setValue(text);
        await browser.pause(500); // 可选：根据项目调整等待逻辑
    }

    // 通用操作：点击元素
    async clickElement(selector) {
        await $(selector).click();
    }

    // 通用操作：打开页面
    async open(path) {
        await browser.url(`${this.baseUrl}${path}`);
    }
}

module.exports = BasePage;

然后让业务Page继承基类：

// pages/example1.page.js
const BasePage = require('./base.page');

class Example1Page extends BasePage {
    constructor() {
        super();
        // Example1特有元素定位
        this.inputBox = '#example1-input';
        this.submitBtn = '#example1-submit';
        this.resultMsg = '#example1-result';
        // 特有页面路径
        this.pagePath = '/example1';
    }

    // Example1特有方法：提交表单并验证
    async submitAndVerify() {
        await this.clickElement(this.submitBtn);
        await expect(this.resultMsg).toHaveTextContaining('操作成功');
    }
}

module.exports = Example1Page;

// pages/example2.page.js
const BasePage = require('./base.page');

class Example2Page extends BasePage {
    constructor() {
        super();
        // Example2特有元素定位
        this.inputBox = '#example2-input';
        this.submitBtn = '#example2-submit';
        this.resultMsg = '#example2-result';
        // 特有页面路径
        this.pagePath = '/example2';
    }

    // Example2特有方法：提交表单并验证
    async submitAndVerify() {
        await this.clickElement(this.submitBtn);
        await expect(this.resultMsg).toHaveTextContaining('提交成功');
    }
}

module.exports = Example2Page;

2. 动态绑定Page对象的Step定义 #

不要在Step里硬编码指定Page，而是通过Feature标签或者文件路径动态匹配对应的Page，保证Step的通用性：

// steps/common.steps.js
const { Given, When, Then } = require('@cucumber/cucumber');
const Example1Page = require('../pages/example1.page');
const Example2Page = require('../pages/example2.page');

let currentPage;

// 根据Feature标签或文件路径初始化对应Page
Given('我打开目标页面', async function () {
    const featureUri = this.testCase.sourceLocation.uri;
    const tags = this.tags.map(tag => tag.name);

    if (featureUri.includes('example1.feature') || tags.includes('@useExample1')) {
        currentPage = new Example1Page();
    } else if (featureUri.includes('example2.feature') || tags.includes('@useExample2')) {
        currentPage = new Example2Page();
    }

    await currentPage.open(currentPage.pagePath);
});

When('我输入文本 {string}', async function (someString) {
    await currentPage.enterText(currentPage.inputBox, someString);
});

Then('我提交表单并验证结果', async function () {
    await currentPage.submitAndVerify();
});

然后在Feature文件里通过标签明确指定使用哪个Page：

# example2.feature
@useExample2
Scenario Outline: 复用输入提交场景
    Given 我打开目标页面
    When 我输入文本 "<someString>"
    Then 我提交表单并验证结果

    Examples:
        | someString |
        | 测试内容A   |
        | 测试内容B   |

3. 测试隔离保障 #

最后一定要加Hook保证每个测试用例的独立性，避免状态残留：

// hooks.js
const { Before, After } = require('@cucumber/cucumber');

Before(async function () {
    // 每个测试前重置浏览器状态
    await browser.deleteAllCookies();
    await browser.setWindowSize(1920, 1080);
});

After(async function () {
    // 每个测试后清理页面
    await browser.refresh();
});

三、额外优化：共享Scenario Outline #

如果多个Feature的Scenario Outline完全一致，可以把它抽成单独的共享Feature文件，比如common_scenarios.feature，然后在业务Feature里通过Scenario Outline: 复用场景直接引用，配合标签就能实现跨Feature复用。

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