How to handle basic authentication with protractor?

Question

I\'m trying protractor to write a few tests in a non angular application. I have to login in a page trough basic authentication in google chrome, but i have no idea how.

Answer 1

You may use Windows Credentials Manager to avoid this pop-up being constantly shown on every attempt to log in.

Add your credentials to the 'Generic' category there, restart browser (including background apps running).

Some explanation I currently have: this pop-up is not 'browser' specific, it is 'in the middle', between browser and domain credentials verification. Thus browser features (save password, autofill) do not work completely. By the same reason Protractor / Selenium etc. do not have complete control over that pop-up - it is by design of the domain authentication.

As not completely sure if it is the only reason there are some other hints: - you may also need to add your site to the IE (IE, not Chrome) list of trusted sites (Chrome grabs information from there); - check "Automatic logon with current user name and password" in IE (not Chrome) - may not work if credentials you are using for the site are different from those you use to login to the machine.

Answer 2

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

Answer 3

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)

Answer 4

hankduan's browsermob-proxy solution worked for me on Chrome - but the latest revisions of browsermob are using a thing called littleproxy which does not support auth headers. Thusly I had to do browsermob-proxy -port 9090 --use-littleproxy false, which got things working.

Answer 5

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)

That should fix it :)

Answer 6

In fact you can just set the url as http://username:password@yourdomain.com. Chrome will handle it!