CODEWITHSUNDEEP
htmlangularjsprotractor
polaris
polaris

Reputation: 47

Getting children elements with protractor

I'm new to Protractor and web development in general, I come from a Java background. I'm doing testing for a web app and I'm having issues trying to get the text from an element.

So the code is organized this way

<parent>
  <parent2>
    <child>
      <target-element>

code I have attached an image with the code. My problem is that there are several child elements with the same class name and tag name. I'm trying to pull them by index and then try to read the text from the target element but it returns an empty string. So from the image I'm trying to retrieve the text 'TU' from the name tag 'text' but I can't seem to be able to that. Here is one of the things I've tried. 

var first = element.all(by.css('.nvd3.nv-wrap.nv-axis g')).get(2);
expect(first.getText()).toBe('TU');

I tried checking that the items are being displayed but it will only check for the first one found 

expect(ecmSummaryTile.implementedPlot.element(by.css('.tick')).
   isDisplayed()).toBe(true);

Based on these examples from Protractor docs, they only show examples with one parent element but in this case the code I'm working with is a bit more convoluted. Can anybody shed some light on how to do this?

code update here is the structure of the code. Unfortunately I cannot give the complete code as it is massive and for my company so I cannot paste the whole source code. But the complete structure for the item I'm working with is the following

<div class = "ecm-summary-chart-container">
<nvd3 class = "ng-isolate-scope">
    <svg class = "nvd3-svg">
        <g class = "nvd3 nv-wrap nv-lineChart">
            <g>
                <g class="nv-legendWrap">
                    <g class="nv-focus">
                        <g class="nv-x nv-axis nvd3-svg">
                            <g class="nvd3 nv-wrap nv-axis">
                                <g>
                                    <g class="tick">
                                    .
                                    .
                                    .

I know I could find the element using nested element(by.css) and keep going down until I get to the element, but I have multiple elements with the same class name which is why I'm not doing that

Upvotes: 1

Views: 8048

Answers (3)

krzygol
krzygol

Reputation: 21

Have You tried this?

var text = $('.nvd3.nv-wrap.nv-axis > g').get(2);

expect(text.getText()).toEqual("TU");

Upvotes: 0

Optimworks
Optimworks

Reputation: 2547

Seems to be locator you mentioned is incorrect(forgot to include one more tag 'g'). Hope below code will resolve your issue.

Code Snippet:

 element.all(by.css('.nvd3.nv-wrap.nv-axis>g>g')).each(function(element, 
        index) {
            // will get each element
             element.getText().then(function (text) {
             console.log(index, text);
              });
           });

Upvotes: 0

alecxe
alecxe

Reputation: 473873

var first = element.all(by.css('.nvd3.nv-wrap.nv-axis g')).get(2);

I think you are on the right track, except that I would add a direct parent-child relationship here and call first() to get the first g:

var first = $$('.nvd3.nv-wrap.nv-axis > g').first();
var text = first.$('.tick text');

expect(text.getText()).toEqual("TU");

You may additionally need to wait for the element to have a TU value:

var EC = protractor.ExpectedConditions;
browser.wait(EC.textToBePresentInElement(text, "TU"), 10000);

expect(text.getText()).toEqual("TU");

Upvotes: 0

Related Questions