WebDriverIO - Select 动态内容下拉选项

Question

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

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

我的代码示例：

  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)

问题是当我执行脚本时 - 它 select 是正确的选项，但下一个下拉列表中的内容没有得到更新（显示默认内容，而不是我的内容 selection).

有人可以帮我吗？

示例：

国家/地区下拉菜单 - select“美国” Region/State 下拉列表 - 显示英国的州。

提前致谢！

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

注意：无论您在第一个下拉列表中 select 做什么，DOM 元素中的 selected 值都将保持不变 United Kingdom.

希望对您有所帮助。

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

WebDriverIO - Select 动态内容下拉选项

WebDriverIO - Select option from dropdown with dynamic content

javascript

selenium-webdriver

webdriver-io