How to validate an element is gone using webdriverIO, Mocha and Chai

Question

I'm working on some automated tests, using webdriverIO, Mocha and Chai. I keep running into the same problem when I want to verify if an element is deleted.

I'm working with a shoppingbasket where i delete an item and then verify that it is gone. It takes a while for the item to be gone though, so if I immediately go to the expect, the item is still there.

I have solved this by doing this:

browser.waitForExist(deletedProduct, 5000, true)
expect (boodschappenLijstPage.isProductPresent(SKU), 'the removed item was still there' ).to.equal(false)

The webdriverIO waitfor command waits for the product to dissapear, and after that the chai expect checks if it is gone.

The problem I have with this is that the expect will never fail. If the product is not properly deleted the waitfortimeout will throw an error before I get to the expect part, meaning that the expect part is only reached if the product is gone

I have read through the docs for chai, but I can't seem to find a way of doing this.

Can anyone show be a way of waiting for the product to be gone, without missing the expect (I don't want to use browser.pause for obvious reasons)

You want to wait and in the end of the wait to not timeout and return `false` (element is still displayed)? — nEkis, Apr 26 '18 at 12:32

score 3 · Answer 1 · edited Oct 07 '20 at 06:22

3

Refer this

webElement.waitForDisplayed({ reverse: true });

edited Oct 07 '20 at 06:22

Akshay Gundewar

864
11
30

answered Sep 18 '20 at 08:49

Julian Kolodzey

359
3
9

score 2 · Answer 2 · answered Apr 26 '18 at 12:24

2

You can use try catch and basically wait for error. When element disappears from DOM selenium will throw NoSuchElementError and we can use it.

isNotPresent(element) {
  try {
    return !element.isVisible()
  } catch (error) {
    return true
  }
}

// or wait for element to disappear from dom

waitForNotVisible(element) {
  browser.waitUntil(() => {
    try {
      return !element.isVisible()
    } catch (error) {
      return true
    }
  })
}

answered Apr 26 '18 at 12:24

nEkis

320
1
14

Hi @nEkis I was just wondering if you still follow through with this solution - or there has been another more efficient way since you've posted this? – Azy Sır Dec 16 '18 at 05:18
Hi, I am still using this solution. – nEkis Jan 02 '19 at 08:54
@AzySır - Please see my answer here: https://stackoverflow.com/a/66370170/552792 – jamesmortensen Feb 25 '21 at 14:12

score 1 · Accepted Answer · edited Feb 25 '21 at 14:17

If you're trying to validate that an element is gone, then using expect is the correct solution, but you should use the Webdriver-expect assertions instead of the chai expect assertions. While chai assertions check the state immediately, the WebdriverIO-expect assertions have the waitFor functionality built inside of it. Here is an example:

let deletedProduct = $(/* your xpath/CSS selector/*);
expect(deletedProduct).not.toBeDisplayed();

The difference between the assertion and using waitForDisplayed with the reverse flag is that some reporters, such as Allure, will report your test as broken when instead the test should be reported as failed. For example, when we ran tests and had the waitForDisplayed, all of our failing tests were marked in yellow. When we use expect, the tests are marked in red.

Here is the documentation for the WebdriverIO Expect matchers. They didn't document the .not method very clearly, but in my example you can see I added the .not before the toBeDisplayed call.

Again, this expect will wait for the timeout specified in the wdio.conf.js, just like the waitFors will.

How to validate an element is gone using webdriverIO, Mocha and Chai

3 Answers3