We Keep Coding

Angular/ Protractor E2E Test fails when run in Azure DevOps Pipeline. Passes locally

I am trying to run e2e tests on my angular application. My tests pass locally when I run ng e2e but not in my pipeline. I'm going to share my protractor.conf, the pipeline tasks and the output I get from the task that fails below.
Some more background:
I am trying to run e2e code from an otherwise empty angular app. The
test I am trying to run simply logs into AD by navigating to my
website, entering a username/ password and then checking the that the
user is redirected to my website.
I am running this from a release
pipeline where the repo containing the e2e tests is added as an
artifact.
I am using xpaths to find elements on the page
I've omitted my jasmine code because I do not think it is relevant since the tests pass locally. However, if I'm wrong on this point let me know and I will post it.
protractor.conf.js
const { SpecReporter } = require('jasmine-spec-reporter');
process.env.CHROME_BIN = process.env.CHROME_BIN || require("puppeteer").executablePath();
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
chromeOptions: {
args: ["--headless", "--disable-gpu", "--window-size=1200,900"],
binary: process.env.CHROME_BIN
},
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 120000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.e2e.json')
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
Pipeline Tasks:
Failed Task Output:
Please help me get these tests to pass in azure
Thanks!
EDIT: I have that 'Update Webdriver' task because I read I should do it somewhere, it doesn't actually change the outcome if it is there or not

Have you tried to increase your allScriptsTimeout?
The timeout in milliseconds for each script run on the browser. This should be longer than the maximum time your application needs to stabilize between tasks.

protractor javascript execution context stack order

I'm trying to understand the order in which protractor executes according to the execution stack. What is the order in the execution stack after the global execution context (ec) is created and pushed? Is it?
stack
------
|spec1 ec|
|spec2 ec|
|spec3 ec|
|onPrepare ec|
|conf.js ec|
|global ec|
----------
I'm really sure this is not correct because i'm just guessing here. Can someone shed some light on what execution context gets create and when? Thanks.

I can Guide as per my knowledge as below:
Protractor calls conf.js as we write protractor conf.js
So the starting point is conf.js
conf.js generally contains onPrepare where you can keep environment details and reports generation options either customized or you use and package from npm packages.
Also onPrepare has been one of the most useful parts of the config.js file as it allows to define my variables in one place and have access to them across the different spec.js files.
See example
Globals: It is possible to set globals from the Protractor config file with the help of params property:
exports.config = {
// ...
params: {
glob: 'test'
}
// ...
};
You Can use it in Spec as:
browser.executeScript(function (glob) {
// use passed variables on the page
console.log(glob);
}, browser.params.glob);
Sample taken from here
conf.js, onPrepare, globals are part of setup and pre-requistes to run test cases which are in specs some being optional.
After successful creation of those, specs are run which ever way you define it in conf.js running it in parallel/sequentially upon different browsers.
Example:
multiCapabilities: [
{
shardTestFiles: true,
maxInstances: 1,
sequential: true,
browserName: 'chrome',
specs: ['specs/spec1.js','specs/spec2.js','specs/spec3.js']
},
{
shardTestFiles: true,
maxInstances: 1,
sequential: true,
browserName: 'chrome',
specs: ['specs/spec4.js',
'specs/spec5.js',
'specs/spec6.js',
]
}
You can also define suites such as regression, sanity etc and run them individually.
protractor config.js --suite regression,sanity
For your question:
1) conf.js
2) globals & on Prepare
3)specs
I hope you are clear now.

Protractor : browser.get() doesn't function

I am a newbie using protractor for angularjs app e2e testing.
I have the latest version of protractor setup and using Visual studio 2015 as the IDE.
The function browser.get() mentioned in my tests doesn't work and only opens up a browser window with "Data:,".
Here is my config.js file :
'use strict';
exports.config = {
directConnect: true,
chromeDriver: './node_modules/protractor/selenium/chromedriver.exe',
// Capabilities to be passed to the webdriver instance.
capabilities: {
'browserName': 'chrome'
},
// Spec patterns are relative to the current working directly when
// protractor is called.
specs: ['example_spec.js'],
framework: 'jasmine',
// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000
},
onPrepare: function () {
browser.driver.manage().window().maximize();
}
};
Here is my spec.js file :
describe('angularjs homepage', function () {
it('should have a title', function () {
browser.get('http://angularjs.org/');
expect(browser.getTitle()).toContain('AngularJS');
});
});
Am i missing out on anything? Please help! i have been trying to fix this since 3 days now.

The first thing,
chromeDriver: './node_modules/protractor/selenium/chromedriver.exe'
is not needed.Your web-driver manager manage it.
If your protractor version is >3.0 then install node > 4.0.
UPDATE :
Please fire following command :
webdriver-manager update

How do I Run multiple protractor test suites at once?

First attempt at using Protractor. I would like to be able to run multiple suites in succession.
I have an application that is one big angular form with different scenarios.
I have expected results for each scenario and would like to enter one command and run through each test.
I thought I could just use comma separated like:
protractor config.js --suite=rf1_breast, rf1_ovarian, rf1_pancreatic
But I am getting the error:
Error: more than one config file specified
Which is strange as there is only the one config file which is in the directory where I am running protractor.
Here is my config.js:
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
capabilities: { 'browserName': 'chrome' },
framework: 'jasmine2',
suites: {
rf1_breast: './rf1-ashkenazi-hboc/Breast/specs/*_spec.js',
rf1_ovarian: './rf1-ashkenazi-hboc/Ovarian/specs/*_spec.js',
rf1_bladder_fail: './rf1-ashkenazi-hboc/Bladder-expected-fail/specs/*_spec.js',
rf1_pancreatic: './rf1-ashkenazi-hboc/Pancreatic/specs/*_spec.js',
rf1_prostate: './rf1-ashkenazi-hboc/Prostate/specs/*_spec.js'
},
onPrepare: function() {
/* global angular: false, browser: false, jasmine: false */
browser.manage().window().setSize(1600, 1600);
// Disable animations so e2e tests run more quickly
var disableNgAnimate = function() {
angular.module('disableNgAnimate', []).run(['$animate', function($animate) {
$animate.enabled(false);
}]);
};
browser.addMockModule('disableNgAnimate', disableNgAnimate);
},
jasmineNodeOpts: { showColors: true }
};
Is there a better way around getting each scenario run?

Don't put spaces after commas:
protractor config.js --suite rf1_breast,rf1_ovarian,rf1_pancreatic

In your config.js
If you want to run the script as a suite comment out the spec line
// specs: ['src/com/sam/scriptjs/alertexamplespec.js']
give the suite name and location
suites: {
//Suite name and location give * to run all the specs or provide the name
smoke: ['./smoke/*.spec.js'],
endtoend: ['src/com/sam/scriptjs/*.spec.js'],
//Futhermore you can select few test specs
testfew: ['./smoke/editorder.spec.js','./smoke/cancelorder.spec.js']
},
then in cmd type protractor filenameconfig.js

Try to make your suite composed by multiple files. I Have a line for the test I currently work on and another with the entire suite of tests:
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./e2e/**/1.Landing.Page.ts',
'./e2e/**/2.Confirmation.Page.ts',
'./e2e/**/3.PersonalData.Page.ts',
'./e2e/**/4.sms.Page.ts',
'./e2e/**/5.idCard.Page.ts'
],
}
This works for me.

Testing Angular with Gulp-mocha: "Window is not Defined"

I am setting up a project with Gulp to run unit tests with Mocha, including Angular tests. I have the basic set up working (indexOf, etc.), however when I include angular-mocks I get this error or a node-module error:
ReferenceError in 'gulp-mocha': "Window is not defined"
I've tried including angular-module-mocks, using gulp-mocha-phantomjs... but the result is the same. (With mocha-phantomjs my error was 'Init timeout'.) I've seen many examples of configurations with Mocha and Angular or Gulp and Karma but have not yet found a solution for Gulp, Mocha and Angular alone.
I'm thinking of something similar to this Karma solution to correctly load angular-mocks by specifying it in a config file and forcing Gulp to load it (Angular testing with Karma: "module is not defined"). However, even if this would work, it seems like gulp-mocha does not support loading a configuration file (mocha.opts - https://github.com/sindresorhus/gulp-mocha/issues/26). I would be happy to hear a more straightforward solution.
I am using angular-mocks 1.2.22 and gulp-mocha 1.1.0.
Code snippets:
var mocha = require('gulp-mocha');
gulp.task('test', function () {
return gulp.src('test/*.js', {read: false})
.pipe(mocha({reporter: 'nyan', timeout: 400}));
});
test/test.js
var assert = require('assert');
var angular_mocks = require('angular-mocks'); //Fails only when this line is present
//tests

What finally worked for me with Gulp/Browserify/Mocha was using Karma and Mocha combined.
Specifically, I used gulp-karma, and defined the configuration at karma.config.js and used a dummy file for gulp.src as others have done:
gulp.task('test', function () {
return gulp.src('./foobar.js').pipe(karma({
configFile:'karma.config.js',
action: 'run'
}))
.on('error', handleErrors);
});
Then I used this karma.config.js file. I needed the npm modules karma-mocha, karma-chai, and karma-bro. (With only the first two, I was getting 'require is not defined'. Then of course I tried including karma-requirejs, but that does not work with Browserify. Then I tried karma-commonjs, which still didn't work. Then I tried karma-browserify, and got a strange error involving bundle() that no one seems to have solved (https://github.com/xdissent/karma-browserify/issues/46). Karma-bro did the trick.)
I also needed to preprocess each file referenced in the tests as well as the tests themselves. (For using phantomJS also include karma-phantomjs-launcher. And I am using the bower version of angular-mocks simply because it is more recent: v1.2.25 compared to 1.2.22 for npm - but the npm version might work.)
module.exports = function(config) {
config.set({
basePath: '',
// frameworks to use
frameworks: ['browserify', 'mocha', 'chai'],
// list of files / patterns to load in the browser
files: [
'node_modules/angular/lib/angular.min.js',
'bower_components/angular-mocks/angular-mocks.js',
'source/javascript/controllers/*.js',
'source/javascript/*.js',
'test/*.js'
],
reporters: ['progress'],
port: 9876,
colors: true,
autoWatch: true,
browsers: ['PhantomJS'],
preprocessors: {
'source/javascript/controllers/*.js': ['browserify'],
'source/javascript/*.js': ['browserify'],
'test/*.js': ['browserify']
}
});
};
And finally this test passes. At the end I needed to make sure the names of my modules and controllers were consistent (capitals etc.) to resolve 'Module not defined' errors. For debugging I replaced node_modules/angular/lib/angular.min.js with node_modules/angular/lib/angular.js in the files.
describe('Angular', function() {
describe('App Controllers', function() {
beforeEach(angular.mock.module('App'));
describe('MessageCtrl', function() {
it('should retrieve the correct amount of messsages', angular.mock.inject(function($controller) {
var scope = {},
ctrl = $controller('MessageCtrl', {$scope:scope});
assert.equal(scope.messages.length, 2);
}));
});
});
});
I do get this: 'WARNING: Tried to load angular more than once.' I can live with it.