### Introduction

When you are writing [e2e](https://hackernoon.com/tagged/e2e) tests for a web app, you sometimes have no other choice than to write clumsy selectors like

#vueRootContainer > ul > li > div

Such constructions lead to code that is difficult to read and comprehend. In this article, we introduce a brand new approach that allows you to get rid of unreadable selectors and write clear and understandable test code.

const todoItem = VueSelector('todo-list todo-item');

Vue.js allows you to use the component-based or declarative approach for defining web app structure. The component-based approach better fits complex applications because they need a stricter separation of concerns between the components. The [TestCafe](http://github.com/devexpress/testcafe) team created the [testcafe-vue-selectors](https://github.com/devexpress/testcafe-vue-selectors) module — a plugin that allows you to use a component-based approach to testing Vue.js applications. This plugin enables you to select a Vue.js component by its name or a list of names.

You can also access the component properties in test code.

So far, TestCafe is the only framework that provides native testing experience for Vue.js applications. Let’s see how easy it is to test a Vue.js application with TestCafe.

### Setting Up Test Environment

#### Installing TestCafe and testcafe-vue-selectors

Since TestCafe is a pure [Node.js](https://hackernoon.com/tagged/nodejs) application, its installation is simple:

`npm install testcafe`

Install the `testcafe-vue-selectors` module in the same way:

`npm install testcafe-vue-selectors`

#### Tested Application

Set up the test environment to test the [SVG](https://github.com/vuejs/vue/blob/dev/examples/svg/index.html) app from Vue.js examples.

1.  Clone the Vue.js repo.

`git clone [http://github.com/vuejs/vue](http://github.com/vuejs/vue)`

2\. Install the [Vue DevTools](https://github.com/vuejs/vue-devtools) extension for Google Chrome.

The description of Vue DevTools mentions two requirements:

1.  If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default, so the Vue pane does not show up.
2.  To make it work for pages opened via `file://` protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel.

Let’s address both requirements:

1.  Allow Vue DevTools to access files through the `file://` protocol.

![](https://hackernoon.com/hn-images/1*ZpnNNGa_7xwdnUTSuJZbpw.png)

2\. Substitute the production vue.js version with the development version.

To do this, open `vue/examples/svg/index.html` and change

<script src="../../dist/vue.min.js"></script>

to

<script src="../../dist/vue.js"></script>

Now open `vue/examples/svg/index.html` in Google Chrome and activate Vue DevTools. If everything was done right, following picture displays:

![](https://hackernoon.com/hn-images/1*7ZbaJ41hm_5sa4bKHWhABw.png)

### Testing the application

#### Page Object

Let’s explore the application component structure.

![](https://hackernoon.com/hn-images/1*enjxCdLTmdKj5hbgjSz_Ug.png)

The page contains a polygraph component with six AxisLabel children. Next, define the [Page Object](https://devexpress.github.io/testcafe/documentation/recipes/using-page-model.html) based on this structure.

Since the form for adding a new stat is defined with a declarative approach, we use built-in TestCafe selectors.

For details about TestCafe selectors, see [Selectors](https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html).

Stats painted on the graph are defined with a component-based approach, and we use VueSelector for them.

For more information about VueSelector, see [testcafe-vue-selectors](https://github.com/devexpress/testcafe-vue-selectors).

Create folder `testcafe` and save the Page Object definition to the `page-object.js` file. Later on, we will import this file as a regular module.

#### Test Scenario

**Actions, assertions, and the file protocol**

Let’s create the `svg-test.js` file and put it into the `testcafe` directory. TestCafe supports the `file://` protocol, so you do not need to set up a local HTTP server to run the tests. All you need is specify the path to the tested page as a target page URL.

The test scenario adds a new stat labeled `G` and checks that the number of stats changed from 6 to 7.

This code uses methods that emulate user actions: [typeText](https://devexpress.github.io/testcafe/documentation/test-api/actions/type-text.html) and [click](https://devexpress.github.io/testcafe/documentation/test-api/actions/click.html). You can find more details about actions in the [Actions](https://devexpress.github.io/testcafe/documentation/test-api/actions/) documentation topic.

We use built-in assertions to check that the HTML elements’ properties have the expected values. They expose various methods to compare values and provide the [Smart Assertion Query Mechanism](https://devexpress.github.io/testcafe/documentation/test-api/assertions/#smart-assertion-query-mechanism). For details on assertions, see [Assertions](http://devexpress.github.io/testcafe/documentation/test-api/assertions/).

Since `VueSelector` inherits from `Selector`, you can use all the capabilities of TestCafe selectors. For instance, the code above uses the `count` property from the Selector API.

**Component state and properties**

The `testcafe-vue-selectors` plugin also allows you to obtain Vue.js component properties. Extend the test above with code that verifies the added stat's properties:

This code uses the `getVue()` method to obtain the Vue component's properties. This method returns an object that contains the `props`, `state` and `computed` properties. You can find detailed information in the `[testcafe-vue-selectors](https://github.com/devexpress/testcafe-vue-selectors)` repository.

### Running Tests

Create a new `package.json` file and add a test run command to it.:

{  
   "scripts": {  
       "test": "testcafe chrome testcafe/svg-test.js"  
   }  
}

Now you are ready to run your first test. Type in your console:

npm test

After that, TestCafe launches the Google Chrome browser, executes the test scenario, closes the browser, and outputs the result to the console.

![](https://hackernoon.com/hn-images/1*iHk9v7-Fj9-fMZb71MiG8w.png)

TestCafe allows you to run tests in locally installed browsers, on mobile devices, and in cloud testing platforms. For detailed information, see [Browser Support](https://devexpress.github.io/testcafe/documentation/using-testcafe/common-concepts/browser-support.html).

You can also choose the format in which test run reports are presented: spec, list, minimal, xUnit and JSON formats are available out of the box. See [Reporters](https://devexpress.github.io/testcafe/documentation/using-testcafe/common-concepts/reporters.html) for more information.

### Conclusion

In this article, we learned how to test a Vue.js application. As an example, we used the SVG app from the Vue.js repository. We covered setting the test environment, creating tests, running and viewing test results. If you have questions, visit our [forum](https://testcafe-discuss.devexpress.com/). If you want to report an issue or submit a suggestion, go to the [TestCafe](https://github.com/devexpress/testcafe) and [testcafe-vue-selectors](https://github.com/devexpress/testcafe-vue-selectors) repositories.

The Graph

Google

Target

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

A modern way to do E2E testing for Vue.js apps

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

@amoskovkin

RELATED STORIES