Tap the <li> element in a select2 dropdown from Bootstrap using internjs

I am currently encountering an issue while trying to select values from a Bootstrap-select2 drop-down in my form during the process of writing some function tests.

If Select2 is unfamiliar to you, here are some examples that may help:

The drop-downs are unordered lists that become visible when clicked on.

To make the list appear, I use the following code:

.findById('select2-chosen-1').click().end()

After making the list appear, I am unsure how to specifically select an item from it.

If I run the following code snippet, all the selections get printed out:

.findById('select2-results-1')
      .getVisibleText()
      .then(function(text) {
        console.info(text);
 })

Although I attempted to fetch all the li tag names using .findAllByTagName('li'), I am uncertain about what further actions to take with that array.

I would greatly appreciate any guidance or suggestions to steer me in the right direction. Feel free to ask if you need additional information.

Thank you!

Answer №1

When you unveil the dropdown menu, locate the specific item you wish to choose and give it a click. My preferred methods are using findByXpath, or combining findByCssSelector and findByXpath especially when looking for text-containing elements like:

.findById('select2-chosen-1')
.click()
.end()

.findByCssSelector('.select2-drop-active .select2-results')
.findByXpath('.//li[div[text()="Alaska"]]')
.click()
.end(2)

The above code snippet first identifies and clicks on the Select2 element, then navigates to the dropdown results section. By referencing the result node, it utilizes an XPath query to pinpoint the li that houses a div with the text "Alaska", followed by clicking on that li. The end(2) after the click action manages both the findByXpath and findByCssSelector functions.

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

Preventing click propagation for custom react components nested within a MapContainer

I have developed a custom control React component for a map as shown below: export const MapZoom = () => { const map = useMap() const handleButtonClick = () => { map.zoomIn() } return ( <IconButton aria ...

Error: The element cannot be clicked at the coordinates (x,y) due to an overlap with another element

Greetings! I've been encountering the ElementClickInterceptedException error, specifically: "Element is not clickable at point (x,y) because another element obscures it." Despite trying various workarounds, such as implementing a time delay, I haven& ...

What could be the issue with my code? (Threejs spotlight shadow)

I recently created a Three.js scene featuring two cubes on a plane. The spotLight I placed in the top-left corner is intended to look at the coordinates 50, 0, -50. However, I noticed that the shadows appear odd and the light does not seem to be focusing ...

Transforming a form submission into an AJAX post while already in an AJAX post

I am looking to convert a form submission to an ajax post request while working within the codeigniter framework. The current JavaScript code is: $('#book-appointment-submit').click(function(event) { event.preventDefault(); var formData ...

"Enhancing Functionality: A Detailed Guide on Callback Functions in Express

Currently, I am expanding my coding skills by learning express/Node, transitioning from C and PHP/MySQL. The MDN tutorial on express has been incredibly helpful in my learning journey, making everything straightforward. Thanks to the Mozilla teaching team, ...

Incorporate an array into a JSON object using AngularJS

I'm attempting to append a JSON array to a JSON object. Here's my code: $scope.packageElement = { "settings": [ { "showNextPallet": true, "isParcelData": false, "isFreightData": true, " ...

Guide on managing Pageload and demonstrating outcomes in the source tab utilizing Selenium

I am in need of a way to create a script that can capture all the properties of objects on a screen and generate an XML using JavaScript and jQuery. However, I am facing an issue where clicking a submit button or link causes the page to navigate away, res ...

Utilizing Vue's string-based class binding feature?

Can Vue class binding work with strings? For example: <div :class={open: target == 'myString'}></div> var app = new Vue({ target: null }) It works when I don't use quotes <div :class={open: target == myString}></div ...

The proper technique for locating web elements within a `<ul>` using Selenium

How can elements be properly located within a list like the one presented below: <div class="aui-header-primary"> <ul class="aui-nav __skate" style="width: auto;"> <li> <li> <li> <li> & ...

Is it possible to identify horizontal scrolling without causing a reflow in the browser?

If you need to detect a browser scroll event on a specific element, you can use the following code: element.addEventListener('scroll', function (event) { // perform desired actions }); In order to distinguish between vertical and horizontal ...

Attempting to Retrieve Information from a Get Request using Axios

I am attempting to retrieve SQL data from a GET request using axios. My backend is set up with an express server, and the front end is built with React. In my React component, I have a function that contains the axios GET call, which I then invoke within t ...

Using Selenium to automate form navigation and patiently waiting for a file to complete downloading

Although I know this question has been asked countless times, I haven't been able to find a solution elsewhere. I've done my best to research and understand the available information, but I could really use some guidance. My goal is to download ...

Navigate the orbit control camera in a circular motion around the target object

Just starting out in the world of threejs. I've managed to create a cube with different colors on each face. This cube can be rotated using OrbitControl, and I have 6 buttons in Dat.GUI that control the camera position. My goal is to click "Animate t ...

Jquery feature to automatically hide the submit button

Is there a way to automatically hide the submit button and display a message without requiring a mouse click? If the main balance is less than the inputted withdrawal amount, I want the submit button to be hidden automatically and a message stating insuff ...

What is the best way to retrieve the text input fields while using express-fileupload with React?

Front end Uploading a File: <div className="form-group row"> <label htmlFor="directorySSH" className="col-sm-3 col-form-label">Directory: </label> <div className="col-sm-7"> <input ty ...

Function activation in Element requires a double click to initiate

I've encountered an issue with a web element I'm working on where the click function only triggers after the first click, rendering the initial click ineffective. Here's the code snippet in question: HTML: <div> <a href="#0" cla ...

Reading the final element in the series with an IF statement

Something strange is happening with my code. I have a variable called racks_value that gets updated based on calculations performed on the page. Despite manually setting racks_value to 2 and confirming it with a console log, after running a series of IF st ...

Leveraging Webpack and Jest for seamless module importing in a development project

I've been working on a Node project and utilizing imports and exports extensively. To package the frontend code, I opted for Webpack. However, it seems to require running as common JS. Moreover, Jest is being used in my project, which led me to spec ...

Use jquery or javascript to align a button to the center

Can the vote button be centered in the script below? <script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6352993.js"></script> <noscript><a href="http://polldaddy.com/poll/6352993/">This is a le ...

What is the best way to extract the src attribute from an image tag nested within innerHtml?

In the developer tools, navigate to console and enter: var x= document.getElementsByClassName('ad-area')[0].innerHTML; x returns: '<a href="/members/spotlight/311"><img class="block-banner" src="https://tes ...