WebDriverIO - 从带有动态内容的下拉列表中选择选项

Question

这是网站，我正在尝试测试： https://opencart.abstracta.us/index.php?route=account/register

有 2 个下拉菜单 - 国家和地区/州，它们相互依赖。 前任。选择美国，在地区/州下拉菜单中，您将看到美国各州等。

我的代码示例：

  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)

问题是当我执行脚本时 - 它选择了正确的选项，但下一个下拉列表中的内容没有更新（显示默认内容，而不是我选择的内容）。

有人可以帮我吗？

例子：

国家/地区下拉菜单 - 选择“美国” 地区/州下拉菜单 - 显示英国的州。

提前致谢！

Answer 1

看看我是怎么做到的，它在 Chrome 中运行良好，没有在其他浏览器中检查：

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
  });
});

注意：无论您在第一个下拉菜单中选择什么，DOM 元素中的选定值都将保持不变为United Kingdom。

我希望这会有所帮助。

还为开始使用 WebdriverIO here的人们写了一篇文章。