WebDriverIO中如何检测页面是否存在h1标签

原有代码的错误点 #

• 语法错误：browser.url()传入的地址字符串引号不配对，开头缺失单引号，会直接导致脚本运行报错
• 异步逻辑缺失await：WebDriverIO所有和浏览器交互的API、断言都是异步的，不加await会导致逻辑执行顺序错乱，拿不到真实页面结果
• 断言目标错误：toHaveText这类元素断言不能直接作用在browser实例上，需要先定位到具体元素再调用
• 定位逻辑错误：findElement传入的定位类型和值不匹配，h1是CSS选择器不是XPath语法，且该方法找不到元素时会直接抛出异常，不适合做存在性校验

正确实现方案 #

方案1：先获取存在性布尔值再断言（适合需要拿存在状态做后续逻辑的场景） #

用$()定位元素，调用isExisting()方法判断元素是否存在，该方法不会因为元素不存在抛错，会直接返回true/false：

// 打开目标页面，注意字符串引号配对
await browser.url('https://webdriver.io/');
// 定位h1元素
const h1 = await $('h1');
// 获取元素存在状态
const h1Exists = await h1.isExisting();
// 断言结果为真
expect(h1Exists).toBe(true);

方案2：直接用专用存在断言（写法最简洁，适合纯校验场景） #

WebDriverIO的expect扩展提供了专门的toBeExisting断言，直接对定位到的元素调用即可：

await browser.url('https://webdriver.io/');
// 直接断言h1元素存在
await expect($('h1')).toBeExisting();

补充说明 #

如果需要用XPath定位h1，选择器要写为标准XPath格式//h1，对应写法为await $('//h1')，日常场景下用CSS选择器h1定位标签更简洁高效。
如果要校验h1的文本内容，可以在定位到元素后调用toHaveText断言：

await expect($('h1')).toHaveText('Next-gen browser and mobile automation test framework for Node.js');

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