How to handle basic authentication with protractor?

It's because Firefox doesn't trust any site by default with sending the Windows auth info over. Even if you change it in the configurations manually, it won't affect protractor because it opens Firefox with an isolated configuration each time you run your end to end tests.

You'll need to programatically set up a Firefox profile and set its preferences such that it would trust localhost (or some other website, depending where the pages are loaded from)

First, check out this example. It shows how you can set up the profile and how you can set preferences.

https://github.com/juliemr/protractor-demo/tree/master/howtos/setFirefoxProfile

What it does is that it modifies the homepage for each new tab. In the same manner (with the firefoxProfile.setPreference method) you can change the preferences responsible for trusting websites. They're called "network.automatic-ntlm-auth.trusted-uris" and "network.negotiate-auth.delegation-uris". You'll need to set them both to "localhost". (Again, if they're at some other place, it's obviously that URL)


The short answer is there is no easy way of doing it on chrome because they do not support modifying request headers -- see https://code.google.com/p/selenium/issues/detail?id=141 (title says response headers, but if you read it, it's for all headers).

That being said, there are ways to do it, albeit difficult.

1) Find a chrome extension/plugin that allows you to modify header. A simple search bring up many of them: https://chrome.google.com/webstore/search/modify%20header. You'll need to add the plugin to webdriver: see Is it possible to add a plugin to chromedriver under a protractor test?.

2) You can use browsermob-proxy (https://github.com/lightbody/browsermob-proxy); this way you route your traffic through the proxy, which would add the headers for you. From the docs:

POST /proxy/[port]/auth/basic/[domain] - Sets automatic basic authentication for the specified domain
Payload data should be json encoded username and password name/value pairs (ex: {"username": "myUsername", "password": "myPassword"}

There's a node project that may help you, https://github.com/zzo/browsermob-node, but you would still need to set up your proxy server yourself.

Both ways for chrome are complex, but would get you what you want. (or you can stick with firefox and follow Robert's answer)


As of version 59 Chrome no longer supports URLs with embedded credentials.

To work around this I wrote the authenticator-browser-extension Node module, which might be useful if you're using Protractor, WebDriver.io or similar test runners.

To use the module install it from npm:

npm install --save-dev authenticator-browser-extension

And import in the protractor.conf.js:

const { Authenticator } = require('authenticator-browser-extension');

exports.config = {
    capabilities: {
        browserName: 'chrome',

        chromeOptions: {
            extensions: [
                Authenticator.for('username', 'password').asBase64()
            ]
        }
    },
}

Pro tip: remember not to commit your credentials with your code, consider using env variables instead.

Hope this helps!

Jan


You can set the URL as http://username:[email protected]. Chrome will handle it!