Cheatsheet for Protractor

What is Protractor?

Protractor is an open-source end-to-end testing framework for Angular and AngularJS applications. It was built by Google on the top of WebDriver. It also serves as a replacement for the existing AngularJS E2E testing framework called “Angular Scenario Runner”.

It also works as a solution integrator that combines powerful technologies such as NodeJS, Selenium, Jasmine, WebDriver, Cucumber, Mocha etc. Along with testing of AngularJS application, it also writes automated regression tests for normal web applications. It allows us to test our application just like a real user because it runs the test using an actual browser.

What is Jasmine?

Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

Browser instructions:

browser.get('https://google.com') // Navigate to the given destination

browser.restart() // restart the browser

browser.close() // closes the browser

browser.refresh() // Makes a full reload of the current page

browser.getTitle() // get the title of the current page

browser.waitForAngular() // Instruct webdriver to wait until Angular has finished rendering and has no outstanding `$http` or `$timeout` calls before continuing.

browser.switchTo() // switch WebDriver's focus to a frame or window (e.g. an alert, an iframe, another window).

browser.getCurrentUrl() // returns the current url

browser.takeScreenshot() // takes a screenshot

browser.ignoreSynchronization = true // To work with non AngularJS application.

Working with Locators support for Protractor:

by.css() // Locates elements using a CSS selector

   <h1 class="hello">hello world</h1>

   var h1 = element(by.css('.hello'));

by.cssContainingText() // Locate elements using CSS selector with certain string

   <h1 class="hello">hello world</h1>

   <h1 class="hello">hello universe</h1>

   var h1 = element(by.css('.hello world')); // retruns h1 with hello world

by.tagName() // Locate elements with a given tag name.

   <h1 class="hello">hello world</h1>

   var h1 = element(by.tagName('h1'));

by.linkText() // locate elements whose text matches the given text

   <a href="https://google.com">google</a>

   var link = element(by.linkText('google'));

by.partialLinkText() // locate elements whose text matches the given substring

   <a href="https://google.com">google</a>

   var link = element(by.linkText('goo'));

by.id() // locate element by its id

   <h1 id="hello">hello world</h1>

   var byId = element(by.id('#hello'));

by.className() // locate element by its class name

   <h1 id="hello">hello world</h1>

   var h1 = browser.findElement(by.className('hello'));

by.name() // Locates elements whose name attribute has the given value

  <ul>

    <li name="dog_name">Dog</li>

    <li name="cat_name">Cat</li>

  </ul>

  var dog = browser.findElement(by.name('dog_name'));

by.buttonText() // locate button by text

   <button>Protractor</button>

   var btn = element(by.buttonText('Protractor'));

by.partialButtonText() // locate button by partial text

   <button>Protractor</button>

   var btn = element(by.partialButtonText('Pro'));

by.binding() // Find an element by text binding

   <span>{{person.name}}</span>

   var bind = element(by.binding('person.name'));

by.model() // Find an element by ng-model

   <input type="text" ng-model="person.name">

   var model = element(by.model('person.name'));

by.repeator() // Find an element by ng-repeat

   <div ng-repeat="cat in pets">

     <span>{{cat.name}}</span>

     <span>{{cat.age}}</span>

   </div>

   var repeat = element.all(by.repeator('pets')); // returns a list of pets

   var cat = element(by.repeator('cat in pets').get(1)); //returns the second cat

by.options() // Find an element by ng-options

   <select ng-model="color" ng-options="c for c in colors">

     <option value="0" selected="selected">red</option>

     <option value="1">green</option>

   </select>

   var allOptions = element.all(by.options('c for c in colors'));

by.xpath() // Locates elements matching a XPath selector

  <ul>

    <li name="dog_name"><a href="to_dog.php">Dog</a></li>

  </ul>

  var li = browser.findElement(by.xpath('//ul/li/a'));

Jasmine expect format:

expect(condition).toBeFalsy();

expect(condition).toBeNull();

expect(condition).toBeTruthy();

expect(condition).toBeUndefined();

expect(condition).toEqual(mixed);

expect(condition).toContain(member);

expect(condition).toBeCloseTo(number, decimalPlaces);

expect(condition).toBeGreaterThan(number);

expect(condition).toBeLessThan(number);

expect(condition).toBeNaN();

expect(condition).toHaveBeenCalled();

expect(condition).toHaveBeenCalledTimes(number);

expect(condition).toHaveBeenCalledWith(args);

expect(condition).toThrow(string);

expect(condition).toThrowError(string);

expect(condition).toBe(instance);

expect(condition).toBeDefined();

expect(condition).toMatch(pattern);

For more details, please refer the following URL:

http://www.protractortest.org/#/

https://github.com/angular/protractor/blob/master/docs/api.md