使用Testcafe、id和自定义单选按钮时性能较慢

Question

我有一个测试，testcafe显示"等待元素出现";我不明白为什么。我使用ID选择器

我的测试相当简单，我使用ID做了一个慢版本，使用非ID做了一个快版本

这是testcafe的一个bug吗?

在Chrome 88.0.4324.182/Windows 10上使用Testcafe v1.11.0

测试输出显示:

Book
√ slow  (17s)
√ fast  (3.69s)

为什么选择使用ID会慢很多?它不是应该更快吗?

这是我的测试:

import { Selector } from 'testcafe';
fixture('Book').page('https://book.dinnerbooking.com/dk/en-US/book/table/pax/458/2');
test('slow', async t => {
'use strict';
await t
.maximizeWindow()
.click('button.ui-spinner-up')
.click('button.black-button')
.click('#RestaurantAreaConfigAreaId6');
});
test('fast', async t => {
'use strict';
await t
.maximizeWindow()
.click('button.ui-spinner-up')
.click('button.black-button')
.click(new Selector('.restaurant-area-label').nth(1));
});

Answer 1

这两个不同的选择器选择两个不同的元素。'#RestaurantAreaConfigAreaId6'选择<input type="radio" id="RestaurantAreaConfigAreaId6" ... />元素，Selector('.restaurant-area-label').nth(1)选择<label for="RestaurantAreaConfigAreaId6" class="restaurant-area-label font-large">Café</label>元素。

input元素依次被另一个透明元素重叠。在这种情况下，TestCafe会一直等待，直到目标元素在超时时间内被覆盖。如果目标元素保持不变，TestCafe就会点击上面的元素。