Automated tests 根据文本单击按钮

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

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

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

给出了以下错误

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

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

---

如果有任何关于可能出错的提示，我们将不胜感激。

我已经用一个类似的按钮检查了引导站点上的一个按钮，它可以按预期工作。请参阅以下代码：

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

按钮的

offsetWidth

和

offsetHeight

大于零

按钮没有类似于

显示：无

或

可见性：隐藏

的样式

该按钮包含与您正在搜索的文本完全相同的文本

如果这没有帮助，那么如果您共享您的项目或网站url来演示该问题，那将是非常棒的。  

---

当TestCafe给出以下错误消息时：

指定的选择器与DOM树中的任何元素都不匹配

，并且我不知道发生了什么，我采用以下路径：

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

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

请注意，在上面的代码中，我在定义选择器时尽量具体

如果在运行时，您没有看到TestCafe光标向目标元素移动（这意味着您没有在headless模式下运行），那么您知道选择器是错误的。这可能是因为在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（）行停止，那么您知道选择器肯定是错误的。 在这种情况下，转到开发人员工具并在控制台中键入以下命令：

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

var el=document.querySelectorAll（'a.btn'）；
埃尔

检查

el

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

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

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