Question

除以下内容外，我正在使用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')

对于可能出什么问题的任何提示，我们将不胜感激。

Answer 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来演示此问题，那就太好了。

Answer 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);

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

如果在运行时看不到TestCafe光标移向目标元素（这意味着您没有以无头模式运行），则说明选择器是错误的。这可能是因为在TestCafe尝试将元素悬停在DOM上时，该元素尚未安装在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>

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

单击基于文本的按钮

2 个答案: