What is the best way to choose an item from a list nested inside a div?

Currently, I am facing the challenge of selecting an item from a list that is structured using a div

For this task, I am utilizing 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 provided image, I have identified the necessary elements for selection. Element in position 1 requires selection, attribute in position 2 needs to be chosen, and the field in position 3 has to be filled with the selected attribute.

The desired outcome is to be able to choose any automobile option displayed in the code within the Vehicle field.

https://i.sstatic.net/3yMzN.png

javascriptselenium-webdriverwebdriver-io

Answer №1

To select the index from a list, you can simply click on the list and choose the desired index using the code snippet 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);

    });
});

Answer №2

I suggest utilizing the selectByVisibleText("CAMPERO") method for selecting options in dropdown lists.

By choosing the visible text option, you ensure that even if the order of the dropdown list changes, your desired value will still be selected.

For more information, refer to this example source:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to modify the state with a computed setter in VueJS

In my Vue.js project, I am trying to work with a form where the end_saving value needs to be computed based on the values of start_saving and duration. To achieve this, I want to utilize the saving.end_saving property in the v-model for submission via a PO ...

javascriptvue.jsaxios

Reading a JSON file stored within the project directory on iPhone PhoneGap using JavaScript

I need to access a JSON file stored in a project folder. Currently, I am using the following code: var obj = "www/places.json"; Can someone help me figure out how to read a JSON file located in the project folder www when working with iPhone PhoneGap an ...

javascriptjqueryiosjsoncordova

Durable Container for input and select fields

I need a solution for creating persistent placeholders in input and select boxes. For instance, <input type="text" placeholder="Enter First Name:" /> When the user focuses on the input box and enters their name, let's say "John", I want the pl ...

javascriptjqueryhtmldomplaceholder

Tips for preventing circular dependencies in JavaScript/TypeScript

How can one effectively avoid circular dependencies? This issue has been encountered in JavaScript, but it can also arise in other programming languages. For instance, there is a module called translationService.ts where upon changing the locale, settings ...

javascripttypescript

IE8 and IE9 encountering "Access is denied" error due to XML causing XDomainRequest (CORS) issue

Sorry if this seems repetitive, but I am unable to find a definitive answer to similar questions. Whenever I attempt to make a CORS request for XML, I consistently encounter an "Access is denied" JavaScript error in IE8. The code I am using is based on t ...

javascriptajaxinternet-explorer-8xmlhttprequestcross-domain

Modify one specific variable within my comprehensive collection on Firebase Firestore

After clicking the button, I need to update a variable. The variable in question is "bagAmount" and it is stored in my firestore collection. Here is a link to view the Firestore Collection: Firestore Collection Currently, I am able to update one of the va ...

javascriptangulartypescriptfirebasegoogle-cloud-firestore

How can the event listener be utilized with md-autocomplete?

I am currently in the process of developing an angularjs application that incorporates an autocomplete feature. One key aspect of this application is that certain fields cannot be populated until an item has been selected using the autocomplete function. ...

javascriptangularjsarraysautocompleteangularjs-material

Incorporating an element into a nested array

I have an array stored in a variable called 'items' with various products and their attributes. I am looking to randomly generate a popularity score between 1 and 100 for the items that currently do not have one. This is my current array: const ...

javascriptarrayspush

Clicking will cause my background content to blur

Is there a way to implement a menu button that, when clicked, reveals a menu with blurred content in the background? And when clicked again, the content returns to normal? Here's the current HTML structure: <div class="menu"> <div class=" ...

javascriptjqueryhtmlcss

Error when accessing YouTube API Credentials - TypeError occurred: Unable to retrieve property '0' as it is undefined

I have encountered an issue with the YouTube API Browser key. I have two keys at my disposal, one that I created recently and another from a sample project where I obtained the code. The problem arises when I try to use my own key, as it seems to be ineffe ...

javascriptjqueryajaxyoutubeyoutube-api

Is there a way to dynamically integrate the Insert Column feature into the ContextMenu of a Syncfusion Treegrid?

What is the best way to add Insert Column functionality to the ContextMenu of a Syncfusion Treegrid? Insert Column Rename Column Delete Column ...

javascriptsyncfusion

What is the best way to reference an i18n entry within .json files?

I am in the process of creating a user interface using SAP UI5 and my goal is to make all text elements internationalized. Below is a snippet of my view in .xml format where I successfully retrieve text in different languages using placeholders enclosed i ...

javascriptjsoninternationalizationsapui5

Setting up a Webdriver UserAgent in chrome does not appear to accurately mimic an iPhone

Running my driver as an iPhone using the UserAgent ruby gem (webdriver-user-agent) in Chrome or Firefox is not displaying the screen correctly compared to manual settings. The mobile elements on screen remain invisible. I'm unsure if this User Agent ...

rubygoogle-chromecucumberselenium-webdriveruser-agent

Angular Leaflet area selection feature

Having an issue with the leaflet-area-select plugin in my Angular9 project. Whenever I try to call this.map.selectArea, VSCode gives me an error saying that property 'selectArea' does not exist on type 'Map'. How can I resolve this? I& ...

javascriptangulartypescriptleaflet

The Transparent Quirk in Three.js

Hey there! I'm working on displaying a 3D avatar on my website that allows users to apply textures to the character. I'm hoping to enable users to create transparent textures so they can see the model underneath. Right now, when implementing tran ...

javascriptthree.js

The grid fails to apply remote filtering values when an additional Nested ajax call is incorporated alongside the current HttpProxy configuration

Whenever I click for filter/sort for remote filtering, Forms.asp triggers using a proxy and automatically reloads. Previously, when I used the script below to reload the ExtJS grid with Forms.asp returning new XML with filtered grid data, everything worked ...

javascriptajaxextjshttp-proxy

A step-by-step guide on incorporating universal CSRF tokens using JQuery AJAX

As part of my development work, I am in the process of creating jquery code that communicates with the server through ajax to input data into a database based on specific request parameters. My main concern at this point is the vulnerability to CSRF attac ...

phpjavascriptjqueryajaxcsrf

Arranging HTML components in Vue.js using v-for loop

Recently, I started using vue.js and I have a requirement where I need to display an HTML structure based on API data. The structure should look like this: <div class="row"> <div><p>text1</p><img src="{{imgurl1}}" /></di ...

javascripthtmlvue.js

Are you familiar with the Puppeteer PDF tool that generates empty pages from the cloud and seamlessly integrates with Postman? What do

After days of searching, tweaking, and deploying, I still can't get this to work. I'm hoping it's just a simple mistake on my part that someone else can help me with. I am attempting to use Puppeteer to generate a PDF from a Node.js Express ...

javascriptnode.jsexpresspdfpuppeteer

Can you include the dollar symbol in the currency format?

I currently have this code that formats numbers into currency format, however I would like to include the dollar sign ($) before the numbers. document.getElementById("numbers").onblur = function (){ this.value = parseFloat(this.value.r ...

javascripthtmlnumberscurrency