Pick from a dropdown menu by using the CSS Selector ID to select the desired option within a select field

Hello, I am trying to use the Intern over CSS Selector ID to select a specific option from a select field.

<div class="controls">
<select id="customer.profile.dateOfBirth_day" 
class="form-controlmb" name="customer.profile.dateOfBirth_day">

...options...

I have attempted the following commands:

.findByCssSelector('customer\.profile\.dateOfBirth_day > option:nth-child(3)')

.findByCssSelector('input[id="customer.profile.dateOfBirth_day"] > option:nth-child(3)')

Example of the code that I am using:

.findByCssSelector('customer.profile.dateOfBirth_day > option:nth-child(3)')
          .click()
          .end()

If anyone has any suggestions or solutions for me, I would greatly appreciate it. Thank you in advance!

jqueryhtmlcssautomationintern

Answer №1

After searching for a while, I finally discovered the correct command:

.findByCssSelector('select#customer\\.profile\\.dateOfBirth_day > option:nth-child(3)')

A big thank you to everyone who helped me in this process!

Answer №2

To choose specific options, you can use the following code:

.findByCssSelector('option[value="foo"]')

Alternatively, you can apply the same method to other attributes like name, title, or id.

For more ways to select options using jQuery, check out this thread: How do you select a particular option in a SELECT element in jQuery?

Answer №3

Here is another approach to tackle this task. Instead of relying on complex CSS selectors, I prefer using a simple findById() method in my page object (). In the test script below, I demonstrate how to select the 3rd option (March) and verify that it has been selected correctly:

"Selecting the Posting Period month": function () {
                return FormFields.PostingPeriod.Month()
                    .click()
                    .findAllByTagName('option')
                    .then(function (results) {
                        return results[3].click();
                    })
                    .end()
                    .then(function () {
                        return FormFields.PostingPeriod.Month();
                    })
                    .getProperty('value')
                    .then(function (result) {
                        expect(result).to.equal('March');
                    });
            }

The select element includes an initial blank option, so choosing the 3rd option corresponds to 'March'. By mimicking user behavior of clicking on the element and then selecting an option, we simplify the testing process.

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

Could someone please assist me with an issue I am experiencing with an AJAX GET request?

My code is not fetching any data for me. Below is the code snippet: <script type="text/javascript"> function matriculaFn(mat) { $.ajax({ method: 'GET', url:'My url API, async: true, crossDomain: false, contentType: 'application/j ...

javascriptjqueryajaxget

The issue I am experiencing within my PHP code is that the redirection to the gratitude page is not functioning correctly when utilizing

As a newcomer to PHP, I have been struggling with an example code from a website that is not redirecting to the thank you page as expected. Moreover, the email functionality is not working properly either. The code was sourced from: Upon downloading the f ...

javascriptphphtml

Ways to deactivate a button using CSS

I need to use Javascript to disable a link based on its id. By default, the link is invisible. I will only enable the link when the specific id value comes from the backend. HTML <li id="viewroleId" style="display: none;"> <a href="viewrole" ...

javascripthtmlcssangularjs

Issue: Please avoid using HTML tag <img>. Instead, utilize the Image component from 'next/image' - Next.js when working with styled components

While working with Next.js, I encountered an issue with the Image component. Unlike a regular HTML tag, the Image component requires a layout and doesn't offer the same level of control. Additionally, I found that it couldn't be used with framer ...

javascripthtmlnext.jseslintnextjs-image

Issue with text-nowrap not functioning as intended within Bootstrap 4.5 table cells

Is there a way to eliminate the space between two columns in my layout? I want to get rid of the highlighted space below. I attempted using text-nowrap, but it didn't achieve the desired result. <link href="https://stackpath.bootstrapcdn.co ...

csstwitter-bootstrapbootstrap-4html-tablenowrap

Managing Page Refresh in an ASP.NET MVC Single Page Application

I am currently developing a single-page application using ASP.NET MVC. The starting point of the application is /home/index. All other views will be loaded via ajax. Now, let's say the user is on the page /home/index#/home/widgetdemo and decides to ...

jqueryajaxasp.net-mvcsingle-page-application

What could be causing my function to exclude only the final element of the array when it returns?

My goal with the following code is to retrieve all items from item.children. However, I am puzzled as to why it's not returning the last item. After conducting multiple result logs and SQL verifications, I eventually pinpointed the issue in a specific ...

javascriptphpjqueryajaxfrontend

What steps can I take to unite these two elements?

I'm having trouble adjusting the spacing between the #bigimage and #textarea elements while keeping them centered as a col-12 on small screens. Do you think using a media query would solve this issue? I attempted to place them in a separate container ...

htmlcssbootstrap-4

Displaying Image URLs in a Web Form using AJAX

I have been researching how to accomplish this task. So far, my search has led me to uploading an image and then using AJAX to preview it. Is there a way to do the same for an image URL? For example, when a user submits an image URL, can AJAX provide a ...

javascriptjqueryajaxhtmlforms

Is it possible to add a callback function to an each loop in JavaScript?

I have five elements in a group, and when one is clicked, it disappears in sequential order. A new background image related to the clicked element then loads and crossfades into view. I'm working on injecting new content once the new background is lo ...

jqueryajaxjquery-callback

Instructions for launching an Android app from a website

Is it possible to invoke my app from HTML? For instance, I am able to successfully call a webpage from my app using this code. android code: startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse( "myDomain.com"))); ...

javascriptandroidhtmliosweb

Changing the selection in the Angular Mat-Select dropdown causes the dropdown's position to shift

Issue with dropdown position: The dropdown should display below the select element, but when selecting the second value, it appears on top of the select element. I have removed any relevant CSS to troubleshoot, but the problem persists. See screenshots for ...

htmlcssangularangular-material

Ensure that the HTML input only accepts numbers and email addresses

Is there a way to restrict an HTML input field to only accept numbers and email IDs? <input id="input" type="text" /> ...

javascripthtml

Arranging the initial and final elements in an array (Sequential values are organized by grouping them with the first and last elements)

My task involves working with an object array containing time intervals, where Number 0 corresponds to Sunday. On my time scheduling page, I need to select different time ranges for a particular day and group the time values accordingly. The initial array ...

javascriptjqueryarraysobject

Are there alternative methods for transferring parameters between pages without using the URL?

Is it possible to transfer parameters from one page to another without including them in the URL? Typically, values are sent via the URL for retrieval on the subsequent page. For example, in AngularJs: <li ng-repeat="cat in x.Child"><a ng-href=" ...

javascriptjqueryangularjsasp.net-mvcasp.net-ajax

Exploring the possibility of designing custom pageload tooltips inspired by jQuery validationEngine's visual style and interface

My website incorporates the jQuery.validationEngine plugin to ensure the accuracy of user input. The tooltips that accompany this validation feature are particularly appealing; they gracefully fade in and vanish when users interact with them. To visualize ...

javascriptjqueryjquery-plugins

Is IntelliJ equipped with CSS autocomplete and Emmet features?

Encountering some challenges with IntelliJ 13 and autocompletion while working on CSS. Previously, to set margin: I would simply type: mar then press Tab. However, in the new version, it now shows max-resolution instead: Initially thought it might be rel ...

cssintellij-idea

Enhance your HTML page functionality with the power of jQuery

I'm working on creating a HTML page with interactive options. I want to implement an option menu that will pop up when hovered over or clicked, allowing me to customize colors, background patterns, and more. It seems like this involves altering the CS ...

htmljquerycss

Navigating a puzzle menu in web design can be simplified with a few easy steps

When it comes to executing my design ideas, I have 2 options in mind. My main concern is which one will offer more flexibility for adding animations and tinkering with CSS later on. The first idea involves a navigation menu where hovering over an item mak ...

htmlcsscss-shapes

Retrieving a targeted JSON element and adding it to a fresh object

Hello everyone, I have an object that resembles the following structure: [ { "app": 1, "scalable": true, "zoomable": true, "cropBoxResizable": true }, { "app" ...

javascriptjqueryjson