Web Elements
A key attribute to testing web applications is accessing a specific element within DOM (Document Object Model) and performing an action. The DOM is basically a programming interface that creates a tree representation of the HTML. Lets imagine we have this simple Angular web page below to test.
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="./angular.min.js"></script>
<title>My App</title>
</head>
<body>
<a href="www.angularjs.org">Link to Angular</a>
</body>
</html>
Test Scenario
As a user of this website, I expect to see a link to www.angularjs.org.
describe('As a user of website', function() {
it('should have link to www.angularjs.org', function() {
browser.get('http://thisWebsite/');
var el = element(by.linkText('Link to Angular'));
expect(el.getAttribute('href')).toBe('www.angularjs.org');
});
});
Elements
To get to a specific element on the DOM you will use the element function with 1 argument that is a by function. The by function has several possible options that can help locate a specific element.
- by.css
- by.linkText
- by.binding
- by.model
- by.repeater
- find more www.protractortest.org
Actions
Once you have an element then you need to perform an action to that element.
- click()
- sendKeys()
- getAttribute('attrID')
Bonus syntax
If you are familiar with JQuery, you may used to a syntax that looks like.
$('.class')
This works in Protractor as well. It is the same as.
element(by.css('.class'));