Online Training: Web test automation with CodeceptJS. Sign up now!

How to handle Basic-Authentication required popup please

hi there, i am beginning test-automation at Test-stage. There is an Basic-auth Popup.
I have to trouble you because i am still far away from resolving my problem by myself

My problem is:

I have a problem with htaccess-Authentication popup. How to input username and password into the Authentication popup with codeceptjs sdk automatically?
#305 unfortunately realy has not any effect.

  • Please help me to resolve this issue.

Details

  • CodeceptJS version:
    (?) How to figure out that: codeceptjs --version not working in console
  • NodeJS Version: 10.16.3
  • Operating System: ubuntu lts 18.xy
  • Protractor || WebDriverIO || Nightmare version (if related)
    (?) How to figure out that: webdriverio --version not working in console

Thanks in advance!

@webaggregat you can find out the version of codeceptjs by looking in your package.json file and looking to see which version of codeceptjs was installed for your project. Additionally, if you installed globally you can find that out by running npm list -g --depth=0. The same applies to webdriverio.

In regards to your prompt you need to build a custom helper for that imo based on wdio documentation here sendAlertText

Codeceptjs Helper documentation - CodeceptJS - Helpers


const Helper = codecept_helper;

class WdioHelper extends Helper {
    sendTextToPrompt(text) {
        const wdio = this.helpers.WebDriver.browser;
        return wdio.sendAlertText(text).then(res => !!res)
            .catch((e) => { throw new Error(`Error occured please check: ${e.message}`); });
    }
}

module.exports = WdioHelper;

Make sure you enable your new helper in the config.

helpers: {
    ...
    WdioHelper: {
            require: './helpers/wdio-helper.js',
        },
    ...
}

Now in your test, you should have something like this:

...
I.sendTextToPrompt('your text here');
I.pressKey('Tab'); // you need to do this to switch to your second field in the prompt since they don't have locators
I.sendTextToPrompt('your secondary text here');
I.acceptPopup(); // to accept and close the pop-up
...

As a suggestion, if you are still having issues with this, I would suggest you investigate your cookies in your product if you could overwrite that prompt by passing in a specific cookie and value etc.

1 Like

@unreal2frag
thank U verry much for your lookout to the usage of codeceptJS!
This will help me a lot to learn how to use.

The server redirected me
from (https://) to (https://www.).
So i had to set my url to (https://usr:pass@www.)

Dear @unreal2frag,

thank u for your input how to build a custom helper for ‘sendAlertText’ to prompt.
I made sure to enable new helper in the config.

But I can not resolve this error in console by myself.
(?) How to find the wrong identifier?

@webaggregat Apologies for taking so long to answer. Thank you for replying and the screenshots, really helpful to be able to aid you in your problem.

Looking at your screenshots the problem is simple to fix:

In your codecept.conf.js you have the following

helpers: {
    WebDriver: { ... }
    helpers: { // your problem is here as you can see, your IDE already underlines a problem with red squigly marks. It means that you already have a key with the name helpers within the same context
        WdioHelper: {...},
    }
}

To fix this problem you have to change it into this:

helpers: {
    WebDriver: { ... }
    WdioHelper: {...},
}

As you can see in the example here Helpers - Docs, your helpers are listed one after another within the helpers: config key context, you do not need to mention the helpers key for every helper you add.

    helpers: {
        WebDriver: {
        url: "http://localhost",
        browser: "chrome",
        desiredCapabilities: {
            chromeOptions: {
                    args: [ "--headless", "--disable-gpu", "--window-size=800,600" ]
                }
            }
        }
        HooksHelper: {
            require: './helpers/hooks-helper.js',
        },
        RequestHelper: {
            require: './helpers/request-helper.js',
        },
        WdioHelper: {
            require: './helpers/wdio-helper.js',
        },
        DbHelper: {
            require: './node_modules/codeceptjs-dbhelper',
        },
        EmailHelper: {
            require: './helpers/email-helper.js'
        },
        JsdomHelper: {
            require: './helpers/jsdom-helper.js'
        },
        AppiumHelper: {
            require: './helpers/appium-helper.js'
        },
        Loki: {
            require: './node_modules/codeceptjs-loki',
            dbName: 'db.json',
            dbSeed: true,
        },
        ConfigHelper: {
            require: './helpers/config-helper.js',
        }
    }

As you can see from the more complex example above, all helpers are listed within the same context.

Hope this helps.