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

Introduction

When you are writing 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 team created the 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 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 app from Vue.js examples.

1. Clone the Vue.js repo.

git clone http://github.com/vuejs/vue

2. Install the 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.

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:

Testing the application

Page Object

Let’s explore the application component structure.

The page contains a polygraph component with six AxisLabel children. Next, define the Page Object 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.

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.

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 and click. You can find more details about actions in the 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. For details on assertions, see 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 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.

TestCafe allows you to run tests in locally installed browsers, on mobile devices, and in cloud testing platforms. For detailed information, see Browser Support.

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 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. If you want to report an issue or submit a suggestion, go to the TestCafe and testcafe-vue-selectors repositories.

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!