I have a Gulp configuration file that runs Protractor/Jasmine like this:
.pipe($.protractor.protractor({ configFile: 'protractor.conf.js', args: args || ['--baseUrl', 'http://localhost:' + basePort] }))
But the report shown in the console are just dots, instead of the actual specs tests. How can I make Jasmine be verbose?
This was possible with the isVerbose option in Jasmine 1, but I can't find the equivalent for Jasmine 2.
What we are doing is setting these jasmine settings:
jasmineNodeOpts: {
showColors: true,
isVerbose: true,
includeStackTrace: true,
defaultTimeoutInterval: 100000,
print: function() {}
}
And using jasmine-spec-reporter package that provides a nice and detailed test output:
onPrepare: function () {
var SpecReporter = require('jasmine-spec-reporter');
// jasmine spec reporter
jasmine.getEnv().addReporter(new SpecReporter({
displayStacktrace: 'all',
displayPendingSpec: true,
displaySpecDuration: true
}));
}
Half an year a go I was using this gulpfile.js (shown below) and it worked flawlessly. Now, on windows 8.1 64bit I can't get it to properly work since hours. I'm using LiveReload in Firefox to see the changes in RealTime and Growl to get the notifications that it was changed.
The entire source code is:
var gulp = require('gulp'),
gutil = require('gulp-util'),
notify = require('gulp-notify'),
autoprefix = require('gulp-autoprefixer'),
minifyCSS = require('gulp-minify-css'),
exec = require('child_process').exec,
sys = require('sys'),
uglify = require('gulp-uglify'),
changed = require('gulp-changed'),
livereload = require('gulp-livereload'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache'),
path = require('path'),
watch = require('gulp-watch'),
sass = require('gulp-sass');
// Which directory should Sass compile to?
var targetDir = 'resources/compiled';
// .pipe(minifyCSS())
gulp.task('scss', function () {
gulp.src('resources/uncompiled/**/*.scss')
.pipe(changed(targetDir))
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefix('last 15 version'))
.pipe(changed(targetDir))
.on('error', gutil.log)
.pipe(gulp.dest(targetDir));
//! .sass files -> compile, minify, autoprefix and publish
watch('resources/uncompiled/**/*.scss', function(files) {
return files.pipe(changed(targetDir))
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefix('last 15 version'))
.on('error', gutil.log)
.pipe(gulp.dest(targetDir))
.pipe(notify({
message: "File: <%= file.relative %>",
title: "SASS compiled, minified and published."
}));
});
});
gulp.task('js', function() {
gulp.src('resources/uncompiled/**/*.js')
.pipe(changed(targetDir))
.pipe(uglify())
.pipe(changed(targetDir))
.pipe(gulp.dest(targetDir))
.pipe(notify({
message: "File: <%= file.relative %>",
title: "JavaScript minified and published."
}));
//! .js files -> compress and publish
watch('resources/uncompiled/**/*.js', function(files) {
return files.pipe(changed(targetDir))
.pipe(uglify())
.pipe(rename(function(path) {
path.dirname = path.dirname.replace(/assets\//g, "");
}))
.pipe(changed(targetDir))
.pipe(gulp.dest(targetDir))
.pipe(notify({
message: "File: <%= file.relative %>",
title: "JavaScript minified and published."
}));
});
});
gulp.task('images', function() {
gulp.src(['resources/uncompiled/**/*.png', 'resources/uncompiled/**/*.jpg', 'resources/uncompiled/**/*.ico', 'resources/uncompiled/**/*.gif'])
.pipe(changed(targetDir))
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(changed(targetDir))
.pipe(gulp.dest(targetDir));
//! image files -> compress and publish
watch(['resources/uncompiled/**/*.png', 'resources/uncompiled/**/*.jpg', 'resources/uncompiled/**/*.ico', 'resources/uncompiled/**/*.gif'], function(files) {
return files.pipe(changed(targetDir))
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(rename(function(path) {
path.dirname = path.dirname.replace(/assets\//g, "");
}))
.pipe(changed(targetDir))
.pipe(gulp.dest(targetDir))
.pipe(notify({
message: "Image: <%= file.relative %>",
title: "Image optimized and published."
}));
});
});
gulp.task('watch', function () {
// Create LiveReload server
var server = livereload();
// Watch any files in public dir, reload on change
gulp.watch(['resources/compiled/**']).on('change', function(file) {
server.changed(file.path);
});
});
// What tasks does running gulp trigger?
gulp.task('default', ['scss', 'js','images', 'watch']);
Now, I noticed that I need to change these lines
gulp.watch(['resources/compiled/**']).on('change', function(file) {
server.changed(file.path);
});
to
livereload.listen();
gulp.watch('resources/uncompiled/**/*.scss', ['scss']);
to comply with ver3. of gulp (or gulp-notifications?) but it still didn't resolve it.
My issue is that currently I can't get the script to work like before, to notice changes in the main.sass and to compress that file to .css file and to also notice if i've placed images/js files and move them accordingly. The images part is not that important, but the SASS is. It should put it in /compiled/css or /compiled/images accordingly.
Every time I try to change and save the sass files, I get this:
path.js:146
throw new TypeError('Arguments to path.resolve must be strings');
^
TypeError: Arguments to path.resolve must be strings
at Object.win32.resolve (path.js:146:13)
at DestroyableTransform._transform (L:\xampp\htdocs\node_modules\gulp-changed\index.js:72:22)
at DestroyableTransform.Transform._read (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_modules
\readable-stream\lib\_stream_transform.js:172:10)
at DestroyableTransform.Transform._write (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_module
s\readable-stream\lib\_stream_transform.js:160:12)
at doWrite (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_modules\readable-stream\lib\_stream_
writable.js:326:12)
at writeOrBuffer (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_modules\readable-stream\lib\_s
tream_writable.js:312:5)
at DestroyableTransform.Writable.write (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_modules\
readable-stream\lib\_stream_writable.js:239:11)
at DestroyableTransform.Writable.end (L:\xampp\htdocs\node_modules\gulp-changed\node_modules\through2\node_modules\re
adable-stream\lib\_stream_writable.js:467:10)
at File.pipe (L:\xampp\htdocs\node_modules\gulp-watch\node_modules\vinyl\index.js:103:14)
at L:\xampp\htdocs\fusion\_designs\cms-design\gulpfile.js:33:22
at write (L:\xampp\htdocs\node_modules\gulp-watch\index.js:123:9)
at L:\xampp\htdocs\node_modules\gulp-watch\node_modules\vinyl-file\index.js:52:4
at L:\xampp\htdocs\node_modules\gulp-watch\node_modules\vinyl-file\node_modules\graceful-fs\graceful-fs.js:76:16
at fs.js:334:14
at L:\xampp\htdocs\node_modules\gulp-watch\node_modules\vinyl-file\node_modules\graceful-fs\graceful-fs.js:42:10
at L:\xampp\htdocs\node_modules\gulp-watch\node_modules\chokidar\node_modules\readdirp\node_modules\graceful-fs\grace
ful-fs.js:42:10
Of course I tried to change the paths, tried to use directly paths in the functions instead of passing variables, but to no avail.
Any suggestions? I've been struggling for 4 hours now and I did manage to get it to work to some extend, but I had to remove a lot of the functionality and to restart gulp every time. I couldn't get the images to get "minified" as well.
Well, several days later and I solved my issue on my own.
First of all, I had to set a gulp.watch for each type. I changed the gulp.tasks to perform one thing only.
Now every .scss sass, .js javascript, .jpg/.png/.bmp image file gets checked for changes and if so, the needed task gets called, which on it's own then compiled/minifies/moves the respected file and fires a (growl) notification.
Since I'm on Windows 8.1 I do have OS notifications but I'd rather use Growl, hence the growlNotifications are used.
Full source code of my gulpfile.js:
var gulp = require('gulp'),
gutil = require('gulp-util'),
notify = require('gulp-notify'),
autoprefix = require('gulp-autoprefixer'),
minifyCSS = require('gulp-minify-css'),
exec = require('child_process').exec,
sys = require('sys'),
uglify = require('gulp-uglify'),
changed = require('gulp-changed'),
livereload = require('gulp-livereload'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
cache = require('gulp-cache'),
path = require('path'),
watch = require('gulp-watch'),
growl = require('gulp-notify-growl'),
sass = require('gulp-sass');
// Initialize the Growl notifier instead of the default OS notifications
// meaning, this: https://i.imgur.com/ikkINZr.png
// changes to this: https://i.imgur.com/zz9m9k6.png
var growlNotifier = growl({
hostname : 'localhost' // IP or Hostname to notify, default to localhost
});
// Which directory should the files compile to?
var targetDir = 'resources/compiled';
gulp.task('scss', function () {
gulp.src('resources/uncompiled/**/*.scss')
.pipe(changed(targetDir))
//.pipe(minifyCSS()) //makes it hard to debug , to be used for in-production only
.pipe(sass({errLogToConsole: true}))
.pipe(autoprefix('last 15 version'))
.pipe(changed(targetDir))
.on('error', gutil.log)
.pipe(gulp.dest(targetDir))
.pipe(growlNotifier({ // change to notify if you wish to use your default OS notifications
message: "File: <%= file.relative %>",
title: "SASS compiled, minified and published."
}))
.pipe(livereload()); //this is how we notify LiveReload for changes
});
gulp.task('js', function() {
//needs testing, but it should be OK
gulp.src('resources/uncompiled/**/*.js')
.pipe(changed(targetDir))
.pipe(uglify())
.pipe(changed(targetDir))
.on('error', gutil.log)
.pipe(gulp.dest(targetDir))
.pipe(notify({
message: "File: <%= file.relative %>",
title: "Javascript minified and published."
}))
.pipe(livereload());
});
gulp.task('images', function() {
gulp.src(['resources/uncompiled/**/*.png', 'resources/uncompiled/**/*.jpg', 'resources/uncompiled/**/*.ico', 'resources/uncompiled/**/*.gif'])
.pipe(changed(targetDir))
//imagemin causes errors for me: http://pastebin.com/eDF3SeS6
//.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(changed(targetDir))
.on('error', gutil.log)
.pipe(gulp.dest(targetDir))
.pipe(growlNotifier({
message: "Image: <%= file.relative %>",
title: "Image optimized and published."
}))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen(); //we need to tell gulp to listen for livereload notification
//this is how we watch for changes in specific files and fire specific tasks
gulp.watch('resources/uncompiled/**/*.scss', ['scss']);
gulp.watch('resources/uncompiled/**/*.js', ['js']);
gulp.watch(['resources/uncompiled/**/*.png', 'resources/uncompiled/**/*.jpg', 'resources/uncompiled/**/*.ico', 'resources/uncompiled/**/*.gif'], ['images']);
});
// What tasks does running gulp trigger?
gulp.task('default', ['scss', 'js','images', 'watch']);
I am getting my head around protractor and phantomjs. The test looks like this, it works fine with
just chrome:
describe('angularjs homepage', function () {
beforeEach(function () {
browser.driver.manage().window().setSize(1124, 850);
});
it('should greet the named user', function () {
browser.driver.get('https://angularjs.org/');
element(by.model('yourName')).sendKeys('Julie');
var greeting = element(by.binding('yourName'));
expect(greeting.getText()).toEqual('Hello Julie!');
});
});
the protractor.config looks like this :
// An example configuration file.
exports.config = {
// Capabilities to be passed to the webdriver instance.
capabilities: {
'browserName': 'phantomjs',
'phantomjs.binary.path': 'C:/ptor_testing/node_modules/phantomjs/lib/phantom/phantomjs.exe'
},
// For speed, let's just use the Chrome browser.
//chromeOnly: true,
// Spec patterns are relative to the current working directly when
// protractor is called.
specs: ['example.spec.js'],
// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
// onComplete will be called just before the driver quits.
onComplete: null,
// If true, display spec names.
isVerbose: true,
// If true, print colors to the terminal.
showColors: true,
// If true, include stack traces in failures.
includeStackTrace: true,
// Default time to wait in ms before a test fails.
defaultTimeoutInterval: 30000
},
seleniumAddress: 'http://localhost:4444/wd/hub'
};
When I run this i get:
Error: Error while waiting for Protractor to sync with the page: {"message":"Can't find variable: angular","name":"ReferenceError","line":4,"stack":"ReferenceError: Can't find variable: angular\n at :4\n at anonymous (:13)\n at Na (phantomjs://webpage.evaluate():14)\n at phantomjs://webpage.evaluate():15\n at phantomjs://webpage.evaluate():15\n at phantomjs://webpage.evaluate():16\n at phantomjs://webpage.evaluate():16\n at phantomjs://webpage.evaluate():16","stackArray":[{"sourceURL":"","line":4},{"sourceURL":"","line":13,"function":"anonymous"},{"sourceURL":"phantomjs://webpage.evaluate()","line":14,"function":"Na"},{"sourceURL":"phantomjs://webpage.evaluate()","line":15},{"sourceURL":"phantomjs://webpage.evaluate()","line":15},{"sourceURL":"phantomjs://webpage.evaluate()","line":16},{"sourceURL":"phantomjs://webpage.evaluate()","line":16},{"sourceURL":"phantomjs://webpage.evaluate()","line":16}],"sourceId":81819056}
How can I fix this?
i'm using jasmine-reporters to generate a report after protractor finish the tests,
this is my configuration file:
onPrepare: function(){
var jasmineReporters = require('jasmine-reporters');
var capsPromise = browser.getCapabilities();
capsPromise.then(function(caps){
var browserName = caps.caps_.browserName.toUpperCase();
var browserVersion = caps.caps_.version;
var prePendStr = browserName + "-" + browserVersion + "-";
jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter("protractor_output", true, true,prePendStr));
});
},
i don't get any error, the reporters installed, but i don't see any file in protractor_output folder.
Any idea what am i doing wrong?
The problem is with the jamsine version:
If you are trying to use jasmine-reporters with Protractor, keep in mind that Protractor is built around Jasmine 1.x. As such, you need to use a 1.x version of jasmine-reporters.
npm install jasmine-reporters#~1.0.0
then the configuration should be:
onPrepare: function() {
// The require statement must be down here, since jasmine-reporters#1.0
// needs jasmine to be in the global and protractor does not guarantee
// this until inside the onPrepare function.
require('jasmine-reporters');
jasmine.getEnv().addReporter(
new jasmine.JUnitXmlReporter('xmloutput', true, true)
);
}
If you are on a newer version of the Jasmine Reporter, then the require statement no longer puts the JUnitXmlReporter on the jasmine object, but does put it on the module export. Your setup would then look like this:
onPrepare: function() {
// The require statement must be down here, since jasmine-reporters#1.0
// needs jasmine to be in the global and protractor does not guarantee
// this until inside the onPrepare function.
var jasmineReporters = require('jasmine-reporters');
jasmine.getEnv().addReporter(
new jasmineReporters.JUnitXmlReporter('xmloutput', true, true)
);
}
also you need to verify that xmloutput directory exist!
To complete the answer, if the output is still not generating,
Try adding these configuration line to your protractor exports.config object :
framework: "jasmine2",
onPrepare: function() {
var jasmineReporters = require('jasmine-reporters');
.......
}
For the casperjs, I have:
var casper = require('casper').create({
loadImages:false,
verbose: true,
logLevel: 'debug',
});
casper.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X)');
casper.then(function(){
this.echo('step 1 is finished!^.^');
});
I want use casper.test.assert('Step1 is finished');
When I run the code, I cannot use casperjs myjs.js anymore, because the new version need to use casperjs test yourjs.js. But when I use the new one, still give me the error
You can’t override the preconfigured casper instance in this test environment
So, what show I do?
Do exactly what it says. You cannot create a casper instance when you run casper test myjs.js. It will be injected. Just change
var casper = require('casper').create({
loadImages:false,
verbose: true,
logLevel: 'debug',
});
to
casper.options.loadImages = false;
casper.options.verbose = true;
casper.options.logLevel = 'debug';
and use casper inside of test blocks:
casper.test.begin('some test name', function(test) {
casper.start(url);
casper.then(function() {
test.assert(this.getTitle()!=''); // straight forward
})
casper.run(function() {
test.done();
});
});