-1

I'm using Protractor with Cucumber for my tests, but I can't get an element cause the classname is the same of others classes and it don't have other attribute. How can i get this element? The element is: "tileGrid content". I can't use xpath cause the page is edited sometimes.

Here my html:

<div class="tileGrid content">
  <div class="spacing-container undefined">
    <div class="title">
      <h3 class="h2 heading">External Services</h3>
    </div>
  </div>
</div>

Thank you for your help.

Ben Mohorc
  • 694
  • 6
  • 16
Spicchio
  • 126
  • 13
  • Please post relevant html and js code snippets in your question. Codes in external links and images are discouraged in SO. – AndrewL64 Jun 05 '18 at 13:47
  • Hi AndrewL, thank you for your answer. I don't have js cause I don't know how to take "only" this element. It don't have others attributes, only "class". I could do something like "element(by.css('tileGrid.content'));" but in this way I take all the elements with this classname, and there are a lot. – Spicchio Jun 05 '18 at 14:13
  • Actually, that code snippet you just posted in the comment above will only grab the first element that matches. You would need to use `element.all()` to get all of them. Is there something more specific about this element that you need? Why this one specifically? – tehbeardedone Jun 05 '18 at 14:18
  • Hi tehbeardedone, thank you for your answer. I have to check if there is this specific element, cause is the container of a component in page, and in feature file it's written that i have to check if this element is present. After element.all(), how can i get this specific element? There aren't other attributes on div tag that contain the container, so I don't know how to specific this. In normal javascript I use document.getElementsByClassname('tileGrid Container')[0], or something like "children" or "childNodes" to do this. – Spicchio Jun 05 '18 at 14:42
  • To clarify, Do you just need to check that the header with the text External Services is present? Or is there something else you are looking for? If there is something else you are looking for you can get all of the elements and then filter by whatever it is you are looking for. For example, with the html snippet you posted above, You could get all the div's with the class `titleGrid` and then filter by the element's text to find the one containing `External Services` and return that so you know it's the right element. – tehbeardedone Jun 05 '18 at 18:46
  • Or, in this specific case you could just use `element(by.cssContainingText('div.titleGrid', 'External Services'))` to make things easier. – tehbeardedone Jun 05 '18 at 18:46

1 Answers1

0

I'm imagining your structure to be something similar to:

<div>
  <div class="tileGrid content">
    <div class="spacing-container undefined">
      <div class="title">
        <h3 class="h2 heading">External Services</h3>
      </div>
    </div>
  </div>
  <div class="tileGrid content">
    <div class="spacing-container undefined">
      <div class="title">
        <h3 class="h2 heading">Other Header</h3>
      </div>
    </div>
  </div>
  <div class="tileGrid content">
    <div class="spacing-container undefined">
      <div class="title">
        <h3 class="h2 heading">Another Header</h3>
      </div>
    </div>
  </div>
 ...
</div>

There are a few ways you could interact with something like this, but I'll give just 3 examples:

This will look for the first child with the div tag within its parent

by.css('div div.content:nth-of-type(1)')

This will look for the first child with any tag within its parent

by.css('div div.content:nth-child(1)')

This will look for the text inside the h3 tag, and will select the element 3 layers above it:

by.xpath('//*/h3[text()="External Services"]/../../..')

Or find a DIV which includes a H3 and the H3's text is External Services as following:

by.xpath('//div[contains(@class, "tileGrid")][.//h3[text()="External Services"]]')
yong
  • 13,357
  • 1
  • 16
  • 27
KyleFairns
  • 2,947
  • 1
  • 15
  • 35
  • I add a locator `by.xpath('//div[contains(@class, "tileGrid")][.//h3[text()="External Services"]]')` above, please give a try to see it work and can satisfy the page change in future. – yong Jun 06 '18 at 06:13