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

Avoiding repetitive rendering of child components in ReactJS

In my React project, I have a parent component that contains 3 children components, structured like this: var Parent = React.createClass({ render: function() { return (<div> <C1/> <C2/> <C3/> ...

Tips for loading a webpage directly to the center instead of the top position

Is there a way to make the page open at a specific div halfway down the page instead of starting from the top? Here is an example: <div id="d1"> <div id="d2"> <div id="d3"> <div id="d4"> <div id="d5"> <div id="d6"> Do ...

Enhancing React Native experience by dynamically editing array elements

This code block defines the state of my program, including an array: this.state = { arr: [{ arrid: 0, arrEmail: '', arrName: '', arrPhone: '' }], id: 0, email: "", isChecked: true, name: "", phon ...

I am trying to understand why my React component's render function is being called twice - first without any data and then again with data, resulting in a

I am facing an issue with my TreeNav component, where the data is fetched from an API call. I have set up the reducer, action, and promise correctly, but when I try to map over the data in the component render function, I get an error saying "Uncaught Type ...

bring in all the files located within the Directory

Is there a way to import all CSS files from a specific folder without having to import each file individually? Looking to import assets/css/* ? <link href="<?php echo base_url(); ?>assets/css/*" rel="stylesheet"/> <title&g ...

Headless ChromeDriver encounters ElementNotVisibleException

I am new to using Selenium. I require a headless browser as the project will be integrated with Jenkins. After some consideration, I opted for ChromeDriver in Headless mode. While utilizing ChromeDriver in regular mode, I can successfully interact with al ...

Undo a CSS transition when clicked

There is a div named learn-more which expands to fill the whole page when a CSS class is added like this: .learn-more{ padding:10px; font-size: 20px; text-align: center; margin-top:20px; font-family: klight; -webkit-transition:2s; ...

Upon extracting the Glassdoor reviews, only the initial page is retrieved

Currently, I am working on extracting reviews from companies listed on Glassdoor using Selenium. However, I am facing an issue where the code is only able to extract reviews from the first page and not from subsequent pages. Even though I have implemente ...

Transfer information to an ExpressJS server in order to display a fresh view

I'm struggling to figure out how to transfer data from the client side to an ExpressJS server in order to generate a view based on that information. When users choose different parameters on the client side, they update the 'data-preference&apos ...

Retrieval of jQuery remove() method

Essentially, I am utilizing an OnClick function to delete a DIV. Once the OnClick is triggered, it invokes the remove() jQuery function to eliminate the div. Below is my code that implements the removal using remove(): <div id="add"> <button typ ...

When attempting to navigate to a different page in Next.js, the Cypress visit functionality may not function as

In my upcoming application, there are two main pages: Login and Cars. On the Cars page, users can click on a specific car to view more details about it. The URL format is as follows: /cars for the general cars page and /cars/car-id for the individual car p ...

Is it possible to use JQuery to target input nodes based on their values?

How can I check if any of the file input boxes in my list have a value using just one selector statement? Is it possible to achieve this with code like the following: $('input:file[value!=null]') Or is there another way to accomplish this? ...

Is there a way to incorporate a CSS file into this without explicitly mentioning the color?

I have successfully implemented a PHP solution for changing themes with a cookie that remembers the selected theme color when the user leaves the site. However, I now need to switch this functionality to JavaScript while still utilizing the CSS file. How c ...

Integrating Watson Conversation with Oracle Database

Hello everyone, I am currently working on a project where I need Watson to fetch a response manually set from our Oracle Databases. To achieve this, I am using async to access the database sequentially and return the response. Initially, I faced an issue ...

The back-to-top button guides users back to their last visited page

I'm excited to explore AngularJS and I want to add two "return to top" buttons on different pages. Here's what I have so far: Page 1: <h1 id = "top"> .......... <a href="#top" target = "_self">Return to Top</a> Page ...

Retrieving the data from a Material UI Slider control

I'm encountering an issue with retrieving the value property I assigned to a component. event.target.value is returning undefined. How can I successfully access the value of the component? My goal is for handlePlayersChange() to be able to handle dyn ...

Is React dependent on the render process to update its state?

In my code, I am encountering an issue where the state of a key is not updating correctly even after performing operations on its value within a function. The scenario involves a function named clickMe, which is triggered by an onClick event for a button ...

Ways to have a function return a promise from the final "then" in a series of promises

I am delving into the world of test automation with Selenium and JavaScript. As a newcomer to both, along with functional programming and promises, I am facing a challenge in creating a function that performs three essential tasks: Click on an input Clea ...

The function $.fn.dataTable.render.moment does not exist in npm package

I have encountered an issue with my application that I am struggling to solve: I want to format dates in my data table using Moment.js like I have done in the following script: $().ready(function() { const FROM_PATTERN = 'YYYY-MM-DD HH:mm:ss.SSS&a ...

Unable to dynamically append items to Owl Carousel using JavaScript

I am currently working on adding items dynamically to an Owl carousel. This is how I am approaching it: HTML <div id="avatar-carousel" class="owl-carousel lesson-carousel"> <div class="item item-logo"& ...