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
testcafe-vue-selectors module in the same way:
npm install testcafe-vue-selectors
Set up the test environment to test the SVG app from Vue.js examples.
- 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:
- 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.
- 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:
- Allow Vue DevTools to access files through the
2. Substitute the production vue.js version with the development version.
To do this, open
vue/examples/svg/index.html and change
vue/examples/svg/index.html in Google Chrome and activate Vue DevTools. If everything was done right, following picture displays:
Testing the application
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.
testcafe and save the Page Object definition to the
page-object.js file. Later on, we will import this file as a regular module.
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.
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.
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
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
computed properties. You can find detailed information in the
Create a new
package.json file and add a test run command to it.:
"test": "testcafe chrome testcafe/svg-test.js"
Now you are ready to run your first test. Type in your console:
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.
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!