等待元素出现在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和visibility: none这样的CSS属性进行隐藏，则TestCafe将认为元素可见。 / p>

您可以在DevTools中的“计算的CSS属性”中进行检查。就您而言，#confirmation-button可能是隐藏在实际可见元素中某处的不可见按钮。

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

Answer 2

作为解决方法，您可以尝试单击按钮父容器：

const submitOrderBtn = Selector('#confirmation-submit');
const confirmSelector = submitOrderBtn.parent();
test('complete order', async t =>{
     await t
          .click(confirmSelector)

如果这不适用于直接父级，则可以尝试像这样获取第一个父级div：

const submitOrderBtn = Selector('#confirmation-submit');
    const confirmSelector = submitOrderBtn.parent('div');
    test('complete order', async t =>{
         await t
              .click(confirmSelector)