Protractor and Browserstack

[Charlie]

Has anyone come up with a relatively painless way to run Protractor on Browserstack?

It seems it possible according to https://twitter.com/tatejohnson/status/401984671195471872

Using the configuration below, I'm able to run the tests but browserstack never connects to my local server, instead it attempts to access about:blank#/announcements

where it fails to find Angular and times out.

        browserstackTunnel: {

            options: {

                accessKey: process.env.BROWSER_STACK_ACCESS_KEY

            },

            development: {

                options: {

                    tunnelIdentifier: 'hbo-media-relations-tunnel-id',

                    hostname: 'localhost',

                    port: 9000

                }

            }

        },

        protractor: {

            options: {

                configFile: "node_modules/protractor/referenceConf.js", // Default config file

                keepAlive: true, // If false, the grunt process stops when the test fails.

                noColor: false, // If true, protractor will not use colors in its output.

                args: {

                    // Arguments passed to the command

                }

            },

            admin_browserstack_target: {

                options: {

                    configFile: "protractor.admin.bs.conf.js", // Target-specific config file

                    args: {} // Target-specific arguments

                }

            }

        },

//protractor.admin.bs.conf.js.

exports.config = {

    // The address of a running selenium server.

    seleniumAddress: 'http://hub.browserstack.com/wd/hub',

    allScriptsTimeout: 55000,

    // Capabilities to be passed to the webdriver instance.

    capabilities: {

        'build': 'E2E Tests',

        'project': 'Media Relations',

        'base': 'BrowserStack',

        'browserstack.tunnel': 'true',

        'url': 'http://localhost:9000/',

        'tunnelIdentifier':'hbo-media-relations-tunnel-id',

        'browserstack.debug': true,

        'browser': 'chrome',

        'browser_version': '36.0',

        'os': 'OS X',

        'os_version': 'Mountain Lion',

        'browserstack.user': process.env.BROWSER_STACK_USERNAME,

        'browserstack.key': process.env.BROWSER_STACK_ACCESS_KEY,

    },

    // Spec patterns are relative to the current working directly when

    // protractor is called.

    specs: ['test/e2e/spec/admin/**/*.js'],

    // Options to be passed to Jasmine-node.

    jasmineNodeOpts: {

        showColors: true,

        defaultTimeoutInterval: 90000,

        browserNoActivityTimeout: 50000,

        captureTimeout: 60000

    }

};

[Niko Nyman]

Disclaimer: I'm looking to set up a Protractor-Browserstack setup, but have not tried a single line of code yet... 

That said, there's documentation that says you should have:

    'browserstack.local' : 'true'

in your `capabilities` to test content from localhost. Can you try if this works? Documentation is here: http://www.browserstack.com/automate/node#setting-local-tunnel

[Charlie]

Success!  Ashwin Gonsalves over at BrowserStack got me headed in the right direction.
I needed to set baseURL and ensure my server was up and running before calling the browserStackTunnel task.

my conf file looks like:

// An example configuration file.

var bsConfig = {

        'build': 'E2E Tests - ' + new Date().toISOString(),

        'project': 'Media Relations',

        'debug': true

    };

exports.config = {

    // The address of a running selenium server.

    seleniumAddress: 'http://hub.browserstack.com/wd/hub',

    baseUrl: 'http://localhost:9000',

    allScriptsTimeout: 55000,

    // Capabilities to be passed to the webdriver instance.

    multiCapabilities: [{

            'browserName': 'firefox',

            'os': 'Windows',

            'build': bsConfig.build,

            'project': bsConfig.project,

            'browserstack.debug': bsConfig.debug,

            'browserstack.tunnel': 'true',

            'browserstack.user': process.env.BROWSER_STACK_USERNAME,

            'browserstack.key': process.env.BROWSER_STACK_ACCESS_KEY

        },

        {

            'browserName': 'IE',

            'browser_version': '11.0',

            'os': 'Windows',

            'build': bsConfig.build,

            'project': bsConfig.project,

            'browserstack.debug': bsConfig.debug,

            'browserstack.tunnel': 'true',

            'browserstack.user': process.env.BROWSER_STACK_USERNAME,

            'browserstack.key': process.env.BROWSER_STACK_ACCESS_KEY

        },

        {

            'browserName': 'safari',

            'os': 'OS X',

            'build': bsConfig.build,

            'project': bsConfig.project,

            'browserstack.debug': bsConfig.debug,

            'browserstack.tunnel': 'true',

            'browserstack.user': process.env.BROWSER_STACK_USERNAME,

            'browserstack.key': process.env.BROWSER_STACK_ACCESS_KEY

        },

        {

            'browserName': 'chrome',

            'os': 'Windows',

            'build': bsConfig.build,

            'project': bsConfig.project,

            'browserstack.tunnel': bsConfig.debug,

            'browserstack.user': process.env.BROWSER_STACK_USERNAME,

            'browserstack.key': process.env.BROWSER_STACK_ACCESS_KEY

        },

        {

            'browserName': 'chrome',

            'os': 'OS X',

            'os_version': 'Mountain Lion',

            'build': bsConfig.build,

            'project': bsConfig.project,

            'browserstack.debug': bsConfig.debug,

            'browserstack.tunnel': 'true',

            'browserstack.user': process.env.BROWSER_STACK_USERNAME,

            'browserstack.key': process.env.BROWSER_STACK_ACCESS_KEY

        }],

    // Spec patterns are relative to the current working directly when

    // protractor is called.

    specs: ['test/e2e/spec/admin/**/*.js'],

    // Options to be passed to Jasmine-node.

    jasmineNodeOpts: {

        showColors: true,

        defaultTimeoutInterval: 90000,

        browserNoActivityTimeout: 50000,

        captureTimeout: 60000

    }

};

And my grunt tasks look like:

    grunt.registerTask('Test-e2e-admin-browserstack', [

        'sass:dev',

        'clean:server',

        'concurrent:server',

        'connect:e2e',

        'linkAssets-dev-admin',

        'browserstackTunnel',

        'protractor:admin_browserstack_target'

    ]);

        browserstackTunnel: {

            options: {

                accessKey: process.env.BROWSER_STACK_ACCESS_KEY

            },

            development: {

                options: {

[Niko Nyman]

Great to hear you made it work! 

I also managed to get the AngularJS-Protractor-Browserstack combo working with a simple setup. I basically followed Browserstack's instructions for setting up node.js (http://www.browserstack.com/automate/node).

First, I installed the seleniun web driver:

npm install -g browserstack-webdriver

I then set up my protractor conf.js file. Remember to change your user name and secret key to the ones given on the Browserstack Automate page. If you're logged in, the above instructions for node.js will have you user and key substituted in the examples, and you can just copy&paste the lines of code from there.

exports.config = {

  capabilities: {

    'browserstack.user' : 'my_user_name',

    'browserstack.key' : 'my_secret_key',

    // Needed for testing localhost

    'browserstack.local' : 'true',

    // Settings for the browser you want to test

    'browser' : 'Chrome',

    'browser_version' : '36.0',

    'os' : 'OS X',

    'os_version' : 'Mavericks',

    'resolution' : '1024x768'

  },

  

  // Browserstack's selenium server address

  seleniumAddress: 'http://hub.browserstack.com/wd/hub',

  // Pattern for finding spec files

  specs: ['test/**/*.spec.js']

}

After the setup, I downloaded the BrowserStackLocal binary.

I executed the binary in the console per the instructions (again, your key will be automatically substituted in the node.js guide, if you're logged in to Browserstack) to open the Browserstack tunnel:

./BrowserStackLocal your_secret_key localhost,3000,0

Change the port number to the port you're hosting your AngularJS files at on localhost, otherwise it won't work.

Everything ready, I ran my tests in the console with this command:

protractor protractor.conf.js

And everything worked! :)