Protractor is built to interact with AngularJS applications. In this lesson, we will take a look at how Protractor interacts with the application using its element and finder functions.
The index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>E2E Testing</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="AppCtrl as vm">
<div class="row text-center">
<a class="btn btn-primary"
id="button1"
ng-click="vm.updateMessageText('button 1 clicked')">
Button 1
</a>
</div>
<div class="row h3 text-center">{{ vm.messageText }}</div>
</div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js:
angular.module('app', [])
.controller('AppCtrl', function (){
var vm = this;
vm.updateMessageText = function (text){
vm.messageText = text;
}
});
index.spec.js:
describe('Simple page test', function() {
it('Should get title of the page', function() {
browser.get('http://127.0.0.1:8080');
expect(browser.getTitle()).toBe('E2E Testing');
});
it('should update the button text when click the button', function(){
var button = element(by.id('button1')),
message = element(by.binding('vm.messageText'));
button.click();
expect(message.getText()).toBe('button 1 clicked');
})
});
RUN:
webdriver-manager start
protractor protractor.conf.js