Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 353
Sergei Panfilov Avatar asked Apr 18 '16 03:04

Sergei Panfilov


People also ask

What is E2E testing in Vue?

End-to-end tests do not import any of your Vue application's code, but instead rely completely on testing your application by navigating through entire pages in a real browser. End-to-end tests validate many of the layers in your application.

Which testing framework is best for Vue?

1. Component Testing with Vue Test Utils & Jest. Jest is a well-liked JavaScript testing framework that comes packed with many goodies for developers focusing on simplicity. It's one of the fastest testing frameworks for Vue single-file components.

What does E2E mean end to end?

End-to-end testing, also known as E2E testing, is a methodology used for ensuring that applications behave as expected and that the flow of data is maintained for all kinds of user tasks and processes. This type of testing approach starts from the end user's perspective and simulates a real-world scenario.


2 Answers

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

like image 159
Alex Avatar answered Oct 06 '22 00:10

Alex


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

like image 45
mlosev Avatar answered Oct 06 '22 01:10

mlosev