Version info
Angular CLI: 6.0.8
Node: 8.11.2
OS: win32 x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.6.3
@angular-devkit/build-angular 0.6.3
@angular-devkit/build-optimizer 0.6.3
@angular-devkit/core 0.6.3
@angular-devkit/schematics 0.6.8
@angular/cdk 6.1.0
@angular/cli 6.0.8
@angular/flex-layout 6.0.0-beta.17
@angular/material 6.1.0
@ngtools/webpack 6.0.3
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.0
typescript 2.7.2
webpack 4.8.3
Protractor: 5.4.0 jasmine-core: 2.6.2 jasmine-spec-reporter: 4.1.0
Problem
I wanted to make a simple e2e test to check the inner text of an element after the browser has redirected to a page. However, when checking inside of the element, the browser simply sits on the page for 10 seconds and then gives the following error:
1) material App should re-route to login page
- Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
- ScriptTimeoutError: Timed out waiting for asynchronous Angular tasks to finish after 10 seconds. This may be because the current page is not an Angular application. Please see the FAQ for more details: htt
ps://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular
While waiting for element with locator - Locator: By(css selector, #globTitle)
Executed 1 of 1 spec (1 FAILED) in 14 secs.
[20:04:24] I/launcher - 0 instance(s) of WebDriver still running
[20:04:24] I/launcher - chrome #01 failed 1 test(s)
[20:04:24] I/launcher - overall: 1 failed spec(s)
[20:04:24] E/launcher - Process exited with error code 1
An unexpected error occured: undefined
Here is my code: HTML:
<div class="main-container">
<mat-toolbar [ngStyle]="{'background-color': topBarColor, 'color': 'white'}" class="topbar telative" style = "z-index: 0 !important;">
<button mat-icon-button (click)="snav.toggle()" *ngIf = "showbtn" value="sidebarclosed">
<mat-icon>menu</mat-icon>
</button>
<span id = "globTitle">Programme Admin Dashboard</span>
<span style = "flex: 1 1 auto;"></span>
<button mat-raised-button colour = "warn" *ngIf = "showbtn" (click) = "signOut(); snav.close();" style = "margin-right: 20px;">Sign out</button>
<img src="assets/images/logo.png" alt="No logo available" style = "height: inherit; margin-bottom: 5px;">
</mat-toolbar>
<mat-sidenav-container class="example-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 0 : 0">
<mat-sidenav style = "text-align: center;" #snav id="snav" class="dark-sidebar pl-xs" [mode]="mobileQuery.matches ? 'side' : 'over'" fixedTopGap="0" [opened]= false [disableClose]="mobileQuery.matches" >
<app-sidebar (click) = "snav.close()"></app-sidebar>
</mat-sidenav>
<mat-sidenav-content class="page-wrapper">
<div class="page-content">
<router-outlet><app-spinner></app-spinner></router-outlet>
</div>
</mat-sidenav-content>
<ng-template #loadingSpinner>
<mat-spinner></mat-spinner>
<p>Fetching permissions...</p>
</ng-template>
</mat-sidenav-container>
</div>
app.po.ts:
import {browser, by, element, protractor} from 'protractor';
export class AppPage {
navigateTo() {
return browser.get('/');
}
getURIChange(url: string) {
const ec = protractor.ExpectedConditions;
browser.wait(ec.urlContains(url), 2000);
}
}
app.e2e-spec.ts:
(Note that when i remove the last line of code, the test manages to run. In fact, even up to element(by.css('#globTitle')) works fine.
But if i change it to element(by.css('#globTitle')).getText(), this is where the browser just waits and i get the error mentioned above.
import { AppPage } from './app.po';
import {browser, element, by} from 'protractor';
describe('material App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should re-route to login page', async () => {
console.log('Waiting for angular');
await browser.waitForAngularEnabled();
console.log('Angular initialized');
console.log('Waiting on navigation to page');
// page.navigateTo();
await browser.get('http://localhost:4201/');
console.log('Navigation completed, should be redirected to the login page');
page.getURIChange('/login');
expect(element(by.css('#globTitle')).getText()).toEqual('Programme Admin Dashboard');
});
});
Also, i'm not sure if this would help, but here are my protractor configuration and karma configurations just in case. protractor.conf.js: const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 10000,
specs: [
'./e2e/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 10000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
karma.conf.js:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
customLaunchers: {
ChromeNoSandbox: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
singleRun: false,
});
};
