Identifying clickable element in angularjs - ng-binding

Question

I have a search field with results powered by ElasticSearch and I am automating the selecting of one of the results. CSS and XPath do not yield very much in terms of selecting the element and clicking it so I am hoping for some help.

Code:

li data-ng-repeat="match in matches" data-ng-class="{active:          isActive($index) }" data-ng-mouseenter="selectActive($index)" data-ng-  click="selectMatch($index)" class="ng-scope active">
<a tabindex="-1" class="bg-info ng-scope">
<div class="search-item-container row">
<div class="col-sm-10">
  <span class="company-name ng-binding" bind-html-unsafe="match.model.name.length > 30 ? (match.model.name.substr(0,30) + '...').toLowerCase() : match.model.name.toLowerCase() | typeaheadHighlight:query"><strong>alph</strong>, incorporated</span>
  <div class="company-info">
    <address>
      <span class="address-span-container ng-isolate-scope" data-ng-switch="displayFormat" data-obb-address-display-directive="" data-addresses="match.model.addresses" data-display-format="inlineCsz"

Using Protractor my selector would be: element(by."some selector"(item to select))).click();

I've tried both CSS and Xpath and the results are: NoSuchElementError: No element found using locator: By.cssSelector(".search-popup li:nth-child(3) a")

Could you provide us with some more of the HTML code? This will allow us to provide you with an accurate answer. — Tom Nijs
– Tom Nijs, Commented Apr 30, 2015 at 18:03
I've tried to add some more code but it won't work for me (I'm guessing because I'm doing something wrong). So the jist is this, if you go to openbookben.com and enter a name like "acme" or any company name really, the search dropdown appears and I am trying to select a company from that dropdown. — Drew
– Drew, Commented Apr 30, 2015 at 18:49

avandeursen · Accepted Answer · 2015-04-30 21:50:59Z

1

Looking at openbookben.com, it looks like you need the following steps:

Send your search query to the appropriate element (sendKeys to the #landingSearch element)
Let Protractor wait until the search results become displayed. This is the case when the element(by.css(ul.dropdown-menu)).isDisplayed() promise yields true.
Click on one of the search results from the match in matches repeater using, e.g., Protractor's all.elements(by.repeater('match in matches'))
Again, let Protractor wait, this time until the new page with company in the URL is loaded.

For the waiting in steps 2 and 4, you can use Protractor's wait method, or Protractor's Expected Conditions.

Your NoSuchElementError occurs because without the waiting, the search results are not there yet.

answered Apr 30, 2015 at 21:50

avandeursen

8,7383 gold badges44 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Drew Over a year ago

I'm still not clear on step 3. 'match in matches'. If I click one of the results, the new page loads which is good. But I am not sure how the selector works. How do I actually get Protractor to actually pick .click() a particular result? All of the results have the 'match in matches' so I'm not sure how to discern which I'm actually selecting?

Drew Over a year ago

Okay think I've got it figured out. This can be closed. Thanks everyone!

Collectives™ on Stack Overflow

Identifying clickable element in angularjs - ng-binding

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related