WebdriverIO自动化测试页面重定向后元素定位不稳定问题

1. 强化页面跳转后的等待逻辑 #

点击跳转链接后，直接操作后续元素容易因页面未完全加载导致失败，需结合URL校验+页面就绪等待：

修改selectVPS4vCPU方法：

async selectVPS4vCPU() {
    // 先等待跳转链接可点击
    await waiters.waitForClickable(this.vpsHostingLink);
    await this.click(this.vpsHostingLink);
    
    // 等待跳转到目标VPS页面的URL（替换为实际目标地址）
    await waiters.waitForUrlToBe('https://your-domain.com/vps-hosting');
    // 等待页面完全加载完成
    await waiters.waitForPageLoad(30000);
    
    // 滚动到按钮中心位置，避免被页面元素遮挡
    await this.vps4vcpuBtn.scrollIntoView({ block: 'center' });
    // 等待按钮可点击（比仅等待显示更可靠）
    await waiters.waitForClickable(this.vps4vcpuBtn, 30000);
    await this.click(this.vps4vcpuBtn);
    
    await waiters.waitForLoaderToComplete(loader.pageLoader, 30000);
    // 额外短等待，确保loader消失后页面内容渲染稳定
    await browser.pause(500);
 }

2. 优化元素文本解析的稳定性 #

getTotalCost中需确保文本完全渲染后再提取，同时处理匹配失败的异常情况：

async getTotalCost() {
    await waiters.waitForPageLoad(30000);
    await $('.sec-header').waitForExist({ timeout: 30000 });
    
    await this.vps4vcpTotalPrice.scrollIntoView({ block: 'center' });
    await waiters.waitForElementToBeDisplayed(this.vps4vcpTotalPrice, 40000);
    
    // 等待文本包含关键标识，确保内容已渲染完成
    await browser.waitUntil(async () => {
        const text = await this.vps4vcpTotalPrice.getText();
        return text.includes('Total:');
    }, { timeout: 10000, timeoutMsg: 'Total cost text not rendered' });
    
    const sidebarTotalText = await this.vps4vcpTotalPrice.getText();
    const totalMatch = sidebarTotalText.match(/Total:\s*\$\s*([0-9.,]+)/);
    
    // 处理匹配失败的场景，避免测试崩溃
    if (!totalMatch || !totalMatch[1]) {
        throw new Error(`Failed to extract total cost from text: ${sidebarTotalText}`);
    }
    
    return parseFloat(totalMatch[1].replace(/,/g, ''));
  }

3. 修复等待工具类的异常场景 #

waitForLoaderToComplete需先判断loader元素是否存在，避免元素不存在时调用isDisplayed()报错：

async waitForLoaderToComplete(loaderElement, timeout = this.DEFAULT_TIMEOUT) {
    await browser.waitUntil(async () => {
        const exists = await loaderElement.isExisting();
        // 元素不存在或已隐藏，视为loader完成
        return !exists || !(await loaderElement.isDisplayed());
    }, {
      timeout,
      timeoutMsg: `Loader did not complete within ${timeout}ms`,
    });
  }

4. 优化测试后的状态清理 #

调整清理顺序，确保完全重置页面状态：

afterEach(async () => {
    // 先清理存储数据
    await browser.execute(() => {
      sessionStorage.clear();
      localStorage.clear();
    });
    // 清理cookies
    await cookiesHelper.deleteCookies();
    // 直接导航到首页，比refresh更可靠
    await browser.url('/');
    await waiters.waitForPageLoad(20000);
  });

5. 全局隐式等待兜底（可选） #

在wdio.conf.js中配置隐式等待，作为全局层面的超时兜底：

exports.config = {
    // ...其他配置
    capabilities: [{
        browserName: 'chrome',
        'goog:chromeOptions': {
            args: ['--headless=new']
        },
        // 配置10秒隐式等待
        'wdio:devtoolsOptions': {
            implicitWaitTimeout: 10000
        }
    }],
    // ...
}

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