等待元素出现在 TestCafe 的静态按钮上答案

【问题标题】：Waiting for element to appear on static button in TestCafe等待元素出现在 TestCafe 的静态按钮上
【发布时间】：2017-12-06 13:50:50
【问题描述】：

我的网站上有一个奇怪的 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 功能。

【问题讨论】：

不幸的是，如果没有完整的页面源代码，就很难说些什么。如果您担心隐私问题，您可以在我们的论坛上通过私信发送链接/来源：testcafe-discuss.devexpress.com 至me、Helen Dikareva 或Alexander Moskovkin。如果你不能分享你的代码，请你试着写一个最小的可重现的例子，好吗？
TestCafe 将考虑元素可见，如果它的宽度或高度具有非零值并且它没有使用 CSS 属性（如 display: hidden 和 visibility: none）隐藏。你可以在 DevTools 的 Computed CSS Properties 中查看它。在您的情况下，#confirmation-button 可能是隐藏在实际可见元素中某处的不可见按钮。此外，您可以尝试使用resizeWindow 操作调整浏览器窗口的大小。如果您的布局是自适应的或者是滚动问题，这可能会有所帮助。

标签： testing automated-tests e2e-testing testcafe ui-testing

【解决方案1】：

正如@Andrey Belym 在他的评论中提到的，如果元素的宽度或高度具有非零值并且没有使用display: hidden 和visibility: none 等CSS 属性隐藏，TestCafe 将考虑元素可见。

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

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

【讨论】：

【解决方案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)

【讨论】：