Following the article I wrote last year about our configuration for our end to end tests using Nightwatch and Browserstack with the Vue cli 2, I wanted to share the new setup now we are using Vue cli 3.
Here is the summary of the setup we wanted to achieve. We wanted to be able to run end to end tests on:
- localhost using local selenium and Chromedriver.
- test/prod URLs using local selenium and Chromedriver
- test/prod URLs uring Browserstack
More details are in the previous article, so check it out if you need to. In here, I will mostly share out final configuration.
A quick reminder though:
- You need to use Browserstack local so it can access any links in your network if they are not accessible publicly
- Browserstack by default doesn’t update sessions statuses in case of failure and use file names for naming test. You have to use their API to update test status and name and need access to the selenium session id to do so.
If you are not familiar with end to end testing with Vue cli 3, it’s better to have a look before reading. Basically, it allows you to run end to end tests with the framework of your choice (Nightwatch or Cypress) without any configuration on your side. The runner part is all abstracted and you can just provide your own configuration, which will be merged with the default one they provide.
Nightwatch config
This is pretty much the same as before, minus the things that are being handled by the Cli 3 (which has a default config being merged with ours).
We now get the test config and prod config (used in our case for different URLs, ids per environments) from the dotenv files (used also by Vue Cli).
Runner config
The only thing that changed here, is in case we’re not using Browserstack, we are executing the Vue cli 3 scripts rather than our own.
In our package.json, to execute this, we have:
{
...
"scripts": {
"test:e2e": "node tests/e2e/runner.js
}
...
}
And we will be using the following commands for the different scenarios stated at the start:
- localhost using local selenium and Chromedriver: npm run test:e2e
- test/prod URLs using local selenium and Chromedriver: npm run test:e2e -- --env test or npm run test:e2e -- --env prod
- test/prod URLs uring Browserstack: RUNNER=’browserstack’ npm run test:e2e -- --env test or RUNNER=’browserstack’ npm run test:e2e -- --env prod
Conclusion
I hope this helps anyone trying to set up Browserstack and Nightwatch with the Vue cli 3. We found there were quite a few things missing for the setup we wanted in the Browserstask documentation and after doing research and trying things out, this is what we got.
If you have a different setup or a better solution, please share below!
Latest comments (0)