Testcafe - 使用 id 选择复选框总是以完全超时等待结束答案

【问题标题】：Testcafe - Selecting checkbox using id always end up with the full timeout waitTestcafe - 使用 id 选择复选框总是以完全超时等待结束
【发布时间】：2020-08-18 13:31:05
【问题描述】：

我们的复选框 html 代码总是看起来像这样

<div id="paymentCheckBoxesMod" class="c-form__checkbox-container u-spacing__margin-bottom--16 u-spacing__margin-top--16"> <input type="checkbox" id="supplementaryAgreement" aria-describedby="paymentsCheckboxLabel"> <label for="supplementaryAgreement"> </label> <div id="paymentsCheckboxLabel"> Jag godkänner Storytels <span id="purchasetermspopup">Köpvillkor</span> & <span id="privacypolicypopup">Integritetspolicy</span> </div> </div>

我总是使用标签的for="supplementaryAgreement" 定位元素，因为如果我使用输入的id="supplementaryAgreement"，我最终必须等待超时时间才能找到元素。有谁知道为什么？

所以在我必须为 iframe 工作之前一直运行良好，虽然我已经切换回大型机，但是如果我现在使用 for="supplementaryAgreement"，我会收到 DOM 树上没有匹配项的错误。它仍然适用于id="supplementaryAgreement"，但必须等待它超时似乎效率不高。

【问题讨论】：

这种行为听起来很奇怪。您是否有公共 URL 来访问它并诊断问题？或者，您可以提供一个小型示例应用程序，我们可以在其中重现问题并检查发生了什么。
是的，您可以转到创建帐户页面https://www.storytel.com/se/sv/skapa-konto，创建帐户后，您将进入付款页面，我在该页面上遇到了复选框问题，虽然我不确定它是否有效正确的做法this.suppAgreementCheckbox = Selector('#checkboxid').with({ timeout: 1 })

标签： testing iframe checkbox selector testcafe

【解决方案1】：

我认为这个问题的原因在于您的复选框的复杂标记。似乎该复选框与label::after 元素重叠，因此TestCafe 无法正确找到该复选框。另一个问题是label[for=supplementaryAgreement] 的height 等于0。

在这种情况下，您减少选择器超时的想法是一个很好的解决方法。它不起作用，因为存在语法错误。请尝试以下方法：Selector('#supplementaryAgreement', { timeout: 1000 })

【讨论】：