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

Question

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();

javascript angularjs selenium protractor

Answer 1

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

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 3

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 4

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 5

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 6

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 7

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();
      });

Answer 8

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();
      });

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

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

In Python, a Selenium exception occurred stating: "The 'Service' object does not have the 'process' attribute" within the context of the Selenium IE WebDriver service

Encountering Problems with Dependencies in Selenium Webdriver 2.20 for .Net Client?

Tips for customizing the border of an outlined TextField in MUI

Hmm, JavaScript is throwing a JSON parse error related to single quotes. But where exactly is

Ensuring a correct dismount of a React component

Struggles with ajax and JavaScript arise when attempting to tally up grades

In Three.js, FBX bones exhibit smooth rotation, but GLTF bones display strange rotation behavior

In Vue JS, ensure that each item is loaded only after the previous item has finished loading

Make the checkbox font-weight bold when it is checked

Inverting the order of a list in ng-repeat

Display temporary image until real image loads within ng-repeat angularjs

Conducting selenium tests within a docker-compose setup

Tips for successfully transferring an image through an XMLHttpRequest

Coordinating communication between separate AngularJS directives autonomously

Execute a JavaScript function when a form is submitted

When the state of the grandparent component is updated, the React list element vanishes in the grandchild component. Caution: It is important for each child in a list to have a unique

Learn how to successfully upload an image using React and Node without having to rely on

What are the steps to create an endless scrolling feature?

Learn how to dynamically disable a button using jQuery within the Materialize CSS framework

In search of a comprehensive AJAX-enabled content management system