How can you avoid redundant call while waiting for element visibility - selenium

Question

I currently have a test script using WebdriverIO that clicks on a button and waits for a popup to display. The purpose of the test is to make sure the element is displayed after a click, but since it is asynchronous I must wait till it is displayed.
But if I wait until the element is displayed my assertion will always pass if waitForVisible is successful. If it is not successful it will always throw an exception on the waitForVisible command and the assertion will never execute.
Here is an example of the code:
browser.click(btnElement)
browser.waitForVisible(popupElement)
expect(browser.isVisible(popupElement)).to.be.true
Is there a different way to tell the expect statement to retry/wait until the element is visible so the assertion is not useless?

Answer 1

You seem to be confusing the purpose of assertions, or misusing them, specifically in your example. You should only use assertions when you have the certainty that the thing (WebElement, text, attribute of an element, etc.) you want to verify contains the expected type of value (which you return into your assert, or expect statement for the final validation => the output is the desired one).
Assertions validate a static value, they don't poll the DOM. That's why you have tools like .waitForVisible(), waitForText(), or more importantly .waitUntil() (which offers more flexibility).
Granted, the expect assertion-style provided by ChaiJS might have a confusing lexicon (expect could be taken out of context: it is expecting of the WebElement to be visible). Just use them for validating outputs of different commands, not states of WebElements, or other dynamic/changing elements.
That being said, as a best-practice, you should always wrap your commands (e.g.: .click()) into a .waitUntil() block and assure the WebElement is ready for the action you're about to perform:
is it rendered in the DOM by the front-end logic? (use .isExisting())
is it visible in the DOM? (you *cannot click on elements which aren't visible in the viewport)
is it clickable? (or w/e other action you want to perform on it...)
In the end, a idiomatic action (in our case .click()) should look like this:
browser.waitUntil(() => {
browser.isExisting(locator);
}, timeout, "Oups! An error occured.\nReason: element ('" + locator + "') does not exist");
browser.waitUntil(() => {
browser.isVisible(locator);
}, timeout, "Oups! An error occured.\nReason: element ('" + locator + "') is not visible");
browser.waitUntil(() => {
browser.click(locator);
}, timeout, "Oups! An error occured.\nReason: element ('" + locator + "') could not be clicked");
You can wrap the whole thing into a custom-command and use it w/e you want. Say good-bye to flaky tests! :)
* Selenium is a user-centric web-automation tool, thus all actions are performed as if a user would (a user cannot click on elements that aren't visible, a user cannot click on multiple elements at the same time, or fill in an input field by typing a whole word, or a whole paragraph, etc.)

Answer 2

I don't know WebdriverIO but I would assume that it has something akin to a try-catch. Wrap your wait in a try-catch. If it succeeds, Assert.pass() or the equivalent. If it times out, an exception will be thrown so in your catch for the timeout put an Assert.fail() or the equivalent.
I've never used ChaiJS but I did take a look at the documentation and found a couple things you should be able to use.
assert.isOk(false, 'this will fail');
This is from the documentation and should be the equivalent to what I'm familiar with, Assert.Fail(). One would assume that a slight adjustment the following would be the equivalent to Assert.Pass(),
assert.isOk(true, 'this will pass?');
If that doesn't work for some reason, you can use the below from the documentation.
assert.isNotOk(false, 'this will pass');