NodeJS Cucumber自动化测试无等待执行导致失败求助

你的测试执行失败、未等待操作完成，核心原因是异步操作未充分等待元素就绪——即使使用了async/await，部分动态加载的元素或页面交互仍需要显式等待来确保操作时机正确。以下是具体修复方案：

1. 为所有交互操作添加显式等待 #

在点击、填充元素前，先等待元素处于可见/可交互状态，避免因元素未加载完成导致操作失败：

const { Given, When, Then } = require('@cucumber/cucumber');
const { expect } = require('@playwright/test'); // 需引入断言库

Given("I visit the automation-practice-form page", async () => {
    await page.goto("https://demoqa.com/automation-practice-form/", { waitUntil: 'networkidle' }); // 等待网络空闲
});

When("I fill the form with correct data", async () => {
    // 等待元素可见后再操作
    await page.waitForSelector('#firstName', { state: 'visible' });
    await page.fill('#firstName', 'Tester');
    
    await page.waitForSelector('#lastName', { state: 'visible' });
    await page.fill('#lastName', 'Testerov');
    
    await page.waitForSelector('#userEmail', { state: 'visible' });
    await page.fill('#userEmail', 'testingemail@testemail.com');
    
    await page.waitForSelector('//*[@id="gender-radio-1"]/following-sibling::label', { state: 'visible' });
    await page.check('//*[@id="gender-radio-1"]/following-sibling::label');
    
    await page.waitForSelector('#userNumber', { state: 'visible' });
    await page.fill('#userNumber', '1232131231');
    
    await page.waitForSelector("#dateOfBirthInput", { state: 'visible' });
    await page.click("#dateOfBirthInput");
    await page.waitForSelector('(//div[@role="option"])[1]', { state: 'visible' }); // 等待日期选项加载
    await page.click('(//div[@role="option"])[1]');
    
    await page.waitForSelector('#subjectsInput', { state: 'visible' });
    await page.fill('#subjectsInput', 'Computer Science');
    await page.keyboard.press("Enter");
    
    await page.waitForSelector('//*[@id="hobbies-checkbox-1"]/following-sibling::label', { state: 'visible' });
    await page.click('//*[@id="hobbies-checkbox-1"]/following-sibling::label');
    
    await page.waitForSelector("#uploadPicture", { state: 'visible' });
    await page.setInputFiles("#uploadPicture", "uploads/test-image.jpg");
    
    await page.waitForSelector('#currentAddress', { state: 'visible' });
    await page.fill('#currentAddress', 'Test Address');
    
    await page.waitForSelector("#state", { state: 'visible' });
    await page.click("#state");
    await page.waitForSelector('//*[@id="react-select-3-option-1"]', { state: 'visible' }); // 等待状态下拉选项
    await page.click('//*[@id="react-select-3-option-1"]', { force: true });
    
    await page.waitForSelector("#city", { state: 'visible' });
    await page.click("#city");
    await page.waitForSelector('//*[@id="react-select-4-option-0"]', { state: 'visible' }); // 等待城市下拉选项
    await page.click('//*[@id="react-select-4-option-0"]');
});

When("click over the Submit button", async () => {
    await page.waitForSelector("#submit", { state: 'visible' });
    await page.click("#submit");
});

Then("I will verify that the data were filled in correctly", async () =>  {
    // 等待结果元素加载完成
    const name_actualResultElement = page.locator('//*[contains(text(),"Student Name")]/following-sibling::td');
    await name_actualResultElement.waitFor({ state: 'visible' });
    // 获取文本并执行断言
    const actualName = await name_actualResultElement.textContent();
    expect(actualName).toBe('Tester Testerov');
    
    // 可继续添加邮箱、手机号等其他字段的断言逻辑
});

2. 优化页面跳转等待策略 #

在page.goto中添加waitUntil: 'networkidle'，确保页面资源完全加载后再执行后续操作。

3. 完善断言逻辑 #

原Then步骤仅定位元素，未等待元素出现也未执行断言。需添加waitFor()确保结果元素加载完成，再通过断言库验证数据正确性。

4. 确认Cucumber配置 #

确保你的Cucumber配置文件（如cucumber.js）使用兼容版本（推荐@cucumber/cucumber v7+），默认已支持async/await异步步骤。

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