需要帮助识别测试咖啡中的元素

Question

我是自动化测试和编码的新手。我正在我的一个项目中使用 testcafe 来自动化功能测试。

在其中一个网页中，有一个字段仅接受数值，如果输入任何字母数字值，则会显示错误消息。

作为验证的一部分，我需要捕获此错误消息。

我在这里面临的问题是我无法确定它在 DOM 中的哪个元素。

例如，可以考虑Gmail用户名以及我们在尝试输入无效用户消息时收到的错误消息。

这就是该领域的 DOM 的样子

<div class="flex-content space-100 space-large-reset ">
<label for="uid">Unique ID Number</label>
<input type="password" id="uid" maxlength="9" value="123js" class="abyss-textinput abyss-form-invalid">
<div class="abyss-error-message">Please enter a valid Unique ID Number.</div></div>

值="123js"是我输入的错误值，它生成了下一行提到的错误消息。

提前谢谢。

Answer 1

首先，我承认我不是testcafe的权威，只是学习自己。

话虽如此，我有如下工作的断言：

await t.expect(Selector('h2').withText('Some text').exists).ok();

在您的情况下，如果没有可用于缩小搜索范围的 id/类，则它可能效率相当低下(您的应用程序中可能有很多div/span(。您能否提供有关用于显示错误的 dom 的一些信息？

Answer 2

正如@Iain_b所说，您可以使用选择器和 ok(( 断言来检查错误消息是否存在。您可以使用相邻同级组合器来选择错误的<div>标记。但是，该元素可以在验证失败后插入到 DOM 树中，或者在页面加载后就在那里，并且在验证失败后变得可见。

因此，对于第一种情况，您应该使用类似以下内容：

await t.expect(Selector('#uid + .abyss-error-message').withText('Please enter a valid Unique ID Number').exists).notOk();
await t.typeText('#uid', '@$dfgh');
await t.expect(Selector('#uid + .abyss-error-message').withText('Please enter a valid Unique ID Number').exists).notOk();

第二个：

await t.expect(Selector('#uid + .abyss-error-message').withText('Please enter a valid Unique ID Number').visible).notOk();
await t.typeText('#uid', '@$dfgh');
await t.expect(Selector('#uid + .abyss-error-message').withText('Please enter a valid Unique ID Number').visible).notOk();

Answer 3

感谢您的帮助。

我能够使用以下提到的条件找到该元素

Selector ('.abyss-error-message').withText('Please enter a valid UID')