Testcafe 检查 DOM 元素是否不存在

Question

我正在尝试掌握 Test Cafe 的窍门，但目前我被卡住了。我有一个 Web 应用程序，我想测试从登录开始到注销结束的情况。当我使用错误的凭据登录时，我会显示一个 DOM 元素，其 id = errorMsg.

对于 Test Cafe，我想检查 DOM 元素是否存在。

这是我的测试脚本，basic-page-model.js是测试中使用的所有DOM个元素id的集合。

import Page from './basic-page-model';
import { Selector } from 'testcafe';

fixture `Full Test Run of Main Features Role User`
    .page `https://localhost:8443/login.jsp`;

const page = new Page();

const errorMessage= Selector('#errorMsg');
test('login test', async t => {
        
        await t
            .typeText(page.nameInput, 'user')
            .typeText(page.passInput, 'user') //correct password -> password 
            .click(page.login)
            .expect(errorMessage.exists).notOk();

});

登录是否失败并不重要，它总是returns 测试通过。有人可以给我指出正确的方向吗？

Answer 1

根据您的测试代码，在两种情况下您都没有 #errorMsg DOM 元素：凭据正确和不正确。我创建了一个简单的示例并且效果很好：

index.html（存在错误信息）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Error Message</title>
</head>
<body>
<div id="errorMsg">
    <p>Error Message</p>
</div>
</body>
</html>

no-message.html（无错误信息）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>No Error Message</title>
</head>
<body>
</body>
</html>

test.js

import { Selector } from 'testcafe';

fixture `Error message`;

const errorMessage = Selector('#errorMsg').addCustomDOMProperties({
    outerHtml: el => el.outerHtml
});

test
    .page('localhost:8080/no-message')
    ('message should not exist', async t => {
       await t
           .expect(errorMessage.exists).notOk();
    });

test
    .page('localhost:8080')
    ('message should exist', async t => {
        await t
            .expect(errorMessage.exists).ok();
    });

结果：

>testcafe chrome test.js
 Running tests in:
 - Chrome 83.0.4103.116 / Windows 10

 Error message
 √ message should not exist
 √ message should exist


 2 passed (0s)

您的测试中可能出现了错误的错误信息id。如果上面的例子没有帮助，我建议你用一个简单的项目更新你的问题。

Testcafe 检查 DOM 元素是否不存在

Testcafe Checking if DOM Element not present

testing

automated-tests

e2e-testing

testcafe

end-to-end