学习WebDriverIO时无法识别craigslist页面li元素问题求助

核心问题点 #

• 测试用例结构错误：检测li元素的it块独立于加载Craigslist的describe块外，WebdriverIO默认每个it用例为独立上下文，执行完页面加载用例后会重置页面状态，执行li检测时实际为空白页面，无法找到对应元素。
• 语法错误：代码末尾存在多余的});闭合符，会导致脚本解析异常，逻辑执行不符合预期。
• 元素匹配规则问题：$('li')默认匹配页面第一个li元素，若首个li本身为隐藏状态，即使页面存在其他可见li也会触发断言失败。
• 硬暂停可靠性不足：固定时长的browser.pause受网络、设备性能影响，可能出现暂停结束但页面未完成渲染的情况，导致元素未加载就执行断言。

修正后代码 #

it('Load example Website', () => {
  browser.url('https://www.example.com');
  browser.pause(10000);
  expect(browser).toHaveUrl('https://www.example.com');
});

describe('Craigslist website loads up', () => {
  it('load Craigslist and verify visible li exists', () => {
    browser.url('https://minneapolis.craigslist.org/');
    // 替换硬暂停，主动等待li元素加载，最长等待20秒
    const targetLi = $('li');
    targetLi.waitForExist({ timeout: 20000 });
    // 页面基础校验
    expect(browser).toHaveUrl('https://minneapolis.craigslist.org/');
    expect(browser).toHaveTitle('craigslist');
    // 元素可见性断言
    expect(targetLi).toBeVisible();
  });
});

可选优化方案 #

如果需要将页面加载和元素检测拆分为两个独立用例，可在describe块内新增beforeEach钩子，每次执行用例前自动加载目标页面：

describe('Craigslist website tests', () => {
  beforeEach(() => {
    browser.url('https://minneapolis.craigslist.org/');
    $('li').waitForExist({ timeout: 20000 });
  })

  it('load Craigslist successfully', () => {
    expect(browser).toHaveUrl('https://minneapolis.craigslist.org/');
    expect(browser).toHaveTitle('craigslist');
  });

  it('li should be visible', () => {
    expect($('li')).toBeVisible();
  });
});

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