We have a big set of automated tests using Protractor/Jasmine which work like a dream on Azure Pipelines. However, so far we've only used Chrome as the browser.
Now i have to run the same tests using Internet Explorer (11) but am getting no joy at all!!
Here's a part of my conf.js file that deals with the browser:
var HtmlReporter = require('protractor-beautiful-reporter');
var {SpecReporter} = require("jasmine-spec-reporter");
var jasmineReporters = require("jasmine-reporters");
exports.config = {
//seleniumAddress: `http://localhost:4444/wd/hub`,
framework: "jasmine2",
specs: ['specs/secureTrading/01_SecureTrading.js',
'specs/secureTrading/02_ST_Payments.js'
],
getPageTimeout: 40000,
allScriptsTimeout: 60000,
capabilities: {
'browserName': 'internet explorer',
'ignoreProtectedModeSettings': true,
'platform': 'ANY',
'version': '11',
args: ['--silent', '--no-sandbox', '--test-type=browser', '--lang=US', '--start-maximized'], //,'--headless', '--disable-gpu'
prefs: {
'download': {
'prompt_for_download': false,
'directory_upgrade': true,
'extensions_to_open': '',
'default_directory': process.cwd() + '/downloads/'
},
}
},
localSeleniumStandaloneOpts: {
jvmArgs: [
'-Dwebdriver.ie.driver=node_modules/protractor/node_modules/webdriver-manager/selenium/IEDriverServer3.14.0.exe'
]
},
directConnect: false,
seleniumArgs: ['-Dwebdriver.ie.driver=node_modules/protractor/node_modules/webdriver-manager/selenium/IEDriverServer3.14.0.exe'],
ignoreUncaughtExceptions: true,
onPrepare: function() {
Having looked at other postings, I've tried removing // from seleniumAddress:http://localhost:4444/wd/hub,` still errors, Changing DirectConnect makes no difference.
With the settings as above, this is the error message.
Any advice please?
Thanks
Additional Logs as per comment below.
Local:
I am running my protractor tests on browserstack and noticed that the tests I run are marked as separate entries. I want to group them all into a single build.
I have added build capability to my protractor config file. But it doesn't seem to help.
Attaching my protractor configuration field. Appreciate your help.
Thanks
exports.config = {
specs: [
'./src/**/*.e2e-spec.ts'
],
browserstackUser: xx,
browserstackKey: xxx,
multiCapabilities: [{
browserName: 'chrome',
os: 'Windows',
os_version: '10',
'browswestack.debug': true,
project: 'protractor'
}, {
os: 'OS X',
os_version: 'High Sierra',
browserName: 'Safari',
'browswestack.debug': true,
project: 'protractor'
}],
build_number: 'local',
maxInstances: 2,
SELENIUM_PROMISE_MANAGER: false,
directConnect: false,
connectionRetryCount: 3,
connectionRetryTimeout: 90000,
baseUrl: 'http://localhost:4200',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: _.noop
},
onPrepare: () => {
tsNode.register({
project: path.join(__dirname, './tsconfig.e2e.json')
});
let reporter = new SpecReporter();
jasmine.getEnv().addReporter(reporter);
}
};
EDIT : I fixed the problem. I was using build_number instead of build.
However , when I run the tests I noticed that the tests are getting appended. For instance if I run 5 tests , I could only see the last test as executed in browserstack. How should I fix this ?
Open a session on Automate Dashboard and under 'Input Capabilities', check if 'build' is visible.
My query is how config.js will be called when we say for example.. "npm run test" this will run tests as per the configuration defined in config.js
example my package.json contains
"scripts" : {
"test" : "Env=ST CukeTags=regression testrunner -s functional"
}
another query I had is, where can I find the details about how these config files, hooks file will be interrelated? how will these be called during the protractor tests running?
You should set the test script in your package.json
That test script will tell the command to run protractor giving the path of config file.
"scripts":{"test": "protractor typeScript/config/config.js"}
Here the test command will run protractor with the config file inside typescript/config folder.
Sample config file for protractor and cucumber
import * as path from "path";
import { browser, Config } from "protractor";
import { Reporter } from "../support/reporter";
const jsonReports = process.cwd() + "/reports/json";
export const config: Config = {
seleniumAddress: "http://127.0.0.1:4444/wd/hub",
SELENIUM_PROMISE_MANAGER: false,
baseUrl: "https://www.google.com",
capabilities: {
browserName: "chrome",
},
framework: "custom",
frameworkPath: require.resolve("protractor-cucumber-framework"),
specs: [
"../../features/*.feature",
],
onPrepare: () => {
browser.ignoreSynchronization = true;
browser.manage().window().maximize();
Reporter.createDirectory(jsonReports);
},
cucumberOpts: {
compiler: "ts:ts-node/register",
format: "json:./reports/json/cucumber_report.json",
require: ["../../typeScript/stepdefinitions/*.js", "../../typeScript/support/*.js"],
strict: true,
tags: "#CucumberScenario or #ProtractorScenario or #TypeScriptScenario or #OutlineScenario",
},
onComplete: () => {
Reporter.createHTMLReport();
},
};
When running end to end tests with Protractor, I'm seeing promises in my tests being resolved when run with Chrome. But when run with Phantom, the callbacks are never executed, and the test eventually times out with the message Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
My protractor.config.js file looks like:
exports.config = {
baseUrl: 'http://localhost:3000/',
suites: {
// ...
},
directConnect: !(process.env.NODE_ENV === 'CI'),
exclude: [],
multiCapabilities: [{
browserName: process.env.NODE_ENV === 'CI' ? 'phantomjs' : 'chrome',
'phantomjs.cli.args': ['--web-security=false',
'--ignore-ssl-errors=true'
]
}],
allScriptsTimeout: 110000,
getPageTimeout: 100000,
framework: 'jasmine2',
jasmineNodeOpts: {
isVerbose: false,
showColors: true,
includeStackTrace: false,
defaultTimeoutInterval: 400000,
print: function() {}
},
}
With this configuration, a test like the following will execute its callback for Chrome, but not for Phantom:
let targetUrl = '/foo';
it ('should resolve the route properly', function (done) {
browser.getCurrentUrl().then(function (url) {
console.log("****"); // This is printed in Chrome, but not Phantom
expect(url).toContain(targetUrl);
done();
})});
Node Modules Versions
Protractor: 5.0.0
Phantom: 4.0.0
PhantomJS 2.1.7
PhantomJS-prebuilt: 2.1.14
Webdriver Manager (inside Protractor): 11.1.1
Any ideas?
I'm growing weary of trying to get node libraries to work properly together, but it's part of the job, so here goes.
I have an ES6 application intended for a browser. I have a set of unit tests for my files that I'm bringing up from when my application was written in ES5. I use Browserify to handle importing/exporting modules and bundling my distro. This works fine when running the application in the browser. I can successfully Browserify the source and spec files and run the tests, and the tests pass. I'm very close to getting this working.
The only issue is the coverage. The closest I've come is showing coverage on the karma-browserify generated files, which each look like this:
require('/absolute/path/to/the/corresponding/file.js');
And the coverage obviously shows as 100% for all files, because each one is just one line.
This is my karma.conf.js:
import babelify from 'babelify';
import isparta from 'isparta';
import paths from './paths';
var normalizeBrowserName = (browser) => browser.toLowerCase().split(/[ /-]/)[0];
export default function(config) {
config.set({
basePath: '..',
browsers: ['PhantomJS'],
frameworks: ['browserify', 'jasmine'],
files: paths.test.files,
preprocessors: {
'app/**/*.js': ['browserify', 'sourcemap', 'coverage'],
[paths.test.testFiles]: ['babel'],
},
plugins: [
'karma-babel-preprocessor',
'karma-browserify',
'karma-coverage',
'karma-jasmine',
'karma-junit-reporter',
'karma-phantomjs-launcher',
'karma-sourcemap-loader',
],
autoWatch: false,
colors: false,
loggers: [{ type: 'console' }],
port: 9876,
reporters: ['progress', 'dots', 'junit', 'coverage'],
junitReporter: {
outputFile: paths.test.resultsOut,
suite: '',
},
browserify: {
debug: true,
noParse: paths.js.noparse(),
configure: (bundle) => {
bundle.once('prebundle', () => bundle.transform(babelify.configure({ ignore: 'lib/!**!/!*' })));
},
},
coverageReporter: {
instrumenters: { isparta },
instrumenter: {
[paths.test.cover]: 'isparta',
},
reporters: [
{ type: 'text', },
{ type: 'html', dir: paths.test.coverageOut, subdir: normalizeBrowserName },
{ type: 'cobertura', dir: paths.test.coverageOut, subdir: '.', file: 'coverage.xml' },
],
},
logLevel: config.LOG_DEBUG,
});
};
I really have no idea how any of these libraries work, so I don't know where to start in debugging this. I understand that the ordering of the preprocessors matters, so that Browserify runs on the source files, feeds the resulting link files into the source map generator, then the source map generator feeds the resulting whatever into karma-coverage. But there's some loss of communication between Browserify and whatever handles the coverage. Isparta (which uses istanbul behind the scenes) has no idea that browserify is running, and I don't know what it sees.
If anyone has any experience with testing modularized ES6 WITH proper code coverage, please let me know if I'm on the right track or if I should try something else.
This is the configuration that worked for me, note that I am using browserify-istanbul rather than isparata.
var istanbul = require('browserify-istanbul');
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['browserify', 'mocha'],
files: [
'test/**/*Spec.js'
],
exclude: [
'**/*.sw?'
],
preprocessors: {
'test/**/*Spec.js': ['browserify', 'coverage']
},
browserify: {
debug: true,
transform: [
['babelify', {
ignore: /node_modules/
}],
istanbul({
ignore: ['test/**', '**/node_modules/**']
})
],
extensions: ['.jsx']
},
babelPreprocessor: {
options: {
sourceMap: 'inline'
},
sourceFileName: function(file) {
return file.originalPath;
}
},
coverageReporter: {
dir: 'coverage/',
reporters: [
{ type: 'text-summary' }
]
},
browserNoActivityTimeout: 180000,
reporters: ['coverage', 'progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
it was a massive pain to get working.
hope that helps
HOW TO: Karma + Babel + React + Browserify + Istanbul
I THINK I GOT IT.
If I don't, ping me gus+overflow#mythril.co
Not sure if the previous answer not working has to do with using jasmine instead of mocha but I got it working with these settings.
Required Packages: apart from the obvious (React, Karma, Jasmine, Browserify)
isparta - an Istanbul instrumenter for ES6
browserify-istanbul - a browserify transform
babelify - another browserify transform
babel - JS compiler
babel-preset-2015 - ES6 compile preset
babel-preset-react - React compile preset
Create a .babelrc file in your root dir.
I was very confused as to where to place babel options within the tools, but most (and these) babel tools will look for a .babelrc
{
"presets": ["es2015", "react"],
"sourceMap": "inline"
}
karma.config.js:
const isparta = require('isparta');
const istanbul = require('browserify-istanbul');
module.exports = function (config) {
config.set({
basePath: '',
browsers: ['Firefox', 'Chrome', 'PhantomJS', 'Safari'],
captureConsole: true,
clearContext: true,
colors: true,
files: [
// you need this for Phantom
'node_modules/phantomjs-polyfill/bind-polyfill.js',
// import any third party libs, we bundle them in another gulp task
'./build/libs/vendor-bundle.js',
// glob for spec files
'__PATH_TO_SPEC_FILES_/*.spec.js'
],
frameworks: ['jasmine', 'browserify'],
logLevel: config.LOG_INFO,
preprocessors: {
// I had to NOT include coverage, the browserify transform will handle it
'__PATH_TO_SPEC_FILES_/*.spec.js': 'browserify'
},
port: 9876,
reporters: ['progress', 'coverage'],
browserify: {
// we still use jQuery for some things :(
// I don't think most people will need this configure section
configure: function (bundle) {
bundle.on('prebundle', function () {
bundle.external(['jquery']);
});
},
transform: [
// this will transform your ES6 and/or JSX
['babelify'],
// (I think) returns files readable by the reporters
istanbul({
instrumenter: isparta, // <--module capable of reading babelified code
ignore: ['**/node_modules/**', '**/client-libs/**']
})
],
// our spec files use jsx and so .js will need to be compiled too
extensions: ['.js', '.jsx'],
// paths that we can `require()` from
paths: [
'./node_modules',
'./client-libs',
'./universal'
],
debug: true
},
coverageReporter: {
reporters: [
{ type: 'html', dir: 'coverage/Client' },
{ type: 'text-summary' }
]
}
});
};
With Karma, I think it would look something like this(?):
// Karma configuration
'use strict';
let babelify = require( 'babelify' );
let browserify = require('browserify');
let browserifyBabalIstanbul = require('browserify-babel-istanbul');
let isparta = require('isparta');
browserify: {
debug: true,
transform: [
browserifyBabalIstanbul({
instrumenter: isparta,
instrumenterConfig: { babel: { presets: ["es2015"] } },
ignore: ['**/node_modules/**', '**/unitest/**']
}),
[ babelify, { presets: ["es2015"] } ]
]
},
see the following link : Find a good way to get a coverage report with karma?