TestCafe - 如何在测试失败的情况下检查 web 元素是否存在或不存在？

Question

I'm trying to write a script that needs to adapt it's workflow behavior depending on whether a particular browser object found by CSS selector exists or does not exist.

I do not want to use a document.getElementByID method as this is not technically a CSS selector, and our entire enterprise is standardized on CSS selector so anything that walks the DOM other then a CSS selector won't make it past our code review process anyway.

var thing = await things.thingSelector(thingName);
if (await t.expect(thing.exists).notOk()) {
   await t.click(things.OpenThing(thingName));
} else {
   return false;
}
return true;

Where thingSelector is:

const thingSelector = name =>
  Selector('p.thing-header-title span')
    .withText(name)
    .parent('div.thing');

Where OpenThing is:

const OpenThing = name =>
    thingSelector(name)
        .find('a.thing-footer-item')
        .withText('Open');

I need to be able to continue execution if the object is not there and I'm checking that it exists, or if the object is there and I'm checking that it does not exist, and also the cases where the object is not there and it does not exist and the object is not there and I'm checking that it does not exist.

In all cases I still need to proceed with the workflow.

I've tried both sides of the logic coin:

if (!await t.expect(thing.exists).ok())

And

if (await t.expect(thing.exists).notOk())

If one of the above doesn't fail in one scenario it will fail in the other, and the other one will fail in the scenario that the first one didn't fail. I need something that will give me the logic, but not ever fail the script execution and still allow me to return either True or False depending on if the object is present or not present.

Thank you in advance for helping me to solve this problem, and also to learn and grow in my Javascript skills!

Answer 1

You can check the async exists property in the if condition in the following way:

if(await things.thingSelector(thingName).exists) {
    // do something 
} 

Answer 2

You can use the following assertions to test existence and non-existence elements:

test('Test existence and non-existence elements', async t => {
    await t
        .expect(Selector('#existing-element').exists)
        .expect(Selector('#non-existing-element').exists).notOk()
});

Answer 3

• How to check if an element exists:

   test('Element with id "element" exists', async t => { await t.expect(Selector('#element').exists).ok(); });

• How to check if an element does NOT exist:

   test('Element with id "element" shouldn\'t exist', async t => { await t.expect(Selector('#element').exists).notOk(); });

Check out the official documentation .

Answer 4

this is working for me, you can give it a try

async veriryCreativeIconButtonNotExists(){
await t.expect(this.exportButton.exists).ok()
await t.expect(this.columnPickerIcon.exists).ok()
await t.expect(this.filterColumnIcon.exists).ok()
if (await t.expect(this.columnPickerIcon.exists).ok()){
  await t.expect(this.creavtiveIconButton.exists).ok()
  await t.click(this.creavtiveIconButton)
  await t.expect(this.creativeImage.exists).ok()
  await t.click(this.creativeImage)
} else {
  return false;
}
return true;