Make WebdriverIO wait for a specific component to reload

Question

I am testing an Electron/React app using Spectron, which uses the WebdriverIO commands API. I would like to test the attributes on some components, but I want to be sure I am testing them only after the component has reloaded.

The normal WebDriverIO wait commands like waitForText() or waitForExist(), wait for some change, but I need to wait until a component redraw has occurred. For example the component will already exist or will already have some text before it is redrawn. This means any test on the text will occur before the redraw, and I won't be testing the new text. Is there a general way to wait for a redraw?

Celie

Answer 1

You can use the custom 'waitUntil' command to wait for just about anything. You'd need to figure out what you're waiting for, or how to tell that the component has been redrawn, but it should be possible.

Is there a class name you can tag in to?

Also, the 'waitFor' commands do take negation flags, allowing you to wait for an element to stop existing or stop having text. That might be useful.

Laxity

Answer 2

Another solution, to this specific question on waiting for changing text, is to use an XPath selector. The XPath language treats an HTML page like a tree, but text, amongst other things, is also a separate node in that tree. Unlike a CSS selector, you can easily select an element based on it's inner text. See this article.

So if my XPath selector uses a text 'predicate', then I can use a standard waitForExist command from the webdriver API.

For example, say my p element, after the redraw, should have the text 'Burgers'. It did exist before the redraw but it had some other text. To only select it when it has the new next:

const selector = '//*p[text()="Burgers"]';
browser.waitForExist(selector);

Celie