根据文本单击按钮答案

【问题标题】：Clicking a button based on the text根据文本单击按钮
【发布时间】：2019-01-22 22:38:42
【问题描述】：

我正在使用 TestCafe 测试本地运行的应用程序，除了以下问题之外没有问题：

我有一个如下所示的元素：

<a href="internallink" class="btn btn-success">Upload file</a>

当测试尝试使用点击元素时

.click(Selector('.btn').withText('Upload file'))

出现以下错误

   1) The specified selector does not match any element in the DOM tree.

         | Selector('.btn')
       > |   .withText('Upload new file')

任何关于可能出错的提示都将不胜感激。

【问题讨论】：

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

【解决方案1】：

我在 Bootstrap 网站上检查了一个按钮，点击了一个类似的按钮，它按预期工作。请看以下代码：

import { Selector } from 'testcafe';

fixture `bootstrap`
.page `https://getbootstrap.com/docs/4.2/components/buttons/`;

test(`click button`, async t => {
    await t.click(Selector('.btn').withText('Success'));
});

我建议您检查您的网站并确保：

按钮的offsetWidth 和offsetHeight 大于零。
按钮没有display:none 或visibility: hidden 之类的样式。
该按钮包含与您正在搜索的文本完全相同的文本。

如果这没有帮助，如果您分享您的项目或网站 url 来证明问题，那就太好了。

【讨论】：

【解决方案2】：

当 TestCafe 给出此错误消息：The specified selector does not match any element in the DOM tree，而我不知道发生了什么时，我采用以下路径：

我创建了一个以元素为目标的 Selector 变量，并在点击它之前将鼠标悬停在它上面：

const uploadFileButton = Selector('a.btn').withExactText('Upload file');
await t
    .hover(uploadFileButton)
    .click(uploadFileButton);

请注意，在上面的代码中，我在定义 Selector 时尝试尽可能具体。

如果在运行时，您没有看到 TestCafe 光标向目标元素移动（这意味着您没有在无头模式下运行），那么您就知道选择器是错误的。这可能是因为在 TestCafe 尝试将鼠标悬停在其上时，该元素尚未安装在 DOM 中。要验证这一点，请将 TestCafe 代码修改为：

const uploadFileButton = Selector('a.btn').withExactText('Upload file');
await t
    .expect(uploadFileButton.exists)
    .ok({timeout: 10000})
    .hover(uploadFileButton)
    .click(uploadFileButton);

如果在运行时，TestCafe 停止在 .ok() 行，那么您就知道 Selector 肯定是错误的。在这种情况下，请转到开发人员工具并在控制台中键入以下命令：

var el = document.querySelectorAll('a.btn');
el <ENTER>

检查el 元素的内容。如果找到目标按钮，则应检查 innerText 属性，并检查是否没有使文本大写或使其不可见的 CSS 规则。

【讨论】：