IE11 nightwatch browser stack end-2-end test against basic auth url fails with timeout

Question

Anyone knows how to make that work? See screenshot. IE11 opens the damn basic auth promt although the credentials are passed in the url:

$ npm run test:browserstack:ie11 -- --mode integration --url "https://someuser:somepassword@some.url"

package.json
  "test:browserstack:ie11": "vue-cli-service test:browserstack -c browserstack_config/nightwatch.conf.js -e ie11",

deps:

"@vue/cli-plugin-e2e-nightwatch": "^3.8.0",
"nightwatch": "^1.1.13",
"vue-cli-plugin-e2e-nightwatch-browserstack": "^1.2.8",

config:

ie11: {
  desiredCapabilities: {
    browser: 'internet explorer',
    version: '11',
    platform: 'WINDOWS',
    'browserstack.selenium_version': '3.6.0'
  }
},

Can you share the detailed error message? Besides, please check the configuration, whether you set the request timeout property? — Zhi Lv, Oct 08 '19 at 09:46
"Error: Error while running "waitForElementVisible" command: Timed out while waiting for element "some-selector" with "css selector" to be present for 40000 milliseconds" IE11 somehow displays the basic auth prompt and therefor the timeout happens. The test is green against an url without basic auth. What do you mean by "request timeout property" ? The page is already loaded... — fr00t, Oct 08 '19 at 11:38
Please check your code, whether you are using the css selector to find some elements, also you could try to use F12 developer tools to check whether the html page resource contains the elements? — Zhi Lv, Oct 10 '19 at 15:42

score 0 · Answer 1 · answered Jul 07 '21 at 16:05

Your browser settings are correct. it helps me to fix my testing configuration.

But It looks like you forgot to pass the API keys and so I will share with you my settings:

When you using vue-cli-plugin-e2e-nightwatch-browserstack at least in the last version available for node 14:

Got to the browserstack_config/nightwatch.conf.js file in your project, it will be created if you use the CLI tool to add the plugins into your vue app:


    const path = require('path')
    const deepmerge = require('deepmerge')
    const chromedriver = require('chromedriver')
    
    const startHeadless = process.env.VUE_NIGHTWATCH_HEADLESS === '1'
    const concurrentMode = process.env.VUE_NIGHTWATCH_CONCURRENT === '1'
    const userOptions = JSON.parse(process.env.VUE_NIGHTWATCH_USER_OPTIONS || '{}')
    const chromeArgs = []
    const geckoArgs = []
    
    // user may have not installed geckodriver
    let geckodriver = {}
    try {
      geckodriver = require('geckodriver')
    } catch (e) {}
    
    if (startHeadless) {
      chromeArgs.push('headless')
      geckoArgs.push('--headless')
    }
    
    const defaultSettings = {
      src_folders: ['tests/e2e/specs'],
      output_folder: 'tests/e2e/reports/junit',
      page_objects_path: 'tests/e2e/page-objects',
      custom_assertions_path: 'tests/e2e/custom-assertions',
      custom_commands_path: 'tests/e2e/custom-commands',
      test_workers: concurrentMode,
    
      test_settings: {
        default: {
          launch_url: '${VUE_DEV_SERVER_URL}',
          detailed_output: !concurrentMode,
          globals: {
            waitForConditionTimeout: 5000,
          },
        },
        chrome: {
          desiredCapabilities: {
            browserName: 'chrome',
            chromeOptions: {
              w3c: false,
              args: chromeArgs,
            },
          },
        },
        firefox: {
          desiredCapabilities: {
            browserName: 'firefox',
            alwaysMatch: {
              acceptInsecureCerts: true,
              'moz:firefoxOptions': {
                args: geckoArgs,
              },
            },
          },
          webdriver: {},
        },
        ie11: {
          desiredCapabilities: {
            browser: 'internet explorer',
            version: '11',
            platform: 'WINDOWS',
            'browserstack.selenium_version': '3.6.0'
          }
        },
      },
    }
    const baseSettings = deepmerge(defaultSettings, webdriverServerSettings())
    module.exports = deepmerge(baseSettings, adaptUserSettings(userOptions))
    
    function adaptUserSettings(settings) {
      // The path to nightwatch external globals file needs to be made absolute
      // if it is supplied in an additional config file, due to merging of config files
      if (settings.globals_path) {
        settings.globals_path = path.resolve(settings.globals_path)
      }
    
      return settings
    }
    
    function webdriverServerSettings() {
      return {
        selenium: {
          start_process: false,
          host: 'hub-cloud.browserstack.com',
          port: 443,
          cli_args: {
            'webdriver.chrome.driver': chromedriver.path,
            'webdriver.gecko.driver': geckodriver.path,
          },
        },
        test_settings: {
          default: {
            desiredCapabilities: {
              'browserstack.user':
                process.env.BROWSERSTACK_USERNAME || 'BROWSERSTACK_USERNAME',
              'browserstack.key':
                process.env.BROWSERSTACK_ACCESS_KEY || 'BROWSERSTACK_ACCESS_KEY',
              build: process.env.BROWSERSTACK_BUILD || 'default_build',
              project: process.env.BROWSERSTACK_PROJECT || 'default_project',
              'browserstack.debug': true,
              'browserstack.local': true,
            },
          },
          chrome: {
            desiredCapabilities: {
              'browserstack.user':
                process.env.BROWSERSTACK_USERNAME || 'BROWSERSTACK_USERNAME',
              'browserstack.key':
                process.env.BROWSERSTACK_ACCESS_KEY || 'BROWSERSTACK_ACCESS_KEY',
              build: process.env.BROWSERSTACK_BUILD || 'default_build',
              project: process.env.BROWSERSTACK_PROJECT || 'default_project',
              'browserstack.debug': true,
              'browserstack.local': true,
            },
          },
          ie11: {
            desiredCapabilities: {
              'browserstack.user':
                  process.env.BROWSERSTACK_USERNAME || 'BROWSERSTACK_USERNAME',
              'browserstack.key':
                  process.env.BROWSERSTACK_ACCESS_KEY || 'BROWSERSTACK_ACCESS_KEY',
              build: process.env.BROWSERSTACK_BUILD || 'default_build',
              project: process.env.BROWSERSTACK_PROJECT || 'default_project',
              'browserstack.debug': true,
            },
          },
        },
      }
    }

Then in the console be sure of export your environment variable for: BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY. additional you might want to do so for BROWSERSTACK_BUILD and BROWSERSTACK_PROJECT Example for Linux od MacOS:

export BROWSERSTACK_USERNAME=<My User Name> 
export BROWSERSTACK_ACCESS_KEY=<access key>

Same example in window:

$Env:BROWSERSTACK_USERNAME=<My User Name> 
$Env:BROWSERSTACK_ACCESS_KEY=<access key>

Exacute:

vue-cli-service test:browserstack -c browserstack_config/nightwatch.conf.js -e ie11 tests/e2e/specs/test.js

That might work fine.

Your question was my answer I hope this is yours.

Thanks.

IE11 nightwatch browser stack end-2-end test against basic auth url fails with timeout

1 Answers1