Karma debugging in Chrome no longer working - karma-runner

We are working on an Angular project where we are using Karma/Jasmine for our testing environment. We've been using the karma-chrome-launcher for debugging the tests and it was working great. For some reason, it has stopped working lately. I can't figure out why though, as we haven't changed anything regarding that pipeline. We tried updating to latest Karma (1.4.1), but that didn't help. Has anyone else seen this issue and been able to fix it? Help is appreciated. I've attached two images of what the Chrome inspector looks like when you first open the debugger and then after setting a breakpoint and hitting Refresh (it should look the same as the 1st image, but doesn't) edit: karma.config at bottom as well
'use strict';
var path = require('path');
var conf = require('./gulp/conf');
var _ = require('lodash');
var wiredep = require('wiredep');
var pathSrcHtml = [
path.join(conf.paths.src, '/**/*.html')
];
function listFiles() {
var wiredepOptions = _.extend({}, conf.wiredep, {
dependencies: true,
devDependencies: true
});
var patterns = wiredep(wiredepOptions).js
.concat([
path.join(conf.paths.src, '/app/**/*.module.js'),
path.join(conf.paths.src, '/app/**/*.js')
])
.concat(pathSrcHtml)
.concat('karmaMobileFramework/*.js');
var files = patterns.map(function(pattern) {
return {
pattern: pattern
};
});
files.push({
pattern: path.join(conf.paths.src, '/assets/**/*'),
included: false,
served: true,
watched: false
});
return files;
}
module.exports = function(config) {
var configuration = {
files: listFiles(),
singleRun: false,
autoWatch: true,
preprocessors : {
'/**/*.html': ['ng-html2js']
},
ngHtml2JsPreprocessor: {
stripPrefix: conf.paths.src + '/',
moduleName: 'directive-templates'
},
logLevel: 'WARN',
frameworks: ['jasmine', 'jasmine-matchers', 'angular-filesort'],
angularFilesort: {
whitelist: [path.join(conf.paths.src, '/**/!(*.html|*.spec|*.mock).js')]
},
browsers : ['Chrome'],
plugins : [
'karma-chrome-launcher',
'karma-angular-filesort',
'karma-coverage',
'karma-jasmine',
'karma-jasmine-matchers',
'karma-ng-html2js-preprocessor',
'karma-htmlfile-reporter',
'karma-junit-reporter'
],
coverageReporter: {
type : 'html',
dir : 'reports/coverage/',
reporters: [
{ type: 'html', subdir: 'report-html' },
{ type: 'cobertura', subdir: 'report-jenkins' }
]
},
reporters: ['progress', 'html', 'junit'],
junitReporter: {
outputDir: 'reports/tests/',
outputFile: 'test-results.xml',
useBrowserName: false
},
htmlReporter: {
outputFile: 'reports/tests/results.html',
pageTitle: 'BOLT Unit Tests'
},
proxies: {
'/assets/': path.join('/base/', conf.paths.src, '/assets/')
}
};
// This is the default preprocessors configuration for a usage with Karma cli
// The coverage preprocessor is added in gulp/unit-test.js only for single tests
// It was not possible to do it there because karma doesn't let us now if we are
// running a single test or not
configuration.preprocessors = {};
pathSrcHtml.forEach(function(path) {
configuration.preprocessors[path] = ['ng-html2js'];
});
config.set(configuration);
};

Related

Getting error in setting up log4js-protractor-appender in protractor

My Conf.js looks like below:
// An example configuration file.
exports.config = {
directConnect: true,
// Capabilities to be passed to the webdriver instance.
capabilities: {
'browserName': 'chrome'
},
// Framework to use. Jasmine is recommended.
framework: 'jasmine',
// Spec patterns are relative to the current working directory when
// protractor is called.
specs: ['test_spec1.js'],
// Options to be passed to Jasmine.
jasmineNodeOpts: {
defaultTimeoutInterval: 30000
},
var log4js = require('log4js');
beforeLaunch:function(){
if (fs.existsSync('./logs/ExecutionLog.log')) {
fs.unlink('./logs/ExecutionLog.log')
}
log4js.configure({
appenders: [
{ type: 'log4js-protractor-appender', category: 'protractorLog4js' },
{
type: "file",
filename: './logs/ExecutionLog.log',
category: 'protractorLog4js'
}
]
});
},
onPrepare: function() {
browser.logger = log4js.getLogger('protractorLog4js');
require('jasmine-reporters');
jasmine.getEnv().addReporter(
new jasmineReporters.JUnitXmlReporter('./Reports', true, true));
}
};
I get following error on running command "protractor conf.js"
You need to move the var log4js = require('log4js'); line to the top of the conf file, above the exports.config ={ .. } block. Also use const instead of var

Gerkin and Cucumber in Angular 5: Undefined

When I try to create a test using Cucumber and Gherkin I get a strange error. I show you the error first, then the files login.step.ts and login.po.ts:
// Error:
Undefined. Implement with the following snippet:
When('Enter the card number in the box', function () {
// Write code here that turns the phrase above into concrete actions
return 'pending';
});
// login.step.ts
import { expect } from 'chai';
const { Given, When, Then, Before } = require('cucumber');
import { browser, by, element } from 'protractor';
import { LoginPage } from './login.po';
let login: LoginPage;
Before(() => {
login = new LoginPage();
});
Given(/^Entering in Login$/, { timeout: 10 * 5000 }, async () => {
await browser.get('http://localhost:49152/login');
});
When(/^Enter the card number in the box$/, () => {
// login.setCardNumber('1234').then((txt) => {
// return 'ready!?';
// })
login.setCardNumber('1234');
});
// login.po.ts
import { browser, by, element, until } from 'protractor';
export class LoginPage {
navigateTo() {
return browser.get('/login');
}
setCardNumber(cardNumber) {
const input = element(by.css('#box'));
return input.sendKeys(cardNumber);
}
}
The first test passes successfully, but in the second test, the process ends in error.
[EDIT]
Adding the protractor.conf.js file:
exports.config = {
allScriptsTimeout: 11000,
specs: [
// './e2e/**/*.e2e-spec.ts',
'./e2e/features/*.feature'
],
capabilities: {
'browserName': 'chrome',
chromeOptions: {
args: ['disable-infobars']
},
metadata: {
browser: {
name: 'chrome',
version: '58'
},
device: 'Xubuntu Linux',
platform: {
name: 'Linux',
version: '16.04'
}
}
},
directConnect: true,
frameworkPath: require.resolve('protractor-cucumber-framework'),
plugins: [{
package: 'protractor-multiple-cucumber-html-reporter-plugin',
options: {
automaticallyGenerateReport: true,
removeExistingJsonReportFile: true
}
}],
cucumberOpts: {
require: ['./e2e/steps/**/*.ts', './e2e/support/*.ts'],
tags: [],
dryRun: false,
compiler: [],
format: 'json:reports/results.json',
strict: true
},
baseUrl: 'http://localhost:4200/',
SELENIUM_PROMISE_MANAGER: false,
framework: 'custom',
onPrepare() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
}
};
remove the double quote " behind box in /^Enter the card number in the box"$/
I found the answer to my problem. I only had to include the following configuration line to my Before() step in my test:
browser.ignoreSynchronization = true;
According to what I read in different places, it seems that Chrome is looking to perform some task with sockets, and with this line we are disabling this task.

Unable to take test report from multiple browsers at a time using protractor

I am unable to take Test report for Multiple browsers at a time using protractor.
I tried below code
var Jasmine2HtmlReporter = require('C:/Users/agudla/AppData/Roaming/npm/node_modules/protractor-jasmine2-html-reporter');
exports.config = {
allScriptsTimeout: 11000,
seleniumAddress : 'http://localhost:4444/wd/hub',
multiCapabilities : [
{'browserName' : 'firefox'},
{'browserName' : 'chrome'}
],
suites : {
jobs : [
'e2e/Jobs/Manage Jobs/ApplyJobs/ApplyJobs.e2e-spec.ts',]
},
baseUrl : 'http://localhost:4200/',
framework : 'jasmine2',
jasmineNodeOpts : {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
//jasmine.getEnv().addReporter(reporter);
browser.getProcessedConfig().then(function(config){
var capabilities = config.capabilities;
jasmine.getEnv().addReporter(
new Jasmine2HtmlReporter({
savePath : '',
fileName : 'protractor-report-'+capabilities.platform+'-'+capabilities.browserName,
takeScreenshotOnlyOnFailure : true
})
);
});
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
},
I run "selenium webdriver server" from the command prompt and run the test scripts . The Jasmine html report is always displaying the latest browser result , in this case it is always displaying "firefox" browser related test report.
I want to take test report from both "chrome and fire fox" browsers at a time. Can any one suggest me how to do this?
Use below code for multi-capability reporting. you can refer my repo on github for more details.
Click here
var Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');
var log4js = require('log4js');
var params = process.argv;
var args = process.argv.slice(3);
exports.config = {
//seleniumServerJar: './node_modules/gulp-protractor/node_modules/protractor/selenium/selenium-server-standalone-2.48.2.jar',
seleniumAddress: 'http://localhost:4444/wd/hub',
allScriptsTimeout: 10000,
framework: 'jasmine2',
onPrepare: function () {
return new Promise(function(fulfill, reject) {
browser.getCapabilities().then(function(value) {
reportName = 'protractor-report-' + '_' + value.get('browserName') + '_' + Math.floor(Math.random()*1E16);
jasmine.getEnv().addReporter(
new Jasmine2HtmlReporter({
savePath: __dirname+'/target',
docTitle: 'Web UI Test Report',
screenshotsFolder: '/image',
//takeScreenshots: true,
takeScreenshotsOnlyOnFailures: true,
consolidate: true,
consolidateAll: true,
preserveDirectory: true,
//cleanDirectory: false,
//fixedScreenshotName: true,
fileName: "my-report.html",
fileNamePrefix: reportName
})
);
fulfill();
});
});
},
afterLaunch: function afterLaunch() {
var fs = require('fs');
var output = '';
fs.readdirSync('target/').forEach(function (file) {
if (!(fs.lstatSync('target/' + file).isDirectory()))
output = output + fs.readFileSync('target/' + file);
});
fs.writeFileSync('target/ConsolidatedReport.html', output, 'utf8');
},
suites:{
example:['./test/e2e/specs/**/*Spec.js',]
},
multiCapabilities: [
{
'browserName': 'chrome'
},
{
'browserName': 'firefox'
}
],
// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 200000
}
};

How to generate multiple cucumber reports for protractor with multicapabilities?

I am running protractor against BrowserStack with multiple browser in parallel. Please refer to 'Speed up testing section in 'https://www.browserstack.com/automate/protractor.
It works great, however if I use 4 instances of webdriver to run the same feature files in parallel, it will 1 html cucumber report.
I've googled this: https://github.com/wswebcreation/protractor-multiple-cucumber-html-reporter-plugin, which seems to be able to generate multiple json file, but no html files.
I am new to protractor. Could anyone give some suggestions, or some code change or plugin that can make this happen?
Thank,
var Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');
var JasmineReporters = require('jasmine-reporters');
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
framework: 'jasmine2',
multiCapabilities: [
{
browserName: 'chrome',
shardTestFiles: false,
maxInstances: 1,
specs: [
'./tmp/specs1.spec.js',
'./tmp/specs2.spec.js'
],
chromeOptions: {
args: [
'--window-size=1920,1080'],
prefs: {
download: {
prompt_for_download: false,
default_directory: './downloads',
}
}
}
},
{
browserName: 'chrome',
shardTestFiles: false,
maxInstances: 1,
specs: [
'./tmp/specs3.spec.js',
'./tmp/specs4.spec.js'
],
chromeOptions: {
args: [
'--window-size=1920,1080'],
prefs: {
download: {
prompt_for_download: false,
default_directory: './downloads',
}
}
}
}
],
allScriptsTimeout: 600000,
jasmineNodeOpts: {
defaultTimeoutInterval: 600000,
showColors: true
},
onPrepare: function() {
browser.driver.getCapabilities().then(function(caps) {
browser.browserName = caps.get('browserName');
});
var Jasmine2HtmlReporter = require('protractor-jasmine2-html-reporter');
browser.getProcessedConfig().then(function(config) {
var capabilities = config.capabilities;
jasmine.getEnv().addReporter(
new Jasmine2HtmlReporter({
savePath: './reports/',
takeScreenshots: true,
screenshotsFolder: './screenshots',
filePrefix: 'protractor-demo-tests-report-' + capabilities.platform + '-' + capabilities.browserName,
consolidateAll: false,
takeScreenshotsOnlyOnFailures: true,
})
);
});
var jasmineReporters = require('jasmine-reporters');
return browser.getProcessedConfig().then(function(config) {
// you could use other properties here if you want, such as platform and version
var browserName = config.capabilities.browserName;
var junitReporter = new jasmineReporters.JUnitXmlReporter({
consolidateAll: false,
savePath: 'reports/jUnitXmlReporter',
modifyReportFileName: function(generatedFileName, suite) {
return browserName + '.' + generatedFileName;
}
});
jasmine.getEnv().addReporter(junitReporter);
//set window size to max available
setTimeout(function() {
browser.driver.executeScript(function() {
return {
width: window.screen.availWidth,
height: window.screen.availHeight
};
}).then(function(result) {
browser.driver.manage().window().setPosition(0,0);
browser.driver.manage().window().setSize(result.width, result.height);
});
});
});
}
};

Can't set breakpoint in Chrome with Babel and Webpack

I have started a new project using the "new" stack: React+Webpack+Babel.
I am trying to explore of this work, and I am facing an issue with debugging in chrome. I can't set breakpoints on some lines in source files when I use Babel and Webpack. (I create sourcemaps).
I would like to be able to debug JSX files.
I have set a little project to reproduce the problem.
https://github.com/pierre-hilt/babel_webpack_sourcemap.git
Here is my configuration:
var path = require('path')
var webpack = require('webpack')
module.exports = {
devtool: 'source-map',
entry: './build/index',
output: {
path: path.join(__dirname, 'static'),
filename: '[name].bundle.js',
publicPath: '/',
},
module: {
preLoaders: [
{
test: /\.jsx?$/,
loader: "source-map-loader"
}
]
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
}
babelrc:
{
"presets": [
"es2015",
"react"
],
"plugins": []
}
App.jsx (I try to break on line 6 but it is impossible...)
import React, { Component, PropTypes } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
title: props.title,
};
}
changeTitle(newTitle) {
this.setState({ title: newTitle });
}
render() {
return (
<div>
This is {this.state.title}
</div>
);
}
}
App.propTypes = { title: PropTypes.string };
export default App;
I tried different devtool options (cheap, module, ...).
I also tried Babel loader, but is does not work either.
Do you have any idea? Is it a known issue?
OK, I found a workaround that works fine!
babelrc
{
"presets": [
"react"
],
"plugins": []
}
Babel script
"babel": "babel client -d build --source-maps",
webpack config
var path = require('path')
var webpack = require('webpack')
module.exports = {
devtool: 'source-map',
entry: './build/index',
output: {
path: path.join(__dirname, 'static'),
filename: '[name].bundle.js',
publicPath: '/',
},
module: {
preLoaders: [
{
test: /\.jsx?$/,
loader: "source-map-loader"
}
],
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['es2015']
}
}
]
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
}
I first transpile JSX with babel only, then I transpile ES2015 with babel loader and webpack.
At the end I got source files where I can set break points anywhere!