so I've been using protractor as my e2e test angularjs ponent, and I've been facing this issue..

so I've got an html markup like this

 <div class="item">
       <div class="item-grid">grid A</div>
       <div class="item-actions">
           <input type="image" class="item-action-image" title="info" src="images/icons/system-info.png">
           <input type="image" class="item-action-image" title="event" src="images/icons/system-event.png">
       </div>
    </div>
<div class="item">
       <div class="item-grid">grid B</div>
       <div class="item-actions">
           <input type="image" class="item-action-image" title="info" src="images/icons/system-info.png">
           <input type="image" class="item-action-image" title="event" src="images/icons/system-event.png">
       </div>
    </div>

let's say if one of the input typed image above was clicked, there will be an information modal ing up to display the information.

so I want to create a scenario on protractor to simulate those..

the scenario would be

it("should've display grid information datas", function() {

        element(by.css(".item:eq(0) > .item-actions > input[title='info']")).click();

        browser.waitForAngular();

  });

logical explanation for the above code is the protractor would select the first '.item' element then click the 'input[title="info"]' inside it right ?

but instead I got this error

InvalidSelectorError: The given selector .item:eq(0) > .item-actions > input[title='info'] is either invalid or does not result in a WebElement. The following error occurred:
InvalidSelectorError: An invalid or illegal selector was specified

therefore I've been stuck since I'm new to using protractor.. is there anybody that could help me solve this issue ?

so I've been using protractor as my e2e test angularjs ponent, and I've been facing this issue..

so I've got an html markup like this

 <div class="item">
       <div class="item-grid">grid A</div>
       <div class="item-actions">
           <input type="image" class="item-action-image" title="info" src="images/icons/system-info.png">
           <input type="image" class="item-action-image" title="event" src="images/icons/system-event.png">
       </div>
    </div>
<div class="item">
       <div class="item-grid">grid B</div>
       <div class="item-actions">
           <input type="image" class="item-action-image" title="info" src="images/icons/system-info.png">
           <input type="image" class="item-action-image" title="event" src="images/icons/system-event.png">
       </div>
    </div>

let's say if one of the input typed image above was clicked, there will be an information modal ing up to display the information.

so I want to create a scenario on protractor to simulate those..

the scenario would be

it("should've display grid information datas", function() {

        element(by.css(".item:eq(0) > .item-actions > input[title='info']")).click();

        browser.waitForAngular();

  });

logical explanation for the above code is the protractor would select the first '.item' element then click the 'input[title="info"]' inside it right ?

but instead I got this error

InvalidSelectorError: The given selector .item:eq(0) > .item-actions > input[title='info'] is either invalid or does not result in a WebElement. The following error occurred:
InvalidSelectorError: An invalid or illegal selector was specified

therefore I've been stuck since I'm new to using protractor.. is there anybody that could help me solve this issue ?

• javascript
• angularjs
• css-selectors
• protractor

• 1 :eq(0) isn't CSS AFAIK – Quentin Commented Apr 13, 2015 at 11:07
• 1 @Quentin: It is a jquery selector, unavailable in css files. (I have no idea if protractor supports those...) – Cerbrus Commented Apr 13, 2015 at 11:07
• Try just .item > .item-actions > input[title='info']") That should give you the input under the first .item – Ruan Mendes Commented Apr 13, 2015 at 11:08
• @JuanMendes I've tried the one that you suggested, unfortunately the one that is being clicked is not the first element :( – Eka Rudianto Commented Apr 13, 2015 at 11:13
• 1 @user3860691 If you show the HTML around .item, we can help using nth-child You can try .item:nth-child(1) > .item-actions > input[title='info']") – Ruan Mendes Commented Apr 13, 2015 at 11:17

1 Answer 1

You can chain ElementFinders. For example:

$$('.item')
  .get(1)
  .$('input[title=info]')
  .click();

Or

element.all(by.css('.item'))
  .get(1)
  .element(by.css('input[title=info]')
  .click();

Notice that $$('.abc') is the same as element.all(by.css('.abc')) and $('.abc') is the same as element(by.css('.abc'))