What is a proper way of end-to-end (e2e) testing in Vue.js

The tool you are thinking about is Nightwatch. With this, you can do E2E testing with Vue.js.

Even better, this is bundled by default when you are using vue-cli, ready to run.

The command line to create a project with Nightwatch activated by default is vue init webpack myProjectName.

Here are small tutorials about it.

EDIT: Lately I used Webdriver.io a lot, and I must say I prefer it to Nightwatch (better documentation, reactive community with a live gitter, issues that are treated in a timely fashion, etc.)


I recommend to use https://devexpress.github.io/testcafe.

Pros:

  • easy install
  • complete test harness
  • javascript ES2016 with (async/await)
  • flexible selector system
  • smart assertions with retry policy
  • reports

See the simple tutorial here


Seems to be an old question, but at the end of 2019 the best way is webdriverio:

Pros:

  1. Large ecosystem of plugins and integrations.

  2. Mocha, cucumber, jasmine runners.

  3. Sync mode of test runner.

  4. Allure reporter and others out of the box.

  5. Chromedriver service from the box.

  6. Easy integrate with selenoid and get cluster of browsers in docker for parallel test execution.

  7. Integration with devtools protocol and puppeteer, can use huge amount of functions.

  8. Integration with cloud service providers.

  9. Appium integration out of the box.

Cons:

  1. Have to manually write waits.

  2. Some functions require to use promises.


I recommend Cypress.

  • single NPM dependency
  • video recording right out of the box
  • GUI that shows every step of the test.

Our docs are great: https://on.cypress.io/intro

For Vue specifically see this tutorial: https://vuejsdevelopers.com/2018/01/29/vue-js-e2e-test-hacker-news/ and if you want to do unit testing of Vue components https://github.com/bahmutov/cypress-vue-unit-test

Happy testing.