I'm trying to run protractor as a gulp task but I can't get it to work.
I've tried the gulp-protractor plugin like this:
gulp.task('protractor-server', function (done) {
var called = false;
nodemon({
script: 'test/e2e/server/server.js',
stdout: true,
ignore: ['app/**', 'node_modules'],
watch: 'test/e2e/**/*.js'
})
.on('start', function () {
if (!called) {
done();
}
called = true;
});
});
gulp.task('run-protractor', ['protractor-server'], function (done) {
return gulp.src(['test/e2e/**/*.js'])
.pipe(protractor({
configFile: __dirname + '/protractor.conf.js'
}))
.on('error', function (error) {
console.log('gulp error: ', error);
throw error;
});
});
However, firstly why do I need to use gulp.src(['test/e2e/**/*.js']) and then pipe protractor? Is it not possible to run protractor by it self since i have specified the spec files in the protractor.conf-file. (fyi I did try that but it didn't work).
Secondly, when I try and run like specified in the above snippet I keep getting errors like this: WARNING - pattern C:\[absolutepath]\test\e2e\[subfolder]\[filename].js did not match any files. for all files that exist in the e2e folder and sub-folders. What could be the reason for this?
this is my protractor conf file:
exports.config = {
specs: [
'test/e2e/[subfolder]/*.page.js',
'test/e2e/[subfolder]/*.spec.js'
],
baseUrl: 'http://localhost:3000'
};
If I start the server separately and the run protractor from the command prompt it works fine. I was thinking to use child_process.spawn and start a protractor child process but i haven't gotten that to work either. Any suggestions on how to start protractor from a gulp task?
No need to use 'test/e2e/**/*.js']
Provide all configuration in protractor.conf.js file it self.
You can use task like
gulp.task('run-protractor', ['run-server','run-webdriver'], function (done) {
//run protractor conf here
})
create run-server and run-webdriver gulp taks, test them separately once they are working, utilize them into run-protractor task.
Related
I setup my protractor with this conf file below:
exports.config = {
framework: 'mocha',
rootElement: '#container1',
specs: ['*container1_spec.js'],
capabilities: {
browserName: 'chrome',
version: '',
platform: 'ANY'
},
onPrepare: function() {
// implicit and page load timeouts
browser.manage().timeouts().pageLoadTimeout(40000);
browser.manage().timeouts().implicitlyWait(25000);
}
}
The application is manually bootstrapped in angular and I need to change the root element after some steps when the application transfers the control to another application by doing a window.location.replace. The second application that starts is also an angular app which does manual bootstrapping.
From another thread in SO. I found the code that I could do browser.rootEl = 'div#container2';
WebDriverError: unknown error: [ng:test] no injector found for element argument to getTestability
http://errors.angularjs.org/1.5.8/ng/test
As I mentioned in the question, changing the rootEl did not work. I had to resort to working with the DOM to run the tests.
function getMessage() {
return document.getElementById('msg').textContent;
}
setTimeout(function() {
browser.executeScript(getMessage).then(function (txt) {
chai.expect(txt).to.equal("Error occured");
done();
});
}, 10000);
browser.executeScript is the key function that allowed me to query DOM and workaround. I had to add a timeout for the lag to allow the second application to download and bootstrap.
I'm using gulp to generate a config.js file for angular, then use another gulp task to concat all .js files together, the gulp tasks look like this:
gulp.task('config', function() {
var environment = process.env.NODE_ENV || 'development';
gulp.src('public/config/' + environment + '.json')
.pipe(ngConstant({
name: 'app.config'
}))
.pipe(concat('public/js/config.js'))
.pipe(gulp.dest('.'));
});
gulp.task('js', ['config'], function() {
gulp.src('public/js/*.js')
.pipe(concat('app.js'))
.pipe(gulp.dest('public/dist'));
});
gulp.task('default', ['config', 'js']);
If I run gulp locally, everything works file.
But when I push to heroku, using this post install script:
"postinstall": "bower install && gulp"
I can see gulp run successfully, after adding some debug, I can see the config.js file is even created correctly, but the generated app.js does not include config.js. Can anyone suggest what might be wrong here?
UPDATE: I found it works if I do gulp config && gulp js but not gulp, is this because gulp is async and config.js wasn't created when js job started to run? but i thought I have already specified the task dependencies?
The problem is: I'm not returning a stream from tasks, for example the config task should be like this:
gulp.task('config', function() {
var environment = process.env.NODE_ENV || 'development';
var stream = gulp.src('public/config/' + environment + '.json')
.pipe(ngConstant({
name: 'app.config'
}))
.pipe(concat('public/js/config.js'))
.pipe(gulp.dest('.'));
return stream; // THIS IS IMPORTANT!
});
I'm trying to run my end to end tests written with protractor and jasmine. It works perfectly when I call protractor protractor.config.js directly.
However, when I use gulp-protractor, I keep getting the "Spec patterns did not match any files" error and the tests do not run.
This is my protractor runner gulp task:
gulp.task('protractor-run', function (done) {
return gulp.src(["./e2e-tests/**/*-spec.js"])
.pipe(protractor({
configFile: "./config/protractor-config.js",
args: ['--baseUrl', 'http://127.0.0.1:8000']
}))
.on('error', function(e) { throw e })
});
and this is the error:
WARNING - pattern C:\path\to\app\e2e-tests\login\login-spec.js did not math any files.
[launcher] Process exited with error code 1
C:\path\to\app\node_modules\protractor\node_modules\q\q.js:126
throw e;
^
Error: Spec patterns did not match any files.
What am I missing?
I managed to get it working. By providing an empty readable stream. Then you specify your spec files in the config file instead.
var protractor = require('gulp-protractor').protractor;
gulp.task('protractor', ['webdriverUpdate'],function(){
return gulp.src([])
.pipe(protractor({
configFile: __dirname + '/protractor.conf.js'
}));
});
also don't forget the webdriverUpdate
var webdriverUpdate = require('gulp-protractor').webdriver_update;
gulp.task('webdriverUpdate', webdriverUpdate );
and in the config file this:
seleniumServerJar: './node_modules/protractor/selenium/selenium-server-standalone-2.47.1.jar',
With this I stopped getting the error.
Update
The issue #2551 is closed and fixed since 2.5.0
I resolved this in a gulpfile that launches protractor tests by putting a file path into the parameter of gulp.src(['file_path_goes_here']). The task I was trying to run had no file path between the brackets, and was throwing the error.
gulp.task('works', 'Run some tests', function() {
gulp.src(['path/to/test.spec.js'])
.pipe(protractor({
configFile: __dirname + '/../test/protractor.conf.js',
args: ['--baseUrl', 'http://localhost:9099']
}))
});
gulp.task('error', 'Run feature tests locally', function() {
gulp.src([''])
.pipe(protractor({
configFile: __dirname + '/../test/protractor_local.conf.js',
args: ['--baseUrl', 'http://localhost:9099']
}))
});
I am looking for a working recipe that can minify my AngularJS code and still provide a source map. Currently I have this gulp task but minification won't work:
gulp.task('browserify', function(cb) {
var bundler = browserify({
entries: [paths.browserEntry],
globals: false,
debug: !settings.PRODUCTION
})
bundler
.bundle()
.on('error', cb)
.on('log', util.log)
.pipe(gulpif(!settings.PRODUCTION, mold.transformSourcesRelativeTo(paths.js)))
.pipe(source(paths.js))
.pipe(buffer()) // because the next steps do not support streams
.pipe(concat('bundle.js'))
.pipe(gulpif(settings.server.minify.js, rename({suffix: '.min'})))
.pipe(gulpif(settings.server.minify.js, uglify()))
.pipe(gulp.dest(paths.js))
.on('end', function() {
cb()
})
})
Any clues?
You may see an example here. The example will output a minified bundle.min.js plus a bundle.map. The crucial points which makes the example works:
Installed debowerify
Installed minifyify
package.json - added transform property
"browserify": {
"transform": [
"debowerify"
]
}
Gruntfile.js - using preBundleCB to make minifyify work
preBundleCB: function (b) {
b.plugin( minifyify,
{ output: './dist/bundle.map',
map:'bundle.map'
});
}
Hope the example is useful to you.
I'm using Yeoman and generator-angular to manage AngularJS apps, but I'm having trouble with automated testing.
Running grunt test will run unit tests once. I can get E2E tests to run after unit tests by altering the karma config block in Gruntfile.js, adding e2e:
karma: {
//...
e2e: {
configFile: 'karma-e2e.conf.js',
singleRun: true
}
},
Great: now when I type grunt test all tests are run. But they're only run one time, and there's a big overhead (starting compass, running the server, launching the Chrome processes, etc.). Instead, the server and Chrome processes should remain running and, when I save a test, tests should be re-run.
I can achieve this by modifying both karma.conf.js and karma-e2e.conf.js and setting singleRun = true, then running karma start in one terminal pane, and karma start karma-e2e.conf.js in another. Provided none of the ports in the karma configs conflict (which they do by default), this works. Now I'm bypassing Grunt and just doing my own thing (which seems a little silly, as Grunt is supposed to make things easier).
Anyway, after a few more changes (fixes?) — not detailed for brevity — this works but doesn't cut it: I now have to run two different commands and keep an eye on two different terminal panes. Surely there's a better way.
How can I run a single command to watch my test files and re-run tests appropriately?
Bonus question: why on Earth is this functionality not provided as is? Is it just a question of the developer(s) of generator-angular not having enough time to implement this stuff? I ask because I'm only just getting into Angular/Yeoman/Karma (as you probably noticed), and feel that automated testing of both E2E and unit tests are crucial to workflow.
As I mentioned in a comment to your question - PhantomJS saves a lot of hassle. That aside, I believe you can handle everything from within your Gruntfile and just continue to run grunt test to start the whole thing.
grunt-karma allows full customization of your karma options with some handy add-ons.
From the docs:
....
You can override any of the config file's settings directly:
karma: {
unit: {
configFile: 'karma.conf.js',
runnerPort: 9999,
singleRun: true,
browsers: ['PhantomJS']
}
}
Sharing Configs
If you have multiple targets, it may be helpful to share common
configuration settings between them. Grunt-karma supports this by
using the options property:
karma: {
options: {
configFile: 'karma.conf.js',
runnerPort: 9999,
browsers: ['Chrome', 'Firefox']
},
continuous: {
singleRun: true
browsers: ['PhantomJS']
},
dev: {
reporters: 'dots'
}
}
Additionally you may want to snoop around in Yeoman's generator-angular Gruntfile code to see what else may be available or at least mockable.
You can try this to run only e2e tests
grunt karma:e2e
Within the karma.conf.js file (approx line:38) find autoWatch = false; and change it to true.
Now if you run grunt karma:unit you will find that it leaves the test server running and any changes to project files immediately run the tests again.
//
// test/midway/appSpec.js
//
describe("Midway: Testing Modules", function() {
describe("App Module:", function() {
var module;
before(function() {
module = angular.module("App");
});
it("should be registered", function() {
expect(module).not.to.equal(null);
});
describe("Dependencies:", function() {
var deps;
var hasModule = function(m) {
return deps.indexOf(m) >= 0;
};
before(function() {
deps = module.value('appName').requires;
});
//you can also test the module's dependencies
it("should have App.Controllers as a dependency", function() {
expect(hasModule('App.Controllers')).to.equal(true);
});
it("should have App.Directives as a dependency", function() {
expect(hasModule('App.Directives')).to.equal(true);
});
it("should have App.Filters as a dependency", function() {
expect(hasModule('App.Filters')).to.equal(true);
});
it("should have App.Routes as a dependency", function() {
expect(hasModule('App.Routes')).to.equal(true);
});
it("should have App.Services as a dependency", function() {
expect(hasModule('App.Services')).to.equal(true);
});
});
});
});