` element.
51 |
52 |
53 | To get a root DOM element for a component, pass the component name to the `VueSelector` constructor.
54 |
55 | ```js
56 | import VueSelector from 'testcafe-vue-selectors';
57 |
58 | const todoInput = VueSelector('todo-input');
59 | ```
60 |
61 | To obtain a component based on its [reference ID](https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements), pass the [ref](https://vuejs.org/v2/api/#ref) attribute value prepended with `ref:` to the `VueSelector` constructor.
62 |
63 | ```js
64 | import VueSelector from 'testcafe-vue-selectors';
65 |
66 | const todoInput = VueSelector('ref:ref-todo-item-1');
67 | ```
68 |
69 | To obtain a nested component, you can use a combined selector.
70 |
71 | ```js
72 | import VueSelector from 'testcafe-vue-selectors';
73 |
74 | const todoItem = VueSelector('todo-list todo-item');
75 | const todoList1Items = VueSelector('ref:todo-list-1 todo-item');
76 | const todoItem1 = VueSelector('todo-list ref:ref-todo-item-1');
77 | const todoList1Item1 = VueSelector('ref:ref-todo-list-1 ref:ref-todo-item-1');
78 | ```
79 |
80 | You can combine Vue selectors with testcafe `Selector` filter functions like `.find`, `.withText`, `.nth` and [other](http://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#functional-style-selectors).
81 |
82 | ```js
83 | import VueSelector from 'testcafe-vue-selectors';
84 |
85 | var itemsCount = VueSelector().find('.items-count span');
86 | ```
87 |
88 | Let’s use the API described above to add a task to a Todo list and check that the number of items changed.
89 |
90 | ```js
91 | import VueSelector from 'testcafe-vue-selectors';
92 |
93 | fixture `TODO list test`
94 | .page('http://localhost:1337');
95 |
96 | test('Add new task', async t => {
97 | const todoTextInput = VueSelector('todo-input');
98 | const todoItem = VueSelector('todo-list todo-item');
99 |
100 | await t
101 | .typeText(todoTextInput, 'My Item')
102 | .pressKey('enter')
103 | .expect(todoItem.count).eql(3);
104 | });
105 | ```
106 |
107 | ##### Obtaining component's props, computed, state and ref
108 |
109 | In addition to [DOM Node State](http://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/dom-node-state.html), you can obtain `state`, `computed`, `props` or `ref` of a Vue component.
110 |
111 | To get these data, use the Vue selector’s `.getVue()` method.
112 |
113 | The `getVue()` method returns a [client function](https://devexpress.github.io/testcafe/documentation/test-api/obtaining-data-from-the-client.html). This function resolves to an object that contains component properties.
114 |
115 | ```js
116 | const vueComponent = VueSelector('componentTag');
117 | const vueComponentState = await vueComponent.getVue();
118 |
119 | // >> vueComponentState
120 | //
121 | // {
122 | // props:
,
123 | // state: ,
124 | // computed: ,
125 | // ref:
126 | // }
127 | ```
128 |
129 | The returned client function can be passed to assertions activating the [Smart Assertion Query mechanism](https://devexpress.github.io/testcafe/documentation/test-api/assertions/#smart-assertion-query-mechanism).
130 |
131 | Example
132 | ```js
133 | import VueSelector from 'testcafe-vue-selector';
134 |
135 | fixture `TODO list test`
136 | .page('http://localhost:1337');
137 |
138 | test('Check list item', async t => {
139 | const todoItem = VueSelector('todo-item');
140 | const todoItemVue = await todoItem.getVue();
141 |
142 | await t
143 | .expect(todoItemVue.props.priority).eql('High')
144 | .expect(todoItemVue.state.isActive).eql(false)
145 | .expect(todoItemVue.computed.text).eql('Item 1');
146 | });
147 | ```
148 |
149 | As an alternative, the `.getVue()` method can take a function that returns the required property, state, computed property or reference ID. This function acts as a filter. Its argument is an object returned by `.getVue()`, i.e. `{ props: ..., state: ..., computed: ..., ref: ...}`.
150 |
151 | ```js
152 | VueSelector('component').getVue(({ props, state, computed, ref }) => {...});
153 | ```
154 |
155 |
156 | Example
157 | ```js
158 | import VueSelector from 'testcafe-vue-selectors';
159 |
160 | fixture `TODO list test`
161 | .page('http://localhost:1337');
162 |
163 | test('Check list item', async t => {
164 | const todoItem = VueSelector('todo-item');
165 |
166 | await t
167 | .expect(todoItem.getVue(({ props }) => props.priority)).eql('High')
168 | .expect(todoItem.getVue(({ state }) => state.isActive)).eql(false)
169 | .expect(todoItem.getVue(({ computed }) => computed.text)).eql('Item 1')
170 | .expect(todoItem.getVue(({ ref }) => ref)).eql('ref-item-1');
171 | });
172 |
173 | ```
174 |
175 | The `.getVue()` method can be called for the `VueSelector` or the snapshot this selector returns.
176 |
177 | ##### Limitations
178 |
179 | `testcafe-vue-selectors` support Vue starting with version 2.
180 |
181 | Only the property, state, computed property and reference ID parts of a Vue component are available.
182 |
183 | To check if a component can be found, use the [vue-dev-tools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) extension for Google Chrome.
184 |
185 | Pages with multiple Vue root nodes are not supported.
186 |
--------------------------------------------------------------------------------
/appveyor.yml:
--------------------------------------------------------------------------------
1 | environment:
2 | NODEJS_VERSION: "stable"
3 |
4 | install:
5 | - ps: >-
6 | Install-Product node $env:NODEJS_VERSION
7 |
8 | choco install GoogleChrome
9 |
10 | choco install Firefox
11 |
12 | - cmd: >-
13 | npm install
14 |
15 | build: off
16 |
17 | test_script:
18 | - cmd: >-
19 | npm test
--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | const { Selector } = require('testcafe');
2 |
3 | module.exports = Selector(complexSelector => {
4 | window['%findVueRoot%'] = (node = document) => {
5 | const treeWalker = document.createTreeWalker(
6 | node,
7 | NodeFilter.SHOW_ELEMENT,
8 | () => NodeFilter.FILTER_ACCEPT,
9 | false
10 | );
11 |
12 | let instance = node.__vue__;
13 |
14 | while (!instance && treeWalker.nextNode())
15 | instance = treeWalker.currentNode.__vue__;
16 |
17 | return instance;
18 | };
19 |
20 | window['%vueSelector%'] = (complexSelector_, vueRoots = null) => {
21 | function validateSelector (selector) {
22 | if (selector !== void 0 && typeof selector !== 'string')
23 | throw new Error('If the selector parameter is passed it should be a string, but it was ' + typeof selector);
24 | }
25 |
26 | function validateVueVersion (rootInstance) {
27 | const MAJOR_SUPPORTED_VUE_VERSION = 2;
28 | const vueVersion = parseInt(findVueConstructor(rootInstance).version.split('.')[0], 10);
29 |
30 | if (vueVersion < MAJOR_SUPPORTED_VUE_VERSION)
31 | throw new Error('testcafe-vue-selectors supports Vue version 2.x and newer');
32 | }
33 |
34 | function findVueConstructor (rootInstance) {
35 | let Vue = Object.getPrototypeOf(rootInstance).constructor;
36 |
37 | while (Vue.super)
38 | Vue = Vue.super;
39 |
40 | return Vue;
41 | }
42 |
43 | function getComponentTagNames (componentSelector) {
44 | return componentSelector
45 | .split(' ')
46 | .filter(el => !!el)
47 | .map(el => el.trim());
48 | }
49 |
50 | function getComponentTag (instance) {
51 | return instance.$options.name ||
52 | instance.$options._componentTag ||
53 | instance.$options.__file ||
54 | '';
55 | }
56 |
57 | function isRef (selector) {
58 | return selector.indexOf('ref:') !== -1;
59 | }
60 |
61 | function getRef (selector) {
62 | if (selector.indexOf('ref:') === 0 && selector.split('ref:')[1])
63 | return selector.split('ref:')[1];
64 |
65 | throw new Error('If the ref is passed as selector it should be in the format \'ref:ref-selector\'');
66 | }
67 |
68 | function getRefOfNode (node) {
69 | if (node.$vnode && node.$vnode.data)
70 | return node.$vnode.data.ref;
71 | return null;
72 | }
73 |
74 | function filterNodes (roots, tags) {
75 | const foundComponents = [];
76 |
77 | function walkVueComponentNodes (node, tagIndex, checkFn) {
78 | if (checkFn(node, tagIndex)) {
79 | if (tagIndex === tags.length - 1) {
80 | if (foundComponents.indexOf(node.$el) === -1)
81 | foundComponents.push(node.$el);
82 | return;
83 | }
84 |
85 | tagIndex++;
86 | }
87 |
88 | for (let i = 0; i < node.$children.length; i++) {
89 | const childNode = node.$children[i];
90 |
91 | walkVueComponentNodes(childNode, tagIndex, checkFn);
92 | }
93 | }
94 |
95 | roots.forEach(root => {
96 | walkVueComponentNodes(root, 0, (node, tagIndex) => {
97 | if (isRef(tags[tagIndex])) {
98 | const ref = getRef(tags[tagIndex]);
99 |
100 | return ref === getRefOfNode(node);
101 | }
102 | return tags[tagIndex] === getComponentTag(node);
103 | });
104 | });
105 |
106 | return foundComponents;
107 | }
108 |
109 |
110 | validateSelector(complexSelector_);
111 |
112 | const rootInstances = vueRoots ? vueRoots : [];
113 |
114 | if (!vueRoots) {
115 | const documentRoot = window['%findVueRoot%']();
116 |
117 | if (documentRoot)
118 | rootInstances.push(documentRoot);
119 |
120 | if (!documentRoot)
121 | return null;
122 | }
123 |
124 | rootInstances.map(validateVueVersion);
125 |
126 | if (!complexSelector_)
127 | return rootInstances.map(node => node.$el);
128 |
129 | const componentTags = getComponentTagNames(complexSelector_);
130 |
131 | return filterNodes(rootInstances, componentTags);
132 | };
133 |
134 | return window['%vueSelector%'](complexSelector);
135 | }).addCustomMethods({
136 | getVue: (node, fn) => {
137 | function getData (instance, prop) {
138 | const result = {};
139 |
140 | Object.keys(prop).forEach(key => {
141 | result[key] = instance[key];
142 | });
143 |
144 |
145 | return result;
146 | }
147 |
148 | function getProps (instance) {
149 | return getData(instance, instance.$options.props || {});
150 | }
151 |
152 | function getState (instance) {
153 | const props = instance._props || instance.$options.props;
154 | const getters = instance.$options.vuex && instance.$options.vuex.getters;
155 | const result = {};
156 |
157 | Object.keys(instance._data)
158 | .filter(key => !(props && key in props) && !(getters && key in getters))
159 | .forEach(key => {
160 | result[key] = instance._data[key];
161 | });
162 |
163 | return result;
164 | }
165 |
166 | function getComputed (instance) {
167 | return getData(instance, instance.$options.computed || {});
168 | }
169 |
170 | function getComponentReference (instance) {
171 | return instance.$vnode && instance.$vnode.data && instance.$vnode.data.ref;
172 | }
173 |
174 | const nodeVue = node.__vue__;
175 |
176 | if (!nodeVue)
177 | return null;
178 |
179 | const props = getProps(nodeVue);
180 | const state = getState(nodeVue);
181 | const computed = getComputed(nodeVue);
182 | const ref = getComponentReference(nodeVue);
183 |
184 | if (typeof fn === 'function')
185 | return fn({ props, state, computed, ref });
186 |
187 | return { props, state, computed, ref };
188 | }
189 | }).addCustomMethods({
190 | findVue: (nodes, selector) => {
191 | return window['%vueSelector%'](selector, nodes.map(window['%findVueRoot%']));
192 | },
193 | }, { returnDOMNodes: true });
194 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "testcafe-vue-selectors",
3 | "version": "3.1.1",
4 | "description": "VueJS selectors for TestCafe",
5 | "repository": "https://github.com/DevExpress/testcafe-vue-selectors",
6 | "author": {
7 | "name": "Developer Express Inc.",
8 | "url": "https://devexpress.com"
9 | },
10 | "main": "lib/index",
11 | "files": [
12 | "lib"
13 | ],
14 | "license": "MIT",
15 | "scripts": {
16 | "lint": "eslint lib/index.js",
17 | "test-server": "webpack-dev-server",
18 | "testcafe": "testcafe all test/*.js --app \"npm run test-server\" --app-init-delay 10000",
19 | "test": "npm run lint && npm run testcafe",
20 | "publish-please": "publish-please",
21 | "prepublish": "publish-please guard"
22 | },
23 | "devDependencies": {
24 | "babel-loader": "^8.2.2",
25 | "css-loader": "^5.1.1",
26 | "eslint": "^7.21.0",
27 | "eslint-plugin-testcafe": "^0.2.1",
28 | "prettier": "1.12.1",
29 | "publish-please": "^5.4.3",
30 | "pug": "^3.0.2",
31 | "testcafe": "*",
32 | "vue": "^2.5.4",
33 | "vue-loader": "^14.2.2",
34 | "vue-router": "^3.0.1",
35 | "vue-template-compiler": "^2.5.4",
36 | "webpack": "^4.0.0",
37 | "webpack-cli": "^3.2.1",
38 | "webpack-dev-server": "^3.1.11"
39 | },
40 | "keywords": [
41 | "testcafe",
42 | "vue",
43 | "vuejs",
44 | "selectors",
45 | "plugin"
46 | ],
47 | "peerDependencies": {
48 | "testcafe": "*"
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/test/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "no-unused-expressions": 0,
4 | "no-return-assign": 0
5 | },
6 | "plugins": [
7 | "testcafe"
8 | ],
9 | "extends": "plugin:testcafe/recommended"
10 | }
--------------------------------------------------------------------------------
/test/data/vue-js/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/test/data/vue-loader/components/app.vue:
--------------------------------------------------------------------------------
1 |
2 | #app
3 | h1 Header
4 | list#list1
5 | list#list2
6 |
7 |
15 |
17 |
--------------------------------------------------------------------------------
/test/data/vue-loader/components/list-item.vue:
--------------------------------------------------------------------------------
1 |
2 | li(:id='id')
3 | p {{ id }}
4 |
5 |
11 |
16 |
--------------------------------------------------------------------------------
/test/data/vue-loader/components/list.vue:
--------------------------------------------------------------------------------
1 |
2 | .list-wrapper
3 | h4 {{ id }}
4 | ul(:id='id')
5 | each index in [1, 2, 3]
6 | list-item(:id=`getId(${index})`)
7 |
8 |
27 |
38 |
--------------------------------------------------------------------------------
/test/data/vue-loader/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | vue-loader
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/test/data/vue-loader/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './components/app.vue';
3 |
4 | new Vue({
5 | el: '#app',
6 | render: h => h(App),
7 | data () {
8 | return {
9 | rootProp1: 1
10 | };
11 | }
12 | });
13 |
--------------------------------------------------------------------------------
/test/data/vue-router/components/bar.vue:
--------------------------------------------------------------------------------
1 |
2 | #bar
3 | h1 Header Bar
4 | list#list-bar-1
5 | list#list-bar-2
6 | list#list-bar-3
7 |
8 |
16 |
18 |
--------------------------------------------------------------------------------
/test/data/vue-router/components/foo.vue:
--------------------------------------------------------------------------------
1 |
2 | #foo
3 | h1 Header Foo
4 | list#list-foo-1
5 |
6 |
14 |
16 |
--------------------------------------------------------------------------------
/test/data/vue-router/components/list-item.vue:
--------------------------------------------------------------------------------
1 |
2 | li(:id='id')
3 | p {{ id }}
4 |
5 |
11 |
16 |
--------------------------------------------------------------------------------
/test/data/vue-router/components/list.vue:
--------------------------------------------------------------------------------
1 |
2 | .list-wrapper
3 | h4 {{ id }}
4 | ul(:id='id')
5 | each index in [1, 2, 3]
6 | list-item(:id=`getId(${index})`)
7 |
8 |
27 |
38 |
--------------------------------------------------------------------------------
/test/data/vue-router/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | vue-router
6 |
7 |
8 |
9 |
vue-router
10 |
11 |
12 |
13 |
14 | Go to Foo
15 | Go to Bar
16 |
17 |
18 |
19 |
20 |