Integrating Protractor with Yeoman via Grunt

Question

I want to integrate Protractor with a scaffold produced by Yeoman. I followed a tutorial and therein, the older scenario-runner was used for setting up e2e testing (via grunt).

I would like to upgrade my scaffold and use Protractor instead.
Any thoughts?

Adding a config file like protractor's getting started guide says with the location of your spec files and then installing protractor is the way to go. Or you can check linemanjs which is like yeoman and has protractor built-in :) — Jesus Rodriguez, Sep 28 '13 at 12:08
For AngularJs yeoman is good i think because it is comeup with build also bt he is using karma for e2e tests and i want to use protractor how can integrate protractor in gruntjs file in yeoman — user2733090, Sep 28 '13 at 14:01

score 85 · Answer 1 · edited Jul 10 '14 at 16:52

85

Install protractor and grunt-protractor-runner from npm:

npm install protractor grunt-protractor-runner --save-dev

Create a config file for protractor (protractor.conf.js), change specs and baseUrl to your test files and test server:

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['test/e2e/*_test.js'],
  baseUrl: 'http://localhost:9001' //default test port with Yeoman
}

Update your Gruntfile.js, add the following after the karma task:

protractor: {
  options: {
    keepAlive: true,
    configFile: "protractor.conf.js"
  },
  run: {}
}

Add the protractor task under test

grunt.registerTask('test', [
  'clean:server',
  'concurrent:test',
  'autoprefixer',
  'connect:test',
  'karma',
  'protractor:run'
]);

Download and start the selenium server:

node_modules/protractor/bin/webdriver-manager update
node_modules/protractor/bin/webdriver-manager start

(In Windows:)

node node_modules/protractor/bin/webdriver-manager update
node node_modules/protractor/bin/webdriver-manager start

Update your package.json, add the following after "devDependencies". This will run the command after npm install so you don't need to remember every time.
```
"scripts": {
  "install": "node node_modules/protractor/bin/webdriver-manager update"
}
```
Run the test using grunt
```
grunt test
```

If you want protractor to start the server for you, remove

seleniumAddress: 'http://localhost:4444/wd/hub',

from protractor.conf.js, then running grunt test will start a standalone selenium instance during the test and quit it after running the test suite.

edited Jul 10 '14 at 16:52

MattDMo

100,794
21
241
231

answered Dec 06 '13 at 02:22

user2172816

1,200
8
11

3

Checkout Matt Briggs' [grunt-start-webdriver][(https://github.com/mbriggs/grunt-start-webdriver/blob/master/README.md) task. This grunt task executes `webdriver-manager start`, blocking the grunt build until webdriver is ready to accept connections. – Steve Jansen Jan 21 '14 at 15:02
1

@SteveJansen Nice, in fact if you don't specify the seleniumAddress option in protractor config file, protractor will start the server automatically if you have ran webdriver-manager update before. – user2172816 Jan 22 '14 at 08:43
3

I also had to add `grunt.loadNpmTasks("grunt-protractor-runner")` above the `grunt.registerTask` – Jun 03 '14 at 14:43
It doesn't start Selenium when I remove seleniumAddress. – Lukasz Madon Jul 07 '14 at 14:48
@lukas Maybe you can try to follow the answer by AlwaysLearning to add the seleniumServerJar and chromeDriver args – user2172816 Jul 08 '14 at 01:53
i had instead exports.config = { put module.exports = function(config){ and also rewrite configs from karma.conf.js. Instead of spec attribute i used files and it works fine. angular 1.2.6 – changtung Jan 21 '15 at 10:24
`npm install` (step #6) will fail if npm packages are installed with `--production` switch (without devDependencies). One solution is to change install script to `"install": "if [ -f node_modules/protractor/bin/webdriver-manager ]; then node node_modules/protractor/bin/webdriver-manager update; fi;"`. However I don't like it because it is not cross-platform solution. Does anyone have any idea how to change it to be crossplatform, and that `npm install` works when devDependencies are not installed? – Nikola M. May 29 '15 at 14:48
Solved #6 with custom grunt task. To summarize, what the task does: 1. Is cross-platform 2. Won't break build if devDependencies are not installed 3. Is being run during `npm install` Gist: https://gist.github.com/nikolamilenkovic/fd9aab4d08b5550af4b8 Change package.json to: `"scripts": { "install": "grunt webdriver-manager:update" }` – Nikola M. May 29 '15 at 16:05

score 10 · Answer 2 · answered Feb 18 '14 at 00:56

10

One thing to add to the existing answer; if you want to start up the Selenium server automatically you have to also specify the location of your seleniumServerJar and chromeDriver (if using Chrome) like so otherwise the tests will not work until you manually start the Selenium server (make sure to run "webdriver-manager update" from the command line first):

protractor: {
        options: {
            keepAlive: false,
            configFile: "test/config/protractor.conf.js",
            noColor: true, // If true, protractor will not use colors in its output.

            args: {
                seleniumServerJar: 'node_modules/protractor/selenium/selenium-server-standalone-2.39.0.jar',
                chromeDriver: 'node_modules/protractor/selenium/chromedriver.exe'
            }
        },
        run: {

        }
    },

answered Feb 18 '14 at 00:56

Always Learning

2,623
3
20
39

1

I didn't need to do this in my machine. Maybe is a Windows thing? – Jesús Carrera Apr 09 '14 at 17:13
1

Yeah, I'm using Windows and without the above, the server wouldn't start automatically. As soon as this was added, everything was working correctly. – Always Learning Apr 22 '14 at 21:00
@AlwaysLearning Do you know the file path to the two `args` for a mac? – Danger14 Aug 27 '14 at 18:08
I don't, sorry. Hopefully someone else on here does. I'd imagine though that it will be somewhere under your working directory and you could even run fiddler when you run the web driver-manager update to see where the files are downloaded to? – Always Learning Aug 29 '14 at 05:15
1

For mac, the path is fine, but you have to check the files. My version of the jar filename was newer, and you don't have the '.exe' on the chromedriver file. – eflat Jan 21 '15 at 00:16

score 5 · Answer 3 · edited May 23 '17 at 12:33

As @user2172816 mentions in their answer - leaving out seleniumAddress: 'http://localhost:4444/wd/hub' from your protractor config will usually cause Protractor to start a Selenium instance for you.

As an alternative, you could use grunt-protractor-webdriver to start Selenium:

1) Install and save grunt-protractor-webdriver

npm install grunt-protractor-webdriver --save-dev

2) Add the following into your Grunt definition function:

grunt.loadNpmTasks('grunt-protractor-webdriver');

3) Add the following example protractor webdriver task:

protractor_webdriver: {
        start: {
            options: {
                path: 'node_modules/protractor/bin/',
                command: 'webdriver-manager start'
            }
        }
    }

4) Add protractor_webdriver to your test task before running protractor e.g.

grunt.registerTask('test', [
    'clean:server',
    'concurrent:test',
    'autoprefixer',
    'connect:test',
    'karma',
    'protractor_webdriver',
    'protractor:run'
]);

Integrating Protractor with Yeoman via Grunt

3 Answers3

Linked