需要帮助识别 testcafe 中的元素

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>

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

提前致谢。

Answer 1

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

话虽如此，我的断言如下：

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

在您的情况下，如果没有 id/class，您可以使用它来缩小搜索范围，它的效率可能相当低（您的应用中可能有很多 divs/spans）。您能否提供一些有关用于显示错误的 dom 的信息？

Answer 2

正如 @Iain_b 所说，您可以使用 Selector and the ok() assertion to check presence of the error message. You can use Adjacent sibling combinator 到 select 错误的 <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')

需要帮助识别 testcafe 中的元素

Require help in identifying element in testcafe

testing

automated-tests

e2e-testing

testcafe

web-testing