jQuery like syntactical sugar for Protractor
JavaScript HTML

README.md

Proquery

Circle CI npm

The goal of this project is to help writing Integration Tests faster than ever. As everybody is pretty familiar with jQuery and it's nifty selectors for querying DOM, I decided to use jQuery approach to query elements wihout using Protractor Jargons. If you think in jQuery, you do not even have to groak Proquery API :-)

Prior Art

https://github.com/angular/protractor/issues/397

Development

Resolve NPM and Bower depedencies,

$ npm install
$ bower install

Testing

To run tests against Protractor testapp:

$ webdriver-manager start
$ git clone https://github.com/angular/protractor.git
$ cd protractor/
$ npm start

To execute end-to-end tests on a specific browser, use:

$ git clone https://github.com/codef0rmer/proquery.git
$ cd proquery/
$ npm start
$ npm test

API Docs

Refer tests/spec.js or tests/protractor_tests/ for more help.

$ npm install -g proquery
var $ = require('proquery');

As per Protractor API, $ matches a single element, however, Proquery's $ matches multiple elements by default. For the old behavior use:

$ $('.menu', true).getTagName())

The second parameter is useOriginal and will match a single element instead.

Proquery Selectors Protractor Selectors
$('iframe').length element.all(by.css('iframe')).count()
$('[type="text"]') element.all(by.css('[type="text"]'))
$('textarea') element.all(by.css('textarea'))
$('.menu') element.all(by.css('.menu'))
$('#checkboxes') element.all(by.id('checkboxes'))
$('[ng-model="username"]') element.all(by.model('username'))
$('{{username}}') element.all(by.binding('username'))
$('[ng-repeat="baz in days"]') element.all(by.repeater('baz in days'))
$('[ng-options="fruit for fruit in fruits"]') element.all(by.options('fruit for fruit in fruits'))
$('#animals ul .pet') element.all(by.cssContainingText('#animals ul .pet'))
$('[type="text"]:first') element.all(by.css('[type="text"]')).first()
$('[type="text"]:last') element.all(by.css('[type="text"]')).last()
$('a:contains("repeater")') element.all(by.partialLinkText('repeater'))
$('button:contains("text")') element.all(by.partialButtonText('text'))
$('#animals ul .pet:contains("dog")') element.all(by.cssContainingText('#animals ul .pet', 'dog'))
$('[ng-model="fruit"]').find('option') element.all(by.model('fruit')).all(by.css('option')
$('[ng-model="fruit"]').find('option:checked') element.all(by.model('fruit')).all(by.css('option:checked')
$(':focus') browser.driver.switchTo().activeElement()
$('[class="pet"]').attr('value') element.all(by.css('[class="pet"]')).first().getAttribute('value')
$('[class="pet"]:first').val() element(by.css('[class="pet"]')).getAttribute('value')
$('[type="text"]:first').val('') element(by.css('[type="text"]')).clear()
$('[type="text"]:first').val('codef0rmer') element(by.css('[type="text"]')).sendKeys('codef0rmer')
$('[class="pet"]:first').text() element(by.css('[class="pet"]')).getText()
$('[class="pet"]:first').html() element(by.css('[class="pet"]')).first().getInnerHtml()
$('body').find('[class="pet"]') element.all(by.css('body')).all(by.css('[class="pet"]'))
$('[class="pet"]').get(0) element.all(by.css('[class="pet"]')).get(0)
$('[class="pet"]:eq(0)') element.all('[class="pet"]').get(0).getWebElement()
$('[ng-repeat="baz in days"]').get(0) element(by.repeater('baz in days').row(0))
$('[ng-repeat="baz in days"]').get(0).find('baz.initial') element(by.repeater('baz in days').row(0).column('baz.initial'))
$('[ng-repeat="baz in days"]').find('baz.initial') element.all(by.repeater('baz in days').column('baz.initial'))
$('[ng-repeat="baz in days"]').find('baz.initial').get(1) element.all(by.repeater('baz in days').column('baz.initial').row(1))
$('#checkboxes:first').is(':present') element(by.id('checkboxes')).isPresent()
$('#checkboxes:first').is(':visible') element(by.id('checkboxes')).isDisplayed()
$('#checkboxes:first').is(':enabled') element(by.id('checkboxes')).isEnabled()
$('#checkboxes:first').is(':checked') element(by.id('checkboxes')).isSelected()
$('{{greeting}}').eq(0) element.all(by.binding('greeting')).get(0).getWebElement()
var $doc = $('iframe').get(0).contents();
expect($doc.find('#checkboxes').is(':present')).toBeTruthy();
$doc.end();
browser.driver.switchTo().frame(0);
expect(element(by.id('checkboxes')).isPresent()).toBeTruthy();
browser.driver.switchTo().defaultContent();

Todos

  • Support for .switchTo() popup windows
  • Support by.exactBinding and by.buttonText to map exact text instead of partial
  • Find a jQuery-like API for .switchTo().alert()
  • Support KEYS using .trigger method e.g. .trigger('enter') over .sendKeys(protractor.Key.ENTER)
  • Support complex selectors such as $('body div:last span:eq(2) a:contains("Link")')

Differences with jQuery

  • .length returns promise instead of number unlike jQuery
  • .get returns matched element instead of element reference a.k.a webElement unlike jQuery
  • .eq returns element reference a.k.a webElement instead of matched element unlike jQuery