CODEWITHSUNDEEP
javascriptseleniumvue.jsacceptance-testinge2e-testing
S Panfilov
S Panfilov

Reputation: 17541

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

Of cause I can use selenium-standalone with xpath to test an app. But testing SPA could be challenging sometime.

But, for example angularjs's team provides protractor for this purpose.

The reason behind protractor as I can see is that protractor waits till angularjs will be loaded and few more features:

Protractor provides some new locator strategies and functions which are very helpful to automate the AngularJS application. Examples include things like: waitForAngular, By.binding, By.repeater, By.textarea, By.model, WebElement.all, WebElement.evaluate, etc.

So, the question is: Is it any tool or best practice for e2e testing in Vuejs?

UPD: feel free to post links to tutorials, example and everything cool about e2e-testing in vue.js. Thanks.

Upvotes: 41

Views: 25398

Answers (4)

Artem N
Artem N

Reputation: 81

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.

Upvotes: 3

gleb bahmutov
gleb bahmutov

Reputation: 1919

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.

Upvotes: 8

Alex
Alex

Reputation: 1278

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.)

Upvotes: 27

mlosev
mlosev

Reputation: 5227

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

Upvotes: 17

Related Questions