Wednesday, January 15, 2014

angular js protractor e2e cheatsheet

Many from the protractor test suite

category detailed task syntax example
load page load a page browser.get('yoururl')
browser btn actions browser back/forward browser.navigate().back() OR browser.navigate().forward()
access elements on page
See Protractor API list and examples
from Protractors test suite
access by angular ngmodel name
(must match ngmodel in the html)
this is the preferred approach
element(by.model('person.name'));
access by the css id on the page e.g, #user_name
(but this can be brittle)
element(by.id('user_name'))
access angular binding to get generated value
i.e. for {{}}
element(by.binding('person.concatName'));
access angular repeat list data
(must match repeat stmt in the html)
See Protractor test suit link for lots more
element.all(by.repeater('person in home.results'));
element.all(by.repeater('person in home.results')).count()
element.all(by.repeater('person in home.results')).row(0)

note: repeater must match that on the page
by text area element(by.textarea('person.extraDetails'));
by input element ( by . input ( 'username' ));
element ( by . input ( 'username' )).clear();
get text from an input element ( by . input ( 'username' )).getText()
But note: "There is a  webdriver quirk<input>  and  <textarea>  elements
always have empty  getText  values. Instead, try
  element.getAttribute('value') ."
access using jquery $ selector ($ is an alias for .by.css)
you can use any css selector (but this can be brittle)
$('.class1 .class2');
data entry
(entering data, hitting keys etc)
enter data into input
hit enter
hit tab
protractor supports other keys too
element(by.id('user_name')). sendKeys("user1")
sendKeys(protractor.Key.ENTER)
protractor.Key.TAB
click click a control such as button, radio element(by.id('create')).click();
clear a field
          username
          .
          clear
          ()
        
is enabled is the button enabled element(by.id('create')). isEnabled();


All keys are in /webdriver/key.js including BACK_SPACE, TAB, CLEAR, RETURN, ENTER, SHIFT, SPACE, ESCAPE, arrow up/down/left/right, function keys, numpad etc.

element.all() returns an object as follows: { count : Function, get : Function, first : Function, last : Function, then : Function, each : Function, map : Function }

You made me promises, promises...

  • when you call a method on a protractor element you get back a promise e.g. obj.getText()
  • protractor expect wraps and handles that promise for you  e.g. expect(obj.getText()).toBe("bob")
  • if you need to get the result of the promise you could do something like: obj.getText().then(function(text) { var bobIndex = text.indexOf("bob"); })


4 comments:

  1. Another nice one:

    var checkBoxes = element.all(by.css('input .optionCheck'));
    checkBoxes.get(2).click(); // Click the third checkbox in the above match

    ReplyDelete
  2. great post! some more:

    * browser.sleep(10000); // if your test is outrunning the browser
    * browser.waitForAngular(); // if your test is outrunning the browser
    * browser.getLocationAbsUrl() // get the current address

    ReplyDelete
  3. I can add this two -

    var someElement = $('.foo');

    someElement.isPresent(); // Returns true/false if element is present in page DOM structure. This method does not check if element is visible for user.

    someElement.isDisplayed(); // Returns true/false if element is VISIBLE on page for user.

    Be careful with first - do not check element visibility with it. Use second for that.

    ReplyDelete