testing - 等待元素出现在 TestCafe 中的静态按钮上

Question

我的网站上有一个 TestCafe 的奇怪行为。我在一个站点上有两个复选框和一个按钮，单击它即可将我带到下一步。当页面加载时，de 按钮是可见的并且在任何时候都不会被操纵。

这是按钮的标记:

<button id="confirmation-submit" type="submit" class="btn btn-success pull-right hidden-xs">
     <span class="glyphicon glyphicon-flag"></span>
     order now
</button>

这是我的代码的样子(这个问题的相关部分):

const submitOrderBtn = Selector('button[type="submit"].btn-success');
//const submitOrderBtn = Selector('#confirmation-submit');

test('complete order', async t =>{
     await t
          .click(submitOrderBtn)

在 chrome 中它显示了这张图片:

命令行的输出是这样的:

该按钮始终可见，甚至当我使用开发人员工具查看网站时，该按钮就在那里，并且它具有我希望被单击的 ID(确认-提交)。

我怎样才能解决这个问题？在其他页面上，我可以毫无问题地使用 .click 功能。

Answer 1

正如@Andrey Belym 在他的评论中提到的，如果元素的宽度或高度具有非零值并且未使用 display: hidden 和 等 CSS 属性隐藏，TestCafe 将认为该元素可见>能见度:无。

您可以在 DevTools 的 Computed CSS Properties 中查看它。在您的情况下，#confirmation-button 可能是隐藏在实际可见元素中某处的不可见按钮。

此外，您可以尝试使用 resizeWindow 调整浏览器窗口的大小行动。如果您的布局是自适应的或者是滚动问题，这可能会有所帮助。