WebdriverIO页面无搜索确认按钮时如何校验搜索结果是否匹配

核心逻辑说明 #

你测试的站点https://new.flatlay.io/的搜索功能为实时触发模式，输入关键词后前端自动发起搜索请求并渲染结果，无需额外点击确认按钮。你原有代码存在3个常见问题：

• 异步方法未加await关键字，直接获取的是Promise对象而非实际文本内容
• 未等待搜索结果渲染完成就读取元素文本，大概率获取到空值或上一次搜索的旧结果
• 单条结果匹配容错率低，若某条结果未带关键词会直接导致断言失败

完整可运行代码示例 #

// 原有登录逻辑保留，所有异步操作需加await
await auth.$log.click();
await auth.login('kosarsute@gmail.com', 'qalesson@gmail.com');
await auth.$searchCLick.click();
await auth.$search.click();

// 定义搜索关键词，可按需替换为adidas/nike等
const searchKeyword = 'adidas';
await auth.$search.setValue(searchKeyword);

// 等待搜索结果容器加载完成，超时时间可根据站点响应速度调整
const resultContainer = $('.creator-content');
await resultContainer.waitForExist({ timeout: 5000 });

// 获取所有搜索结果条目文本，可根据实际页面结构调整条目选择器
const resultItems = await $$('.creator-content .content-item');
let matchCount = 0;

// 遍历结果做大小写不敏感匹配
for (const item of resultItems) {
  const itemText = (await item.getText()).toLowerCase();
  if (itemText.includes(searchKeyword.toLowerCase())) {
    matchCount++
  }
}

// 断言规则可根据业务要求调整：示例要求匹配结果占比不低于80%即判定搜索有效
expect(matchCount / resultItems.length).toBeGreaterThanOrEqual(0.8);

// 若要求所有结果必须匹配关键词，可替换为以下断言逻辑
// for (const item of resultItems) {
//   const itemText = (await item.getText()).toLowerCase();
//   expect(itemText).toContain(searchKeyword.toLowerCase());
// }

优化提示 #

• 若输入关键词后页面有加载态动画，可先等待加载态消失再读取结果，用例稳定性更高
• 统一转为小写匹配可避免大小写差异导致的误判
• 若搜索结果包含标题、标签、描述等多维度内容，可针对性获取对应字段校验，匹配精度更高

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