Introduction When you are writing tests for a web app, you sometimes have no other choice than to write clumsy selectors like e2e #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 team created the 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. TestCafe testcafe-vue-selectors 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 application, its installation is simple: Node.js npm install testcafe Install the module in the same way: testcafe-vue-selectors npm install testcafe-vue-selectors Tested Application Set up the test environment to test the app from Vue.js examples. SVG Clone the Vue.js repo. git clone [http://github.com/vuejs/vue](http://github.com/vuejs/vue) 2. Install the extension for Google Chrome. Vue DevTools 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 protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel. file:// Let’s address both requirements: Allow Vue DevTools to access files through the protocol. file:// 2. Substitute the production vue.js version with the development version. To do this, open and change vue/examples/svg/index.html <script src="../../dist/vue.min.js"></script> to <script src="../../dist/vue.js"></script> Now open in Google Chrome and activate Vue DevTools. If everything was done right, following picture displays: vue/examples/svg/index.html 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 based on this structure. Page Object 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 and save the Page Object definition to the file. Later on, we will import this file as a regular module. testcafe page-object.js Test Scenario Actions, assertions, and the file protocol Let’s create the file and put it into the directory. TestCafe supports the 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. svg-test.js testcafe file:// The test scenario adds a new stat labeled and checks that the number of stats changed from 6 to 7. G This code uses methods that emulate user actions: and . You can find more details about actions in the documentation topic. typeText click Actions 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 . For details on assertions, see . Smart Assertion Query Mechanism Assertions Since inherits from , you can use all the capabilities of TestCafe selectors. For instance, the code above uses the property from the Selector API. VueSelector Selector count Component state and properties The plugin also allows you to obtain Vue.js component properties. Extend the test above with code that verifies the added stat's properties: testcafe-vue-selectors This code uses the method to obtain the Vue component's properties. This method returns an object that contains the , and properties. You can find detailed information in the repository. getVue() props state computed [testcafe-vue-selectors](https://github.com/devexpress/testcafe-vue-selectors) Running Tests Create a new file and add a test run command to it.: package.json {"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 for more information. Reporters 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 . If you want to report an issue or submit a suggestion, go to the and repositories. forum TestCafe testcafe-vue-selectors
