Discovering multiple elements using CSS selectors in Protractor for AngularJS is an essential

Question

Discovering multiple elements using CSS selectors in Protractor for AngularJS is an essential

Delving into the world of CSS as a newcomer, I aim to steer clear of using xpath in my Protractor AngularJS test automations. Despite successfully targeting a specific element within a list, Protractor warns me about multiple elements found for the locator. To avoid such issues in the future, especially when not always needing the first list item, I seek clarity on leveraging CSS to reach my destination - a task made challenging by vague documentation. My current focus is on capturing the "Marketing Venue" element but will eventually expand to include other elements below it. The snippet showcases how AngularJS currently aids in retrieving text data. Much appreciated for any insights.

var iPlanLevel=element(by.css("div:nth-of-type(2) > div:nth-of-type(2) > div > div:nth-of-type(1) > span")).getText().then(function (text) {
  console.log(text);
}
);

<!-- begin snippet: js hide: false -->

<div class="home-info">

  <span class="web-developer-id-class-details"></span>
  <div class="home-top home-section"></div>
  <span class="web-developer-id-class-details"></span>
  <div class="home-bottom home-section">
    <h3></h3>
    <span class="web-developer-id-class-details"></span>
    <div class="home-box">
      <span class="web-developer-id-class-details"></span>
      <span class="home-name"></span>
      <br></br>


      Lindemannstrasse 88

      <br></br>


      Dortmund 44137

      <br></br>
      <br></br>
      <span class="web-developer-id-class-details"></span>
      <div class="property-group meduim">
        <div></div>
        <span>

                    MarketingVenue

                </span>
      </div>
      <span class="web-developer-id-class-details">

                .property-group.meduim

            </span>
      <div class="property-group meduim">
        <div></div>
        <span>

                    December 31, 2016

                </span>
      </div>
      <span class="web-developer-id-class-details"></span>
      <div class="property-group meduim"></div>
      <div></div>
      <br></br>
    </div>
    <span class="web-developer-id-class-details"></span>
    <div class="home-box"></div>
  </div>

</div>

html css angularjs protractor

Answer 1

Answer №1

Have the capability to alter the HTML being tested? If so, consider adding a tag within the Marketing Venue span for enhanced utility. For example, you could insert name="marketingVenue", allowing you to implement something similar to this:

// Utilizing shorthand for element selection by css selector ($ = by.css())
var marketingVenue = $('[name="marketingVenue"]');

// Employing css selector shorthand for child selection
var marketingChild = marketingVenue.$('[name="childBeneathMarketingVenue]');

// Selecting a child using a variable and element(el.locator())
var marketingChildSelector = $('[name="childBeneathMarketingVenue"]');
var marketingChild = marketingVenue.element(marketingChildSelector.locator());

If modifying the HTML is not an option, the code above can still be utilized with a longer, albeit fragile css selector.

To address warnings related to multiple elements, all elements must be obtained, then either .first or .get(x) used to select a specific one from the array.

// Obtain all elements with a specified tag using shorthand $$ element.all(by.css(x))
var marketingVenues = $$('[name="marketingVenues"]');
var firstMarketingVenue = marketingVenues.first();
var specificMarketingVenue = marketingVenues.get(12); // Retrieve the 13th element from the array

This function can also be employed to exclusively retrieve visible element(s), assuming that the html contains both hidden and visible elements.


// Input a string css selector to fetch the initial visible element of that selector
function getVisibleElements(selector){
    var allElementsOfSelector = element.all(by.css(selector));
    var displayedElement = allElementsOfSelector.filter(function(elem) {
        return elem.isDisplayed('cannot find' + ' ' + selector);
    }) // Add '.first();' at this point if only the first visible element is desired
    return displayedElement;
}

var visibleMarketingVenues = getVisibleElements('[name="marketingVenues"]');
var marketingVenue = visibleMarketingVenues.first();
var fifthMarketingVenue = visibleMarketingVenues.get(4);

In cases where modification of the html is not feasible, altering the selector may be necessary if any changes occur on the page itself, as div selectors are notably delicate. Your current selector may resemble the following:

var marketingVenue = $$('.property-group').get(0).$('span');

Answer 2

Have the capability to alter the HTML being tested? If so, consider adding a tag within the Marketing Venue span for enhanced utility. For example, you could insert name="marketingVenue", allowing you to implement something similar to this:

// Utilizing shorthand for element selection by css selector ($ = by.css())
var marketingVenue = $('[name="marketingVenue"]');

// Employing css selector shorthand for child selection
var marketingChild = marketingVenue.$('[name="childBeneathMarketingVenue]');

// Selecting a child using a variable and element(el.locator())
var marketingChildSelector = $('[name="childBeneathMarketingVenue"]');
var marketingChild = marketingVenue.element(marketingChildSelector.locator());

If modifying the HTML is not an option, the code above can still be utilized with a longer, albeit fragile css selector.

To address warnings related to multiple elements, all elements must be obtained, then either .first or .get(x) used to select a specific one from the array.

// Obtain all elements with a specified tag using shorthand $$ element.all(by.css(x))
var marketingVenues = $$('[name="marketingVenues"]');
var firstMarketingVenue = marketingVenues.first();
var specificMarketingVenue = marketingVenues.get(12); // Retrieve the 13th element from the array

This function can also be employed to exclusively retrieve visible element(s), assuming that the html contains both hidden and visible elements.


// Input a string css selector to fetch the initial visible element of that selector
function getVisibleElements(selector){
    var allElementsOfSelector = element.all(by.css(selector));
    var displayedElement = allElementsOfSelector.filter(function(elem) {
        return elem.isDisplayed('cannot find' + ' ' + selector);
    }) // Add '.first();' at this point if only the first visible element is desired
    return displayedElement;
}

var visibleMarketingVenues = getVisibleElements('[name="marketingVenues"]');
var marketingVenue = visibleMarketingVenues.first();
var fifthMarketingVenue = visibleMarketingVenues.get(4);

In cases where modification of the html is not feasible, altering the selector may be necessary if any changes occur on the page itself, as div selectors are notably delicate. Your current selector may resemble the following:

var marketingVenue = $$('.property-group').get(0).$('span');

Discovering multiple elements using CSS selectors in Protractor for AngularJS is an essential

Answer №1

Similar questions

Update the date format in the user interface datepicker for jHipster

I'm trying to figure out how to retrieve data from a JQuery autocomplete response that contains an array. Specifically, I want

Bootstrap carousel slide animation isn't transitioning properly

Dynamic addition of modules to my Angular application is a must

Discovering the Javascript Code Executing on a <span> element with the Help of Chrome Inspector or Firebug

The :before pseudo element doesn't seem to be functioning properly on Internet Explorer 11

Uniform Fixed Width for Material UI Table Cells

Trigger event once item is selected from the jQuery combobox dropdown

Exploring the World of AngularJS HTTP Interceptors

Angular application defaulting to Hashbang element

serving static files with Express.js and integrating an Angular application

How to create a custom input border style while maintaining the focus outline in Firefox and Internet Explorer

The click event in AngularJS is functioning properly, while the load event is not functioning correctly

What is the best way to align a table (datatable) to the left?

"Help needed: The HTML dialog element is obstructing the invisible reCAPTCHA challenge popup. Any solutions for resolving this

Angular <select><option> tags are missing from the browser display, although they are present in the source HTML code

Arrange the elements within the anchor tag in a vertical line using Angular Material

issue in Angular.js with ng-if not rendering correctly

TabContainer - streamline your selection process with inline tabs

Layout of CSS grid being created dynamically