如何使用Testcafe验证航班搜索结果仅包含Nonstop直飞航班

需求背景 #

我需要编写脚本搜索从洛杉矶到休斯顿乔治布什国际机场的航班，筛选条件如下：

• 单程航班
• Nonstop直飞航班

拿到搜索结果后，需要验证所有返回的航班均为直飞航班，使用Testcafe测试框架实现。

具体实现逻辑 #

步骤1：定义元素选择器 #

首先定位到页面上每个航班卡片中展示航班是否直飞的文本元素，替换为你实际页面对应的选择器即可：

import { Selector } from 'testcafe';

// 示例选择器：所有航班的停留类型文本节点
const stopTypeText = Selector('.flight-item .stop-info');

步骤2：编写断言逻辑 #

遍历所有航班的停留类型文本，逐一校验是否包含直飞标识：

test('校验所有航班均为直飞', async t => {
  // 等待航班列表渲染完成，可根据实际页面加载速度调整超时时间
  await t.expect(stopTypeText.exists).ok({timeout: 10000});
  // 获取航班总数量
  const totalFlights = await stopTypeText.count;
  // 逐个校验是否为直飞
  for (let i = 0; i < totalFlights; i++) {
    await t
      .expect(stopTypeText.nth(i).textContent)
      .contains('Nonstop', `第${i+1}个航班不符合直飞要求`);
  }
})

常见报错原因 #

如果之前运行出现报错，大概率是直接对Selector元素集合调用textContent导致的，Testcafe不支持直接读取元素集合的文本属性，必须定位到单个元素后再获取文本做断言。

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