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

Question

I need to select an item, which is a list, but which is composed of a div

I'm using 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>

In the image I explain that in position 1 there is the element that I must select, in position 2 it is the attribute that I want to select, and in position 3 there is the field that I want to complete with the attribute

The expected result would be that in the Vehicle field, I could select any auto option indicated in the code.

Answer 1

You could just click the list and select the index as shown in the code below:

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

    });
});