an invalid or illegal selector was specified error on protractor angularjs

Question

so I've been using protractor as my e2e test angularjs component, 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 coming 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 ?

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'))