如何 select 列表中的一个项目，它在 div 内？

Question

我需要 select 一个项目，它是一个列表，但由 div

我正在使用 WebDriver IO (https://webdriver.io/)

<div class="selectize-dropdown demo-default select-class single" style="display: none; width: 196px; top: 40px; left: 0px; visibility: visible;">
  <div class="selectize-dropdown-content">
    <div data-value="1" data-selectable="" class="option">AUTOMOVIL</div>
    <div data-value="2" data-selectable="" class="option">CAMIONETA PASAJ.</div>
    <div data-value="9" data-selectable="" class="option">PICKUP SENCILLA</div>
    <div data-value="6" data-selectable="" class="option">PICKUP DOBLE CAB</div>
    <div data-value="3" data-selectable="" class="option">CAMPERO</div>
    <div data-value="7" data-selectable="" class="option">BUS / BUSETA / MICROBUS</div>
    <div data-value="8" data-selectable="" class="option">CAMIONETA REPAR</div>
    <div data-value="100" data-selectable="" class="option">FURGON / FURGONETA</div>
    <div data-value="4" data-selectable="" class="option">MOTOCICLETA</div>
  </div>
</div>

图中我说明位置1是我必须select的元素，位置2是我想要的属性select，位置3是我想用属性

完成的字段

预期的结果是，在车辆字段中，我可以 select 代码中指示的任何自动选项。

Answer 1

您只需单击列表和 select 索引，如下面的代码所示：

'use strict';

describe('site page', () => {
    it('should click dropdown', () => {
        browser.url('http://testing.123seguro.com.co/');

        $('#selector-tipo-auto > div > div.selectize-input.items.not-full.has-options').click();
        $('#selector-tipo-auto > div > div.selectize-dropdown.demo-default.select-class.single > div > div:nth-child(5)').click();
        browser.pause(1000);

    });
});

Answer 2

我推荐可见文本选项。 ( selectByVisibleText("CAMPERO") )

这样，即使下拉列表的顺序发生变化，它仍会选择您要查找的值。

示例来源：https://chercher.tech/webdriverio/dropdowns

如何 select 列表中的一个项目，它在 div 内？

How to select an item from a list, which is within a div?

javascript

selenium-webdriver

webdriver-io