Angular 2 Angular 2 - Protractor Testing Navbar routing with Protractor
Example
First lets create basic navbar.html with 3 options. (Home, List , Create)
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li>
<a id="home-navbar" routerLink="/home">Home</a>
</li>
<li>
<a id="list-navbar" routerLink="/create" >List</a>
</li>
<li>
<a id="create-navbar" routerLink="/create">Create</a>
</li>
</ul>
second lets create navbar.e2e-spec.ts
describe('Navbar', () => {
beforeEach(() => {
browser.get('home'); // before each test navigate to home page.
});
it('testing Navbar', () => {
browser.sleep(2000).then(function(){
checkNavbarTexts();
navigateToListPage();
});
});
function checkNavbarTexts(){
element(by.id('home-navbar')).getText().then(function(text){ // Promise
expect(text).toEqual('Home');
});
element(by.id('list-navbar')).getText().then(function(text){ // Promise
expect(text).toEqual('List');
});
element(by.id('create-navbar')).getText().then(function(text){ // Promise
expect(text).toEqual('Create');
});
}
function navigateToListPage(){
element(by.id('list-home')).click().then(function(){ // first find list-home a tag and than click
browser.sleep(2000).then(function(){
browser.getCurrentUrl().then(function(actualUrl){ // promise
expect(actualUrl.indexOf('list') !== -1).toBeTruthy(); // check the current url is list
});
});
});
}
});
