docs(locators.js): Example - how do I get the image url?

[petermajor]

The documentation example for "by.repeater" show the following html:

<div class="book-img" ng-repeat-start="book in library">
  <img ng-src="{{book.imgUrl}}"></img>
</div>
<div class="book-info" ng-repeat-end>
  <h4>{{book.name}}</h4>
  <p>{{book.blurb}}</p>
</div>

However, it doesn't show how I can get the value for "book.imgUrl".

I've tried:
element.all(by.repeater('book in library').column('imgUrl'));

But I get the error message:
Error: No element found using locator: by.repeater("book in library").column("imgUrl")

Could we have some extra description in the docs on how to check this particular property please?

[juliemr]

This is a poor example, since {{book.imgUrl}} isn't a binding, it's an ng-src attribute. The column function searches for bindings, so it won't find book.imgUrl.

I think the least confusing this here would just be to remove that <img> from the docs. It's not adding anything.

[petermajor]

But could you tell me how I can get that value?

It's something that I want to do in real life! That's why I got so excited by this example...

Rather than delete the fragment from the example, we could show how to get it...

On 30 Jun 2014 19:40, "Julie Ralph" [email protected] wrote:

This is a poor example, since {{book.imgUrl}} isn't a binding, it's an
ng-src attribute. The column function searches for bindings, so it won't
find book.imgUrl.

I think the least confusing this here would just be to remove that
from the docs. It's not adding anything.

—
Reply to this email directly or view it on GitHub
#1000 (comment).

[juliemr]

I deleted it because I think that it's confusing for an example.

There are a couple ways to do this:

You can use getAttribute(src) on the element. Once Angular compiles it, it will look like:

<div class="book-img">
  <img src="foo.jpg"></img>
</div>
<div class="book-info">
  <h4>name</h4>
  <p>blurb</p>
</div>

So to get the URL of the first book you can do

var firstDiv = element.all(by.repeater('book in library').row(0)).first();
firstDiv.element(by.tagName('img')).getAttribute('src');

Or, you can use element.evaluate to get the value:

element(by.repeater('book in library').row(0).column('book.name')).evaluate('book.imgUrl')

[petermajor]

Awesome that worked. I've been trying to do that all day! Thank you!

[shruti-dubey]

##############################################



This is the source
I have to fetch only the file name from URL of image
How to do that it do not contains ng-repeat or ng-bind
I have tried
var imgLogo =element(by.src(".img-responsive"));
// expect(img.isPresent()).toBe(true);
But only verify the image tag.
How to fetch file name from img src

[jainshravan123]

Hi @juliemr

I can see very clearly that you helped so many people. Please help me to get out one problem.

<div class="unique_class" my-attribute="obj.data"></div>

So how can i get the actual value of (obj.data) using protractor?

I tried to use getAttribue() method but it's returning only (obj.data) as text not the value of it. So how can i get the actual value of it. Please help me.

Thank You

Regards,
Shravan Jain

[wswebcreation]

Hi @jainshravan123

Your question is better suited for StackOverflow or Gitter. Please ask a question there with the 'protractor' tag or post in the Gitter Channel to get help.

From the the getting help section of the README:

Please ask usage and debugging questions on StackOverflow (use the "protractor" tag) or in the Angular discussion group. (Please do not ask support questions here on Github.)

If you post it on Stackoverflow and provide more info I'll try to answer it.

[jainshravan123]

Will post it there but it's a small problem please reply here only. I need the solution asap. If you reply then that would be really helpful.

[dvtai1987]

hello
i have question:
i have img tag:

<h1 _ngcontent-c1>
    <img _ngcontent-c1 alt height="30" src="./assets/images/logo.png" width="auto">
</h1>

and my code is

it ('should have logo image', function() {
        expect(element(by.xpath("//img[@src='/assets/images/logo.png']")).isPresent()).toBe(true);
    });

it met error:
Failed: Error while waiting for Protractor to sync with the page: "Could not find testability for element."

[wswebcreation]

@TakaDN

Your question is better suited for StackOverflow or Gitter. Please ask a question there with the 'protractor' tag or post in the Gitter Channel to get help.

From the the getting help section of the README:

Please ask usage and debugging questions on StackOverflow
(use the "protractor" tag) or in the Angular discussion group. (Please do not ask support questions here on Github.)

Thanks!