Codeception function to seeOrWaitForElement - selenium

Question

I've got an application which I want to test with selenium/codeception. It has a lot of ajax function which changes the pages (show/hide sections of the page) which codeception at the moment doesn't handle well.
The problem I am having is I want to click on buttons/elements which either
are already on the page (ajax calls finished early)
which are not yet on the page (waiting for ajax response)
If I use waitForElement() it only seems to works in the second case (it waits for the element to appear and continues) but if the element is already present waitForElement will timeout and fire an Fail.
What I am looking for is a seeOrWaitForElement() function but I can't figure out how to insert logic in codeception.
Is this function available somewhere or how can I solve this problem in another way?

Answer 1

You could use
waitForJs("return document.querySelector('".$element."') != null", $seconds);
which will wait until the element exists (and returns instantly if the element already is present).

Answer 2

Codeception introduced a feature called SmartWait in version 2.3.4 which seems like an elegant solution to your problem. Note that it does not work for all kind of locators.
From the Codeception documentation:
SmartWait
since 2.3.4 version
It is possible to wait for elements pragmatically. If a test uses element which is not on a page yet, Codeception will wait for few extra seconds before failing. This feature is based on Implicit Wait of Selenium. Codeception enables implicit wait only when searching for a specific element and disables in all other cases. Thus, the performance of a test is not affected.
SmartWait can be enabled by setting wait option in WebDriver config. It expects the number of seconds to wait. Example:
wait: 5
With this config we have the following test:
<?php
// we use wait: 5 instead of
// $I->waitForElement(['css' => '#click-me'], 5);
// to wait for element on page
$I->click(['css' => '#click-me']);
It is important to understand that SmartWait works only with a specific locators:
#locator - CSS ID locator, works
//locator - general XPath locator, works
['css' => 'button''] - strict locator, works
But it won’t be executed for all other locator types. See the example:
<?php
$I->click('Login'); // DISABLED, not a specific locator
$I->fillField('user', 'davert'); // DISABLED, not a specific locator
$I->fillField(['name' => 'password'], '123456'); // ENABLED, strict locator
$I->click('#login'); // ENABLED, locator is CSS ID
$I->see('Hello, Davert'); // DISABLED, Not a locator
$I->seeElement('#userbar'); // ENABLED
$I->dontSeeElement('#login'); // DISABLED, can't wait for element to hide
$I->seeNumberOfElements(['css' => 'button.link'], 5); // DISABLED, can wait only for one element

Answer 3

I used waitForJS from the docs and it worked. Example:
$I->see('Jane Doe', '#table tbody tr');
$I->click(['css' => '#reload-ajax']); // Ajax trigger here
$I->waitForJS("return $.active == 0;", 60);
$I->see('John Doe', '#table tbody tr');