等待元素出现在 TestCafe 的静态按钮上
Posted
技术标签:
【中文标题】等待元素出现在 TestCafe 的静态按钮上【英文标题】:Waiting for element to appear on static button in 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 操作调整浏览器窗口的大小。如果您的布局是自适应的或者是滚动问题,这可能会有所帮助。
【参考方案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)
【讨论】:
以上是关于等待元素出现在 TestCafe 的静态按钮上的主要内容,如果未能解决你的问题,请参考以下文章