WebDriverIO - Select option from dropdown with dynamic content

Question

Here's the website, I'm trying to test: https://opencart.abstracta.us/index.php?route=account/register

There are 2 drop-downs - Country and Region / State, they depend on one another. Ex. Choose United States and in Region/State dropdown you will see US states and so on.

Example of my Code:

  const countryDropdown = $(this.demoHomeElement.countryDropdown)
  countryDropdown.selectByAttribute('value', '223');
  //countryDropdown.selectByVisibleText('United States')
  browser.pause(3000);
  countryDropdown.selectByAttribute('value', '223');

  const zoneDropdown = $(this.demoHomeElement.zoneDropdown)
  //zoneDropdown.selectByAttribute('value', '3630');
  zoneDropdown.selectByVisibleText('Florida')
  browser.pause(3000)

The problem is when I execute the script - it selects the correct option, but the content in the next dropdown not getting updated (Displays the default stuff, instead of stuff for my selection).

Could somebody please help me with that?

Example:

Country dropdown - select "United States" Region/State dropdown - displays states for UK.

Thanks in advance!

Answer 1

look how I did it and it works nicely in Chrome, did not check in other browsers:

describe("Test scenario", () => {
  it("Select drop downs", () => {
    browser.url(
      "https://opencart.abstracta.us/index.php?route=account/register"
    );

    $("//h1[text()='Register Account']").waitForDisplayed(); // just check that page elements are loaded on the page

    const selectBoxOne = $("#input-country");
    const selectBoxTwo = $("#input-zone");
    const spinner = $(
      "//i[contains(@class,'fa') and contains(@class,'fa-circle-o-notch') and contains(@class,'fa-spin')]"
    ); // after selecting BoxOne there will be a spinner...

    selectBoxOne.selectByAttribute("value", "103"); // Ireland

    browser.waitUntil(() => spinner.isDisplayed() == false); // wait for spinner to go away

    selectBoxTwo.selectByVisibleText("Dublin");
    browser.pause(5000); // Just to get a chance to see it
  });
});

Note: no matter what you select in the first drop down the selected value in the DOM element will remain unchanged to United Kingdom.

I hope this helps.

Wrote also an article for folks getting started with WebdriverIO here.