- Resolving promises
- Working with the Browser
- Working with Locators
- Working with Elements
- Jasmine expect and matchers
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.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 screenshotby.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 worldby.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 catby.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'));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 buttonelement.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 heightby.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 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);