CODEWITHSUNDEEP
node.jsauthenticationselenium-webdriverprotractor
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29129

How to handle the browser's native auth dialog with protractor

I need to test a webpage with protractor (nodeJs). This site is protected and the browser will show its native auth dialog when you try to enter it. We used to add the username and password to the url like this

https://username:[email protected]

but this approach didn't work in chrome or firefox (I don't remember which one it was).

If you fill in the dialog and submit, the browser makes the same request again adding the following header

header: { Authorization: "Basic bF0A23Zwdfsf==" }

Back to protractor, the first thing the script does is 

browser.driver.get('https://example.com');

So my first question is: Is it possible to somehow add headers?

I've also tried to call fetch inside onPrepare (this is before the browser.driver.get)

browser.driver.executeScript(function () {
    let headers = new Headers({"Authorization": "Basic " + new Buffer("username" + ":" + "password").toString("base64")});
    let myInit = {method: "GET", headers: headers};
    fetch("https://example.com", headers);
});

For some reason fetch seems to ignore the Authorization header (it is not present in the request).

Anyway, this problem is getting complex, which is why I'm posting here. Does anyone know the solution or have suggestions?

Upvotes: 2

Views: 1484

Answers (1)

tomonari_t
tomonari_t

Reputation: 559

I get answer from @Florent B. Thanks!!

Protractor doesn't have api for Basic Auth.

So I use node-http-proxy to add Basic Auth Header to request by Protractor.

How

1. Install node-http-proxy

$ npm install --save http-proxy

2. Edit protractor.conf.js

var httpProxy = require('http-proxy');
var proxy;
var PORT_PROXY_SERVER = 8899;
exports.config = {
  // do something
    capabilities: {
        'browserName': 'chrome',
        'proxy': {
            proxyType: 'manual',
            httpProxy: `localhost:${PORT_PROXY_SERVER}`,
            sslProxy: `localhost:${PORT_PROXY_SERVER}`
        }
    },        
    onPrepare: function () {
        // create proxy server
        proxy = httpProxy.createProxyServer({
        target: 'https://REAL_HOST.COM', // edit here
        auth: 'USER_NAME:PASSWORD',      // edit here
        changeOrigin: true
    }).listen(PORT_PROXY_SERVER);
  }
  // other your setting
};

Running above code, your protractor access to http://localhost:8899. ProxyServer pass it to https://REAL_HOST.COM with Basic Auth Header.

Upvotes: 1

Related Questions