Search code examples
testingautomated-testse2e-testingtestcafeend-to-end

Testcafe Checking if DOM Element not present

I am trying to get a hang of Test Cafe but currently I am stuck. I have a webapp I want to test starting at the login and ending with a logout. When I login with wrong credentials I display a DOM Element with the id = errorMsg.

With Test Cafe I want to check if the DOM Element is present or not.

This is my test script, the basic-page-model.js is a collection of all DOM elements ids used in the test.

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

});

It doesn't matter if the login will fail or not it always returns test passed. Can somebody please point me in the right direction?

Solution

  • According to your test code, you have no #errorMsg DOM element in both cases: with correct and incorrect credentials. I created a simple example and it works well:

    index.html (Error Message exists)

    <!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 (no Error Message)

    <!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();
    });

    Result:

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

    You may have a wrong error message id in your test. If the example above doesn't help, I suggest you update your question with a simple project.