Docker环境运行Selenium出现StaleElementReferenceError，本地正常

我们在应用测试中通过Cucumber步骤结合Selenium做验证：鼠标悬停在指定元素上触发Tooltip弹出，随后定位Tooltip内元素并检查其是否显示。该测试在本地运行正常，但在Docker环境中执行时，会针对弹出的Tooltip抛出StaleElementReferenceError错误。

Cucumber步骤 #

When User hovers over tooltip
Then User sees the tooltip information

步骤调用的函数 #

hoverOverTooltip() {
    return this.hover(locators.Tooltip);
}

verifyTooltipinfoIsDisplayed() {
    const locatorToVerify = {
        Mode: By.xpath('//span[contains(text(), \'Modes\')]'),
        low: By.xpath('//span[contains(text(), \'Low\')]'),
        high: By.xpath('//span[contains(text(), \'High\')]'),
        medium: By.xpath('//span[contains(text(), \'Medium\')]'),

    }
    return Promise.all([
        this.verifyElementIsDisplayed(locatorToVerify.Mode),
        this.verifyElementIsDisplayed(locatorToVerify.low),
        this.verifyElementIsDisplayed(locatorToVerify.high),
        this.verifyElementIsDisplayedAfterHover(locatorToVerify.medium),
    ])
}

Selenium核心检查逻辑 #

async verifyElementIsDisplayed(locator) {
    const element = await this.app.page.findElement(locator);
    return element.isDisplayed();
}

async hover(locator) {
    const element = await this.app.page.findElement(locator);
    const actions = this.page.actions({async: true});
    await actions.move({origin: element}).perform();
}

Docker环境下的错误日志 #

✖ Then User sees the tooltip information # file:steps.js:60
    StaleElementReferenceError: stale element reference: stale element not found in the current frame
      (Session info: chrome=124.0.6367.243)
        at Object.throwDecodedError (/tests/node_modules/selenium-webdriver/lib/error.js:523:15)
        at parseHttpResponse (/tests/node_modules/selenium-webdriver/lib/http.js:524:13)
        at Executor.execute (/tests/node_modules/selenium-webdriver/lib/http.js:456:28)
        at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
        at async Driver.execute (/tests/node_modules/selenium-webdriver/lib/webdriver.js:745:17)
        at async SeleniumEditConnectionPage.verifyElementIsDisplayedAfterHover (file)
        at async CustomWorld.<anonymous> (file)

尝试的修复方案（执行失败） #

尝试编写了一个包含重新查找元素、重新悬停逻辑的函数，但在执行action.move重新悬停时失败并退出函数：

async verifyElementIsDisplayedAfterHover(locator, hoverLocator) {
    try {
        await this.verifyElementIsDisplayed(locator);
    }
    catch (error) {
        if (error.name === 'StaleElementReferenceError') {
            console.log("StaleElementReferenceError caught");

            // 重新定位需要悬停的元素
            console.log("Re-locating hover element...");
            const hoverElement = await this.app.page.findElement(hoverLocator);

            // 重新执行悬停
            console.log("Re-hovering...");
            const actions = this.app.page.actions({ async: true });
            console.log("Hover acction made");
            await actions.move({ origin: hoverElement, x: 1, y: 1 }).perform();
            console.log("Hover action completed");

            // 等待DOM更新
            await this.app.page.sleep(300);

            // 等待目标元素出现并可见
            console.log("Waiting for element to be visible...");
            await this.app.page.wait(until.elementLocated(locator), 5000);
            const element = await this.app.page.findElement(locator);
            await this.app.page.wait(until.elementIsVisible(element), 5000);

            return element.isDisplayed();
        } else
            throw new Error(`Unable to find the '${locator}' on the window.\n Returned error: '${error}'`);
    }
}

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