TestCafe 中 Selector 与常量运算导致预期失败的原因及解决方案

在 TestCafe 的自动化测试中，我们经常需要对页面元素进行计数并进行断言。然而，直接将 Selector 的 count 属性与常量进行运算可能会导致意想不到的结果。例如，以下代码可能会失败：

await t.expect(Selector('some-expression').count - someConstVar).eql(1);

而将其修改为以下形式后，却可以正常工作：

await t.expect(Selector('some-expression').count).eql(1 + someConstVar);

这背后的原因在于 Selector(‘some-expression’).count 返回的并非一个数值，而是一个 promise 对象。

Selector 的 Promise 特性

在 TestCafe 中，Selector 并非立即返回元素信息，而是返回一个 Promise。这是 TestCafe 内置等待机制正常工作的关键。通过返回 Promise，TestCafe 可以在元素加载或状态变化后，才真正解析 Selector 并获取元素信息。

你可以通过 TestCafe 官方文档了解更多关于 Selector API 的工作方式：Element Selectors。

为何直接运算会失败？

当您尝试将 Selector(‘some-expression’).count（一个 Promise 对象）与 someConstVar（一个数值）直接进行减法运算时，JavaScript 会尝试将 Promise 转换为数值。然而，由于 Promise 对象无法直接转换为有意义的数值，运算结果很可能为 NaN（Not a number）。因此，await t.expect(NaN).eql(1) 必然会失败。

正确的比较方法

为了解决这个问题，我们需要确保在进行比较之前，Selector(‘some-expression’).count 的 Promise 已经被解析为数值。这可以通过以下几种方式实现：

1. 将常量与预期值进行运算： 这是最简单也是最推荐的方法。将常量移动到等式右侧，与预期的结果进行运算，避免直接操作 Promise 对象。

   await t.expect(Selector('some-expression').count).eql(1 + someConstVar);

2. 使用 await 关键字： 虽然不推荐，但可以使用 await 关键字来解析 Promise，然后再进行运算。

   const count = await Selector('some-expression').count; await t.expect(count - someConstVar).eql(1);

   注意： 过度使用 await 可能会影响测试性能，并降低代码的可读性。

总结与建议

理解 TestCafe 中 Selector 返回 Promise 对象的特性至关重要。在进行断言时，尽量避免直接对 Promise 对象进行运算。优先采用将常量与预期结果进行运算的方式，以确保测试的准确性和可维护性。时刻关注 TestCafe 官方文档，了解最新的 API 和最佳实践，可以帮助您编写更健壮、更可靠的自动化测试。