What is an easier for Testcafe to check if a class selector exists on the page or not

Question

I have 2 web pages; one page shows a popup message while the other page doesn't I have it set up as:

.expect(Selector('.classname).exists).notOk()

This is what I'm assuming: The first page should pass because the popup message with that class should not show (it passes; makes sense to me)

but the error comes in with the 2nd page where the popup message with that class that I'm selecting passes (Doesn't make sense to me because I'm writing to check to make sure it doesn't pop up/exist)

I have tried using .visible and both failed; the first page fails because it says that the classname doesn't exist. Well, that's good; that's what I want to have when the test passes but the 2nd page fails perfectly the way I want it to.

The classname that I'm trying to test with is an error message that pops up when the site is not working. Pretty much I want to check to if that message pops up; if it does fail the test; if it doesn't pass the test

score 1 · Answer 1 · answered Sep 08 '19 at 04:26

1

In testcafe pop up are treated as native dialogue. Hence pop up element won't be picked up by .visible.

You can use following piece of code to check what kind of pop up message is coming up.

await t
    .setNativeDialogHandler(() => true);
    `Write code which will bring pop up`

Below piece of code will give you what kind of pop up message is coming (alert/confirm etc.)

const history = await t.getNativeDialogHistory();
console.log(history);

for example if it's a confirm type pop up. Below code will give you what you want.

await t
        .expect(history[0].type).eql('confirm');

Hope it helps you.

answered Sep 08 '19 at 04:26

user3389310

151
6

Thanks for the information and I'm trying to figure this out but the console.log code you posted isn't working for me. I tried putting it under a test and it's not console.log anything and when I put outside of a test it just breaks the code and gives me an error. Do I need to put this in a specific function or where can I put this so I can console.log info? I tried following https://devexpress.github.io/testcafe/documentation/test-api/accessing-console-messages.html and it's pretty confusing as well – DjKniteX Sep 09 '19 at 16:39
I have added a sample working code in another answer. Please mention the code which you are using. – user3389310 Sep 10 '19 at 06:25

score 1 · Answer 2 · edited Sep 10 '19 at 07:17

1

Following code is validating if we are getting confirm pop up on the "https://devexpress.github.io/testcafe/example/" page.

import { Selector, t } from 'testcafe';

fixture `My fixture`
    .page `https://devexpress.github.io/testcafe/example/`;

test('My test', async t => {
    await t
        .setNativeDialogHandler(() => true)
        .click('#populate');

    const history = await t.getNativeDialogHistory();
    await console.log(history);

    await t
        .expect(history[0].type).eql('confirm')
});

Could you provide your code which you are using. It will help to trouble shoot.

edited Sep 10 '19 at 07:17

aleks-pro

1,659
4
12

answered Sep 10 '19 at 06:24

user3389310

151
6

Thanks for the follow up; I got the example to work but it looks like it's only working with alert dialogs. How would I go about using this with a Span that comes in when an error has occurred and it leaves? When I looked in the dev tools. The span will appear for 5 seconds and then disappears – DjKniteX Sep 10 '19 at 19:47
Can you share the span element detail which you are seeing in dev tool ? – user3389310 Sep 11 '19 at 09:58
`
Error Message
` What I could write without giving out too much information but a div will show up to show the error message wh ich is the span and about 3-5secs it will disappear and the element will disappear as well (it's gone according to the console) – DjKniteX Sep 11 '19 at 20:32
Since error message is not coming up in native dialogue, following should work : `await t.expect(Selector('.overlay').exists).ok();` – user3389310 Sep 12 '19 at 06:39
So this test should past when the message comes up; but if I'm wanting to pass without the message I would do .notOk()? Pretty much I want the test to past if the message doens't show but fail when it does – DjKniteX Sep 12 '19 at 18:16
Yes, you are right. Using .notOk() will fail the testcase. – user3389310 Sep 13 '19 at 05:13

score 1 · Answer 3 · answered Sep 13 '19 at 18:49

What I've found helpful is checking to see if the element exists, and is visible (or not, in your case):. Then asserting on that


async checkForErrorMessage() {
  const errorMessageEl = Selector('.overlay');
  const isErrorVisible = (await errorMessageEl.exists) && (await 
    errorMessageEl.visible);

  await t.expect(isErrorVisible).notOk();
}

What is an easier for Testcafe to check if a class selector exists on the page or not

3 Answers3