The browser object is a globally created wrapper around an instance of WebDriver. It is used for navigation and page-wide information. With browser.get(), you can navigate to a page and then check the page's title as follows:
describe('Google page', function() {
it('should have a title', function() {
browser.get('https://www.google.com');
expect(browser.getTitle()).toEqual('Google');
});
});
The current URL is returned by browser.getCurrentUrl(). For example:
expect(browser.getCurrentUrl()).toContain('/admin');
Other global objects created by Protractor are element and by. element is a helper function for finding DOM elements on the page you are testing. It requires one parameter--a locator for locating the element. Locators are created using the by object. There is a range of locators. We will only mention a few of them. For a full list, read the official API documentation (http://www.protractortest.org/#/api).
The by.css selector locates elements using a CSS selector. For example:
element(by.css('h1'));
The by.id selector locates an element by its ID. For example:
element(by.id('id'))
The by.tagName selector locates elements with a given tag name. For example:
element(by.tagName('div'))
The element function returns an ElementFinder object, which can be used to interact with the underlying DOM element or get information from it. The following table lists the most important methods of ElementFinder:
| Method | Description |
| getText() | Returns the text of an element. |
| click() | Executes a click on an element. |
| sendKeys(keys) | Sends passed in characters to an element (useful for filling in forms). |
| element(locator) | Finds child elements within a parent (this element) by a given locator. It returns the first found child element as an object of type ElementFinder. |
| all(locator) | Finds child elements within a parent (this element) by a given locator. It returns an array of all found child elements as an object of type ElementArrayFinder. The ElementArrayFinder object has a lot of useful methods. For instance, count() provides a count of found elements, get(index: number) provides an element at a specified position in the array. For more information, read the API documentation. |
| getId() | Gets the ID of the DOM element. |
| isDisplayed() | Checks whether the DOM element is visible. |
| isEnabled() | Checks whether the DOM element is enabled. |
Let's see two examples, and check if an element with the style class info is displayed (visible) as follows:
expect(element(by.css('.info')).isDisplayed()).toBe(true);
The next code snippet checks if a button is clickable:
expect(element(by.tagName('button')).isEnabled()).toBe(true);
Be aware that access operations for DOM elements return promises and not elements themselves. It concerns, for example, getText(), count(), and so on. Protractor patches Jasmine's expect() function so that it waits automatically until the promise gets resolved and the located DOM element is accessible. After that, the matcher will be applied. This is convenient, but there are some cases where you need an access to the value of the resolved promise. In these cases, you can use the promise's then() function explicitly. Assume you want to output the count of rows within a table. The next code snippet exemplifies the idea:
it('should display the correct row count', () => {
const pcount = element.all(by.css('table tr')).count();
pcount.then((count) => {
console.log(`Table has ${count} rows`);
});
expect(pcount).toEqual(20);
});