Skip to content

Instantly share code, notes, and snippets.

@julekgwa
Last active August 9, 2021 04:19
Show Gist options
  • Save julekgwa/28ecfc93f3998b4302e2653bf43ac4ed to your computer and use it in GitHub Desktop.
Save julekgwa/28ecfc93f3998b4302e2653bf43ac4ed to your computer and use it in GitHub Desktop.
Protractor API Cheatsheet with Examples
Table of Contents

Protractor Cheatsheet

Resolving promises

most of the commands/functions return promises, which can be resolved by using expect() or then().

 //using return to resolve promises
 <h1>Hello world</h1>
 return element(by.tagName('h1')).getText().then(function(text){
  expect(text).toContain('Hello');
 });

Browser

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.sleep(10000) // Schedules a command to make the driver sleep for the given amount of time.

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

Working with Locators

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

Working with Elements

element.all() // retruns an array of elements
    <ul class="list">
        <li class="foo">2a</li>
        <li class="bar">2b</li>
    </ul>
    var ul = element.all(by.css('.list'))
element.get() // Get an element within the array by index
    <ul class="list">
        <li class="foo">2a</li>
        <li class="bar">2b</li>
    </ul>
    var ul = element.all(by.css('.list')) // retruns an array
    var first = ul.get(0)
element.first() // Get the first element in the array
    <ul class="list">
        <li class="foo">2a</li>
        <li class="bar">2b</li>
    </ul>
    var ul = element.all(by.css('.list')) // retruns an array
    var first = ul.first();
element.last() // Get the last element in the array
    <ul class="list">
        <li class="foo">2a</li>
        <li class="bar">2b</li>
    </ul>
    var ul = element.all(by.css('.list')) // retruns an array
    var first = ul.last();
element.count() // counts the number of elements
    <ul class="list">
        <li class="foo">2a</li>
        <li class="bar">2b</li>
    </ul>
    var ul = element.all(by.css('.list')) // retruns an array
    var total = ul.count();
element.isPresent() // Determine whether the element is present on the page.
    <input ng-model="person.name"/>
     element(by.model('person.name')).isPresent() // use expect to test for conditions  
element.each() // loops over array of elements
    <ul class="list">
        <li class="foo">2a</li>
        <li class="bar">2b</li>
    </ul>
    var ul = element.all(by.css('.list'));
    ul.each(function(elem, index) {
      //loops over each element
    });
element.click() // loops over array of elements
   <button class="register">Register</button>
   element(by.css('.register')).click(); // clicks the button
element.sendKeys() // send input to form inputs
   <input type="text" class="name" />
   element(by.css('.name')).sendKeys('John Doe'); // fills the input with text "John Doe"
by.getTagName() // get tag name of an element
    <h1 id="hello">hello world</h1>
    var tag = element(by.css('.hello')).getTagName();
by.getCssValue() // get css value of an element
    <h1 id="hello">hello world</h1>
    var cssValue = element(by.tagName('h1')).getCssValue();
by.getAttribute() // get value of an attribute
    <h1 id="hello">hello world</h1>
    var id = element(by.tagName('h1')).getAttribute('id');
by.getText() // get text of an element
    <h1 id="hello">hello world</h1>
    var text = element(by.tagName('h1')).getText();
by.getSize() // returns the size of an element in pixels
    <h1 id="hello">hello world</h1>
    var size = element(by.tagName('h1')).getSize(); // returns object with width and height
by.getLocation() // returns the location of the element
    <h1 id="hello">hello world</h1>
    var location = element(by.tagName('h1')).getLocation(); // returns the location of an element {x,y}
element.isEnabled() // Determine whether the element is enabled.
    <input ng-model="person.name" disabled="true"/>
    element(by.model('person.name')).isEnabled() // use with expect to test for conditions  
element.isSelected() // Determine whether the element is selected.
    <input id="foo" type="checkbox">
    element(by.id('foo')).isSelected() // use with expect to test for conditions  
element.submit() // submits a form
    <form id="login">
      <input name="user">
    </form>
    element(by.id('login')).submit();
element.sendKeys() // clears the value of an input
   <input type="text" class="name" />
   element(by.css('.name')).clear();
element.isDisplayed() // Determine whether the element is currently displayed.
    <input ng-model="person.name" hidden="true" />
    element(by.model('person.name')).isPresent() // use expect to test for conditions  

Jasmine expect and matchers

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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment