Waiting for values to finish loading on the page with WebdriverIO

There are many automated tests where you have to wait for certain fields to finish loading actual values on the web page before proceeding to the next verification point. You can see an example of such test below.

At first, let’s implement a new method of the OrderPage class (we use a very simple page-object model here). This class also includes another method to open the page and element locators as getters. browser is a global WebdriverIO object that allows you to interact with the pre-initialized web browser of your choice. I used “wdio-chromedriver-service” to start Google Chrome, but you can use a different service.

waitForMarketValuesToLoad method is waiting for the required fields to load the real values which are not the dashes (-). As you could probably guess, the dashes are loaded immediately upon opening the page and then the real values slowly start to appear, it can take several seconds to load values in those 4 fields. You can also add regular expressions to check the contents of the fields additionally or do it later at your verification point with assertions.

	class OrderPage {
	async open() {
	return await browser.url('https://mytradingsite.com/buy');
	}
	get currentValueField() {
	return $('#current-value');
	}
	get dayBeforeValueField() {
	return $('#day-before-value');
	}
	get sellPriceValueField() {
	return $('#sell-price');
	}
	get buyPriceValueField() {
	return $('#buy-price');
	}
	async waitForMarketValuesToLoad({
	currentValue = true,
	dayBeforeValue = true,
	sellPriceValue = true,
	buyPriceValue = true
	} = {}) {
	if (currentValue) {
	await browser.waitUntil(
	async () => (await this.currentValueField.getText()) !== '-',
	{
	timeout: 30000,
	timeoutMsg: 'Current Price field should not be empty'
	}
	);
	}
	if (dayBeforeValue) {
	await browser.waitUntil(
	async () => (await this.dayBeforeValueField.getText()) !== '-',
	{
	timeout: 30000,
	timeoutMsg: 'Day Before Price field should not be empty'
	}
	);
	}
	if (sellPriceValue) {
	await browser.waitUntil(
	async () => (await this.sellPriceValueField.getText()) !== '-',
	{
	timeout: 30000,
	timeoutMsg: 'Sell Price field should not be empty'
	}
	);
	}
	if (buyPriceValue) {
	await browser.waitUntil(
	async () => (await this.buyPriceValueField.getText()) !== '-',
	{
	timeout: 30000,
	timeoutMsg: 'Buy Price field should not be empty'
	}
	);
	}
	}
	}
	module.exports = new OrderPage();

view raw order.page.js hosted with ❤ by GitHub

Now it’s time to add our new method to the actual test. Note that waitForMarketValuesToLoad method is using named parameters which allow us to use default values and skip certain explicit waits. In this particular case we don’t wait for the value to load in dayBeforeValue field on the page.

	const OrderPage = require('./pageobjects/order.page');
	it('should display all values on the Order page', async function () {
	await OrderPage.open();
	await OrderPage.waitForMarketValuesToLoad({ dayBeforeValue: false });
	// once all required values have finished loading, we can perform the actual verification now
	// your verification point should be here...
	}

view raw openOrderPageAndCheckValues.e2e.js hosted with ❤ by GitHub