browserstack-local does not work with webdriverio v5 but works with webdriverio v4

[suchitrak]

browserstack-local does not work with webdriverio V5 but works with V4 in mutiremote(https://webdriver.io/docs/multiremote.html) capability

wdio.conf.js
var browserstack = require('browserstack-local');
exports.config = {
user:'',
key: '',

specs: [
    './test/specs/**/*.js'
],
browserstackLocal: true,

onPrepare: function (config, capabilities) {
 console.log("Connecting local");
 return new Promise(function (resolve, reject) {
   exports.bs_local = new browserstack.Local();
   exports.bs_local.start({ 
             'key': exports.config.key
             }, function (error) {
     if (error) return reject(error);
     console.log('Connected. Now testing...');
     resolve();
   }); 
 });

},
onComplete: function (exitCode, config, capabilities,results) {
exports.bs_local.stop({function () { console.log("bslocal stopped") }});
},
capabilities: {
myChromeBrowser: {
capabilities: {
browserName: 'chrome'
}
},
myFirefoxBrowser: {
capabilities: {
browserName: 'firefox'
}
}
},
logLevel: 'info',
bail: 0,
baseUrl: '',
waitforTimeout: 10000,
connectionRetryTimeout: 90000,
connectionRetryCount: 3,
services: ['browserstack'],
framework: 'mocha',
reporters: ['spec'],
mochaOpts: {
ui: 'bdd',
timeout: 60000
}
}

Basic.js

const assert = require('assert')

describe('webdriver.io page', () => {
it('should have the right title', () => {
myChromeBrowser.url('https://webdriver.io')
myFirefoxBrowser.url('https://google.com')
const title = browser.getTitle()
assert.strictEqual(title, 'WebdriverIO · Next-gen WebDriver test framework for Node.js')
})
})

package.json

{
"name": "browserstack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@wdio/browserstack-service": "^5.12.5",
"@wdio/cli": "^5.13.1",
"@wdio/local-runner": "^5.13.1",
"@wdio/mocha-framework": "^5.12.1",
"@wdio/spec-reporter": "^5.12.1",
"@wdio/sync": "^5.13.0",
"browserstack-local": "^1.4.2",
"chromedriver": "^77.0.0",
"wdio-chromedriver-service": "^5.0.2"
}
}

Gives Error - ERROR: Required option "capabilities" is missing.

0-0 worker error { name: 'Error',
message: 'Required option "capabilities" is missing',
stack:
'Error: Required option "capabilities" is missing\n at validateConfig (node_modules/@wdio/config/build/utils.js:80:13)\n at Promise.all.browserNames.map.browserName (node_modules/webdriverio/build/index.js:68:47)\n at Array.map ()\n at multiremote (node_modules/webdriverio/build/index.js:67:34)\n at initialiseInstance (node_modules/@wdio/runner/build/utils.js:77:54)\n at Runner._initSession (node_modules/@wdio/runner/build/index.js:150:87)\n at Runner.run (node_modules/@wdio/runner/build/index.js:67:32)\n at processTicksAndRejections (internal/process/next_tick.js:81:5)' }

[pablo-letgo]

Can somebody confirm this?

[abhi291096]

I just tried the BrowserStack sample Webdriver IO to test this out- https://github.com/browserstack/webdriverio-browserstack. The sample test with Local enabled works.
Sharing the session that I executed: 111c8fdf193eb9f13b4bdcb7f39f88d5569b2386

[halukbaysal]

@abhi291096 I have tried to execute sample test but it was not successful.

[ducle91]

@suchitrak I'm able to get BS working with Webdriverio V5. You might have to include the <"browserstack.local" : true> option in your capabilities

[RajaBellebon]

Hello, I have somehow the same issue.

We are using WebdriverIo v5 and browserstack, it works fine locally and on browserstack but we are recently trying to use multiremote and not sure why but it keeps trying to connect to selenium-hub.
The function below returns the config, we are using for remote.

We have a function that connects to browserstack-local

async function startServer() {
  const spinner = ora(chalk.cyan('Connecting to BrowserStack')).start();
  return new Promise((resolve, reject) => {
    bsLocal.start(
      { key: bsKey, localIdentifier: commit, forceLocal: true },
      // eslint-disable-next-line consistent-return
      error => {
        if (error) {
          spinner.fail(chalk.red('Failed to connect to BrowserStack:', error));
          return reject(error);
        }
        if (commit) {
          spinner.succeed(
            chalk.cyan(`Connected to BrowserStack with identifier: ${commit}`),
          );
        }
        resolve();
      },
    );
  });
}

We created a dedicated function to create the client for mulit-remote

function setBrowserstackClientForRemote() /*: Array<?Object>*/ {
  const RESOLUTION = '1920x1080';
  return [
    {
      browserName: 'chrome',
      options: {
        capabilities: {
          os: 'Windows',
          os_version: '10',
          browserName: 'chrome',
          browser_version: '80.0',
          resolution: RESOLUTION,
          project: 'Atlaskit Webdriver Tests',
          build: BUILD_BRANCH_NAME,
          'browserstack.local': true,
          'browserstack.debug': true,
          'browserstack.idleTimeout': 300,
          'browserstack.localIdentifier': commit,
          user: process.env.BROWSERSTACK_USERNAME,
          key: process.env.BROWSERSTACK_KEY,
        },
      },
      services: ['browserstack'],
      logLevel: 'error',
      user: process.env.BROWSERSTACK_USERNAME,
      key: process.env.BROWSERSTACK_KEY,
      waitforTimeout: 3000,
    },
  ];
}```


When running with logging the command


  console.info node_modules/@wdio/logger/build/node.js:114
    2020-04-14T06:51:05.989Z INFO webdriver: [POST] http://localhost:4444/wd/hub/session

  console.info node_modules/@wdio/logger/build/node.js:114
    2020-04-14T06:51:05.990Z INFO webdriver: DATA {
      capabilities: {
        alwaysMatch: {
          os: 'Windows',
          os_version: '10',
          browserName: 'chrome',
          browser_version: '80.0',
          resolution: '1920x1080',
          project: 'Atlaskit Webdriver Tests',
          build: 'rbellebon_local_run',
          'browserstack.local': true,
          'browserstack.debug': true,
          'browserstack.idleTimeout': 300,
          'browserstack.localIdentifier': 'rbellebon',
           user: xxxxx,
          key:xxxxxx,
          services: [Array],
          name: 'collab.ts'
        },
        firstMatch: [ {} ]
      },
      desiredCapabilities: {
        os: 'Windows',
        os_version: '10',
        browserName: 'chrome',
        browser_version: '80.0',
        resolution: '1920x1080',
        project: 'Atlaskit Webdriver Tests',
        build: 'rbellebon_local_run',
        'browserstack.local': true,
        'browserstack.debug': true,
        'browserstack.idleTimeout': 300,
        'browserstack.localIdentifier': 'rbellebon',
        user: xxxxx,
          key:xxxxxx,
        services: [ 'browserstack' ],
        name: 'collab.ts'
      }
    }

  console.info node_modules/@wdio/logger/build/node.js:114
    2020-04-14T06:51:05.993Z INFO webdriver: [POST] http://localhost:4444/wd/hub/session

  console.info node_modules/@wdio/logger/build/node.js:114
    2020-04-14T06:51:05.993Z INFO webdriver: DATA {
      capabilities: {
        alwaysMatch: {
          os: 'Windows',
          os_version: '10',
          browserName: 'chrome',
          browser_version: '80.0',
          resolution: '1920x1080',
          project: 'Atlaskit Webdriver Tests',
          build: 'rbellebon_local_run',
          'browserstack.local': true,
          'browserstack.debug': true,
          'browserstack.idleTimeout': 300,
          'browserstack.localIdentifier': 'rbellebon',
           user: xxxxx,
          key:xxxxxx,
          services: [Array],
          name: 'collab.ts'
        },
        firstMatch: [ {} ]
      },
      desiredCapabilities: {
        os: 'Windows',
        os_version: '10',
        browserName: 'chrome',
        browser_version: '80.0',
        resolution: '1920x1080',
        project: 'Atlaskit Webdriver Tests',
        build: 'rbellebon_local_run',
        'browserstack.local': true,
        'browserstack.debug': true,
        'browserstack.idleTimeout': 300,
        'browserstack.localIdentifier': 'rbellebon',
         user: xxxxx,
          key:xxxxxx,
        services: [ 'browserstack' ],
        name: 'collab.ts'
      }
    }


  ●  Cannot log after tests are done. Did you forget to wait for som
ething async in your test?
    Attempted to log "REJECTION Error: connect ECONNREFUSED 127.0.0.1:4444
        at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1054:14) {
      errno: 'ECONNREFUSED',
      code: 'ECONNREFUSED',
      syscall: 'connect',
      address: '127.0.0.1',
      port: 4444
    }".

      37 | // Node promise rejection are now logged for debbugging
      38 | process.on('unhandledRejection', reason => {
    > 39 |   console.log('REJECTION', reason);
         |           ^
      40 | });
      41 | 
      42 | // We need to ensure that each test has at least one assertion.

      at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1054:14) {
        errno: 'ECONNREFUSED',
        code: 'ECONNREFUSED',
        syscall: 'connect',
        address: '127.0.0.1',
        port: 4444
      }".
      at CustomConsole.log (node_modules/@jest/console/build/CustomConsole.js:186:10)
      at process.<anonymous> (jestFrameworkSetup.js:39:11)
      at processEmit [as emit] (node_modules/signal-exit/index.js:155:32)

 FAIL  packages/editor/collab-provider/src/__tests__/integration/col
lab.ts (6.867s)
  collab.ts
    Chrome
      ✕ Enter simple strings between 2 tabs (23ms)

  ● collab.ts › Chrome › Enter simple strings between 2 tabs

    connect ECONNREFUSED 127.0.0.1:4444



Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        10.767s
Ran all test suites matching /\/Users\/rbellebon\/atlassian-frontend\/packages\/editor\/collab-provider\/src\/__tests__\/integration\/collab.ts/i.
Exiting tests with exit code: 1
Disconnecting from BrowserStack
error Error
error     at ChildProcess.<anonymous> (/Users/rbellebon/.config/yarn/global/node_modules/bolt/dist/modern/utils/processes.js:124:16)
➜  atlassian-frontend git:(master) ✗ 

[abhi291096]

From the exception logs generated, I see that the exception ECONNREFUSED is generated as the file contains code to localhost (127.0.0.1:4444).
I am sharing the snippet of the logs:

Attempted to log "REJECTION Error: connect ECONNREFUSED 127.0.0.1:4444
       at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1054:14) {
     errno: 'ECONNREFUSED',
     code: 'ECONNREFUSED',
     syscall: 'connect',
     address: '127.0.0.1',
     port: 4444

Could you please check the same at your end and ensure that the REQUESTS are to the host:

host: 'hub.browserstack.com'

in the Webdriver IO conf.js files? You can refer the BrowserStack sample conf file in then link:https://github.com/browserstack/webdriverio-browserstack/blob/master/conf/single.conf.js  

[RajaBellebon]

hello @abhi291096 ,

This is the function we use to generate our capabilities

function setBrowserstackClientForRemote() /*: Array<?Object>*/ {
  const RESOLUTION = '1920x1080';
  return [
    {
      browserName: 'chrome',
      options: {
        capabilities: {
          os: 'Windows',
          os_version: '10',
          browserName: 'chrome',
          browser_version: '80.0',
          resolution: RESOLUTION,
          project: 'Atlaskit Webdriver Tests',
          build: BUILD_BRANCH_NAME,
          'browserstack.local': true,
          'browserstack.debug': true,
          'browserstack.idleTimeout': 300,
          'browserstack.localIdentifier': commit,
          user: process.env.BROWSERSTACK_USERNAME,
          key: process.env.BROWSERSTACK_KEY,
        },
      },
      services: ['browserstack'],
      logLevel: 'error',
      user: process.env.BROWSERSTACK_USERNAME,
      key: process.env.BROWSERSTACK_KEY,
      waitforTimeout: 3000,
    },
  ];
}`

As we use 'browserstack.local': true, I thought it was not necessary to specify the host.

We have it working fine with browserstack when using remote and not multiremote and similar capabilities.

[abhi291096]

Hey, I would recommend you to try executing a test by specifying the host parameter as shared previously and share the corresponding results:

host: 'hub.browserstack.com'

You can refer to a sample conf file in the link: https://github.com/browserstack/webdriverio-browserstack/blob/master/conf/single.conf.js
Further, to clarify, this seems like a different issue that you are encountering and is not related to the current Github Issue. Let me know about your findings.

[RajaBellebon]

Hi @abhi291096 , let me try again by adding the host but I am curious on why does it work on remote and not on multiremote.

[RajaBellebon]

hello @abhi291096, I tried again this what I got as a result

  console.log
    {
      multiOptions: {
        'browser: 0': {
          user: 'xxxxxx',
          key: ''xxxxxx'',
          host: 'hub.browserstack.com',
          port: 80,
          capabilities: [Object]
        },
        'browser: 1': {
           user: 'xxxxxx',
          key: ''xxxxxx'',
          host: 'hub.browserstack.com',
          port: 80,
          capabilities: [Object]
        }
      }
    }

      at launchClient (build/webdriver-runner/runner.js:63:13)

  console.info
    2020-05-11T06:51:25.255Z INFO webdriver: [POST] http://localhost:80/wd/hub/session

      at node_modules/@wdio/logger/build/node.js:114:5
          at Array.map (<anonymous>)

  console.info
    2020-05-11T06:51:25.258Z INFO webdriver: DATA {
      capabilities: {
        alwaysMatch: {
          os: 'Windows',
          os_version: '10',
          browserName: 'chrome',
          browser_version: '80.0',
          resolution: '1920x1080',
          project: 'Atlaskit Webdriver Tests',
          build: 'EDM-216',
          'browserstack.local': true,
          'browserstack.debug': true,
          'browserstack.idleTimeout': 300,
          'browserstack.localIdentifier': 'rbellebon',
          user: 'xxxxxx',
          key: ''xxxxxx'',
          host: 'hub.browserstack.com',
          port: 80,
          name: 'collab-test.ts'
        },
        firstMatch: [ {} ]
      },
      desiredCapabilities: {
        os: 'Windows',
        os_version: '10',
        browserName: 'chrome',
        browser_version: '80.0',
        resolution: '1920x1080',
        project: 'Atlaskit Webdriver Tests',
        build: 'EDM-216',
        'browserstack.local': true,
        'browserstack.debug': true,
        'browserstack.idleTimeout': 300,
        'browserstack.localIdentifier': 'rbellebon',
         user: 'xxxxxx',
          key: ''xxxxxx'',
        host: 'hub.browserstack.com',
        port: 80,
        name: 'collab-test.ts'
      }
    }

      at node_modules/@wdio/logger/build/node.js:114:5
          at Array.map (<anonymous>)

  console.info
    2020-05-11T06:51:25.264Z INFO webdriver: [POST] http://localhost:80/wd/hub/session

      at node_modules/@wdio/logger/build/node.js:114:5
          at Array.map (<anonymous>)

  console.info
    2020-05-11T06:51:25.265Z INFO webdriver: DATA {
      capabilities: {
        alwaysMatch: {
          os: 'Windows',
          os_version: '10',
          browserName: 'chrome',
          browser_version: '80.0',
          resolution: '1920x1080',
          project: 'Atlaskit Webdriver Tests',
          build: 'EDM-216',
          'browserstack.local': true,
          'browserstack.debug': true,
          'browserstack.idleTimeout': 300,
          'browserstack.localIdentifier': 'rbellebon',
           user: 'xxxxxx',
          key: ''xxxxxx'',
          host: 'hub.browserstack.com',
          port: 80,
          name: 'collab-test.ts'
        },
        firstMatch: [ {} ]
      },
      desiredCapabilities: {
        os: 'Windows',
        os_version: '10',
        browserName: 'chrome',
        browser_version: '80.0',
        resolution: '1920x1080',
        project: 'Atlaskit Webdriver Tests',
        build: 'EDM-216',
        'browserstack.local': true,
        'browserstack.debug': true,
        'browserstack.idleTimeout': 300,
        'browserstack.localIdentifier': 'rbellebon',
         user: 'xxxxxx',
          key: ''xxxxxx'',
        host: 'hub.browserstack.com',
        port: 80,
        name: 'collab-test.ts'
      }
    }

      at node_modules/@wdio/logger/build/node.js:114:5
          at Array.map (<anonymous>)

  console.log
    I am multi remote

      at launchClient (build/webdriver-runner/runner.js:65:13)


  ●  Cannot log after tests are done. Did you forget to wait for 
something async in your test?
    Attempted to log "REJECTION Error: connect ECONNREFUSED 127.0.0.1:80
        at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1054:14) {
      errno: 'ECONNREFUSED',
      code: 'ECONNREFUSED',
      syscall: 'connect',
      address: '127.0.0.1',
      port: 80
    }".

      37 | // Node promise rejection are now logged for debbugging
      38 | process.on('unhandledRejection', reason => {
    > 39 |   console.log('REJECTION', reason);
         |           ^
      40 | });
      41 | 
      42 | // We need to ensure that each test has at least one assertion.

      at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1054:14) {
        errno: 'ECONNREFUSED',
        code: 'ECONNREFUSED',
        syscall: 'connect',
        address: '127.0.0.1',
        port: 80
      }".
      at CustomConsole.log (node_modules/@jest/console/build/CustomConsole.js:186:10)
      at process.<anonymous> (jestFrameworkSetup.js:39:11)
      at processEmit [as emit] (node_modules/signal-exit/index.js:155:32)

 FAIL  packages/editor/collab-provider/__tests__/integration/coll
ab-test.ts (11.956s)
  collab-test.ts
    Chrome
      ✕ Enter simple strings between 2 tabs (55ms)

  ● collab-test.ts › Chrome › Enter simple strings between 2 tabs

    connect ECONNREFUSED 127.0.0.1:80



Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        13.287s
Ran all test suites matching /packages\/editor\/collab-provider\/__tests__\/integration\/collab-test.ts/i.
Exiting tests with exit code: 1
Disconnecting from BrowserStack
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.