When utilizing Md-select in Protractor, how can the dropdown list be accessed?

I am having trouble locating the option from the dropdown menu that I need to select. Despite trying various methods, I have not been successful.

<md-select ng-model="card.type" name="type" aria-label="Select card type" ng-change="$ctrl.onCardSelectionChange(card);$ctrl.onChange(true)" cmtr-no-multiple-bahn-cards="" required="" class="ng-pristine ng-empty ng-invalid ng-invalid-required ng-valid-cmtr-no-multiple-bahn-cards ng-touched" tabindex="0" aria-disabled="false" role="listbox" aria-expanded="false" aria-multiselectable="false" id="select_2162" aria-invalid="true" aria-required="true" aria-owns="select_container_2163" style=""><md-select-value class="md-select-value md-select-placeholder" id="select_value_label_2161"><span>Type</span><span class="md-select-icon" aria-hidden="true"></span></md-select-value></md-select>
<div class="md-select-menu-container md-active md-clickable" aria-hidden="false" role="presentation" id="select_container_2163" style="display: block; left: 52px; top: 137px; min-width: 295.797px; font-size: 16px;"><md-select-menu role="presentation" class="_md" style="transform-origin: 147.898px 8px 0px;"><md-content class="_md">
          <!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2166" aria-checked="true" value="blue_biz"><div class="md-text">
            Blue Biz (AF/KL)
          </div></md-option><!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2167" aria-checked="true" value="partner_plus_benefit_lh"><div class="md-text">
            Partner Plus Benefit (LH)
          </div></md-option><!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2168" aria-checked="true" value="onbusiness_ba_aa_ib"><div class="md-text">
            OnBusiness (BA/AA/IB)
          </div></md-option><!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2169" aria-checked="true" value="SK"><div class="md-text">
            SAS Credit (SK)
          </div></md-option><!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2170" aria-checked="true" value="AY"><div class="md-text">
            Finnair Plus (AY)
          </div></md-option><!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2171" aria-checked="true" value="DY"><div class="md-text">
            Norwegian Reward (DY)
          </div></md-option><!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2172" aria-checked="true" value="D8"><div class="md-text">
            Norwegian Reward (D8)
          </div></md-option><!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2173" aria-checked="true" value="EK"><div class="md-text">
            Skywards (EK)
          </div></md-option><!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2174" aria-checked="true" value="TP"><div class="md-text">
            Air Portugal (TAP)
          </div></md-option><!---->
        </md-content></md-select-menu></div>

element( by.css('.md-select-menu-container md-option[value="blue_biz"]')).click();
javascriptangularjsseleniumprotractor

Answer №1

If you want to select the option 'Blue Biz (AF/KL)', you can use the by.cssContainingText() method like this:

element(by.css('.md-select-menu-container md-select-menu md-content md-option')).element(by.cssContainingText('.md-text', 'Blue Biz (AF/KL)')).click();

This piece of code will help you choose the specified value.

If the previous code snippet doesn't work for you, you can give this alternative code a try:

function clickOption(searchText) {
    let wrapper = element(by.css('.md-select-menu-container'));
    let selectMenu = wrapper.element(by.css('md-select-menu'));
    let mdContent = selectMenu.element(by.css('md-content'));
    let options = mdContent.all(by.css('md-option'));
    return options.filter(el => {
      return el.element(by.css('.md-text')).getText().then(text => text.trim() === searchText);
    }).first().click();
  }

// ...
clickOption('Blue Biz (AF/KL)');

In this updated code structure, each selector is separated and linked together. This helps in identifying any problematic selector that might be causing issues. Additionally, this function returns the matching md-option element. It's also worth considering that clicking on the underlying div may not be feasible in certain cases.

Answer №2

This unique dropdown was created using a combination of divs and spans, making the standard select class ineffective in this scenario.

To interact with this dropdown, you must first capture all its elements into a list and then choose the desired item based on its text content. Here's an example:

 List<WebElement> allValues =   driver.findElements(By.cssSelector("div.md-text"));
     for(WebElement values : allValues) {
         if(values.getText().trim().contains("SAS Credit (SK)")) {
             values.click();
         }   
     }

Answer №3

To choose the option "SAS Credit (SK)" from a drop down menu, simply replace the value with your desired option in the DOM element: 

element(by.id("select_container_2163")).element(by.css("[value='SK']")).click();

Answer №4

At last, I successfully clicked on the drop down menu :)

   let dropdown = element(by.model('card.type'));
      let dropdownOptions = element.all(by.repeater("loyaltyCard in ::$ctrl.loyaltyCards"));

      dropdown.click().then(() => {
          dropdownOptions.get(2).click();
      });

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

Django views are not receiving multiselect data from Ajax requests

As a newcomer to Django, I am still learning the ropes. One challenge I am facing involves a multiselect list on my webpage. I need to send the selected items to my views for processing, and I attempted to accomplish this using Ajax. However, it seems that ...

javascriptjquerydjangoajaxdjango-views

My ReactNative Android application is experiencing significant lag, is there anyone who can assist me in resolving this issue?

Currently, I'm tackling a reactnative android app project and have noticed a significant drop in performance. Unfortunately, I am clueless about the root cause of this issue. Could it be related to the navigator or are there other underlying factors a ...

javascriptreactjsreact-native

Struggling to Find Element in Selenium WebDriver Across Three Frames

I'm just starting out with Selenium Webdriver and I've encountered a couple of issues while trying to automate a webpage. One problem is that I am unable to click the Search button in the frame. Here's the snippet of code I have been using: ...

javaseleniumwebdriverselenium-webdriver

What is the best way to create a custom hook that updates in response to changes in state?

My situation involves a custom hook that handles a specific state variable. After making changes to the state, it doesn't update right away. To solve this issue, I need to subscribe to it using useEffect. The challenge is that I can't directly ...

javascriptreactjstypescript

I am looking to have my page refresh just one time

I have created an admin page where I can delete users, but each time I delete a user, the page requires a refresh. I attempted to use header refresh, but this action caused my page to refresh multiple times. Is there a way to ensure that my page only refr ...

javascriptphpjquery

Adjust the size of the Div and its content to fit the dimensions of

Currently, I have a div containing elements that are aligned perfectly. However, I need to scale this div to fit the viewport size. Using CSS scale is not an option as it does not support pixel values. https://i.stack.imgur.com/uThqx.png I am looking to ...

javascripthtmlcss

Guide to using a Selector in a mixin in VUE

I'm attempting to create a Mixin that will help me calculate the offsetWidth of an element. Here is my Mixin: export const boxWidth = (selector) => ({ mounted() { selector.addEventListener( 'resize', this.setBoxWidth ); ...

javascriptvue.jsmixins

Exploring AngularJS: Understanding ng-bind-html and maximizing ng-repeat

I have a dilemma regarding the views I am updating once retrieved from the database for this particular template: <div class="row" ng-repeat="post in posts"> <div class="col-lg-9 col-lg-offset-2"> <!-- blog entry - ...

angularjsangularjs-scopeangularjs-ng-repeat

Exploring document in Node.js

Is there a way to read the data of a file (for example, read.txt) in Node.js without buffering the data? I want to access the content of the file directly rather than as buffered data. Also, how can I delete a folder in Node.js? ...

javascriptnode.jsnpmweb-development-serverangular-fullstack

I am encountering an issue where the nested loop in Angular TypeScript is failing to return

I am facing an issue with my nested loop inside a function. The problem is that it is only returning the default value of false, instead of the value calculated within the loop. Can someone please point out what I might be doing incorrectly? Provided belo ...

javascriptangulartypescript

recoil struggles to manage the error thrown by an asynchronous selector

Recoil offers the ability for users to throw errors in async selectors. For more information, please refer to the documentation. Both "<ErrorBoundary>" and "useRecoilValueLoadable()" can handle errors from async selectors, but I encountered issues w ...

javascriptreactjsasynchronousselectorrecoiljs

Having trouble finding a solution in NODE.JS for this issue: "No 'Access-Control-Allow-Origin' header is present on the requested resource" (in a nodejs and angularjs environment)

I've recently started working with node.js and have been building a Rest API. The API is functioning properly, however, I'm encountering an "access-control-allow-origin" error whenever I call the services through angularjs. I've tried adding ...

angularjsnode.js

Having trouble with jqGrid data format?

Having some trouble with jqGrid and displaying data in a treeview format. The issue is that the 6th item (cid=6) is not appearing in the grid. Additionally, it seems like the 4th item may have subitems, but expanding that branch reveals nothing. I cannot f ...

javascriptjqueryjsonjqgrid

Having trouble accessing the height of a div within an Iframe

Here is the issue I am facing: I need my iFrame to adjust its size based on a div within it, but every attempt to retrieve the size of this div results in 0. var childiFrame = document.getElementById("myDiv"); console.log(childiFra ...

javascripthtmliframe

Determine the number of elements in a table using WebDriver and Python

When utilizing Selenium, I extract text from various elements within a table named TableExample: element1 = driver.find_element_by_xpath("//table[@id='TableExemple']/tbody/tr[2]/td").text element2 = driver.find_element_by_xpath("//table[@id=&a ...

pythonseleniumselenium-webdriver

"Despite adding the domain to the whitelist, Firebase authentication is still not authorizing the domain

I have integrated Firebase Auth (version 4.1.3) with Google sign-in into my Angular4 project. Everything runs smoothly on localhost. However, once I deploy the app on Google App Engine, the authentication popup encounters an "auth/unauthorized-domain" erro ...

angularjsgoogle-app-enginefirebasefirebase-authentication

Obtain headers from receiving an external JavaScript file

I am trying to find a way to import an external .js file and access the response headers from that request. <script src="external/file.js?onload=callback"> function callback(data) { data.getAllResponseHeaders(); } </script> Unfortunately, ...

javascriptajaxhttphttp-headers

Customize the top bar text in your Zurb Foundation for Apps App based on the current page

Currently, my project involves the creation of a single page application utilizing Zurb's Foundation for Applications and Angular. Can anyone suggest an optimal method to showcase different text in the top bar (nav bar) depending on the current route ...

angularjszurb-foundation

When using Multer for file upload, the req.body returns as an empty object while req.file is undefined

I previously shared a problem I encountered while using multer for file upload in the MERN stack. Despite my attempts, I have not yet been able to resolve it. In my app, I am using both body-parser and multer. Here is the order of code in my index.js file: ...

javascriptnode.jsexpressmultipartform-datamulter

Executing jQuery code after a data update in Angular can be achieved by utilizing

Currently, I am working with Angular 1.4.7 on a site that was not set up by me. As a result, I am uncertain about the specific information needed in this scenario. We are displaying search filters, but their enabling or disabling is controlled by data fetc ...

javascriptjqueryangularjs