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

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.