- Notifications
You must be signed in to change notification settings - Fork18
TestCafe selector extensions for Vue.js apps.
License
DevExpress/testcafe-vue-selectors
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
The TestCafe team no longer maintains thetestcafe-vue-selectors repository. If you want to take over the project, we'll be happy to hand it over. To contact the team, create a new GitHub issue.
This plugin provides selector extensions that make it easier to test Vue components withTestCafe.These extensions allow you to test Vue component state and result markup together.
$ npm install testcafe-vue-selectors
VueSelector allows you to select page elements by the component tagName or the nested component tagNames.
Suppose you have the following markup.
<divid="todo-app"><todo-inputref="ref-todo-input-1"/><todo-listref="ref-todo-list-1"><todo-itemref="ref-todo-item-1"priority="High">Item 1</todo-item><todo-itemref="ref-todo-item-2"priority="Low">Item 2</todo-item></todo-list><divclassName="items-count">Items count:<span>{{itemCount}}</span></div></div><script>Vue.component('todo-input',{...});Vue.component('todo-list',{...});Vue.component('todo-item',{...});newVue({el:'#todo-app',data:{...}});</script>
To get the root Vue node, use theVueSelector constructor without parameters.
importVueSelectorfrom'testcafe-vue-selectors';constrootVue=VueSelector();
TherootVue variable will contain the<div> element.
To get a root DOM element for a component, pass the component name to theVueSelector constructor.
importVueSelectorfrom'testcafe-vue-selectors';consttodoInput=VueSelector('todo-input');
To obtain a component based on itsreference ID, pass theref attribute value prepended withref: to theVueSelector constructor.
importVueSelectorfrom'testcafe-vue-selectors';consttodoInput=VueSelector('ref:ref-todo-item-1');
To obtain a nested component, you can use a combined selector.
importVueSelectorfrom'testcafe-vue-selectors';consttodoItem=VueSelector('todo-list todo-item');consttodoList1Items=VueSelector('ref:todo-list-1 todo-item');consttodoItem1=VueSelector('todo-list ref:ref-todo-item-1');consttodoList1Item1=VueSelector('ref:ref-todo-list-1 ref:ref-todo-item-1');
You can combine Vue selectors with testcafeSelector filter functions like.find,.withText,.nth andother.
importVueSelectorfrom'testcafe-vue-selectors';varitemsCount=VueSelector().find('.items-count span');
Let’s use the API described above to add a task to a Todo list and check that the number of items changed.
importVueSelectorfrom'testcafe-vue-selectors';fixture`TODO list test`.page('http://localhost:1337');test('Add new task',asynct=>{consttodoTextInput=VueSelector('todo-input');consttodoItem=VueSelector('todo-list todo-item');awaitt.typeText(todoTextInput,'My Item').pressKey('enter').expect(todoItem.count).eql(3);});
In addition toDOM Node State, you can obtainstate,computed,props orref of a Vue component.
To get these data, use the Vue selector’s.getVue() method.
ThegetVue() method returns aclient function. This function resolves to an object that contains component properties.
constvueComponent=VueSelector('componentTag');constvueComponentState=awaitvueComponent.getVue();// >> vueComponentState//// {// props: <component_props>,// state: <component_state>,// computed: <component_computed>,// ref: <component_ref>// }
The returned client function can be passed to assertions activating theSmart Assertion Query mechanism.
Example
importVueSelectorfrom'testcafe-vue-selector';fixture`TODO list test`.page('http://localhost:1337');test('Check list item',asynct=>{consttodoItem=VueSelector('todo-item');consttodoItemVue=awaittodoItem.getVue();awaitt.expect(todoItemVue.props.priority).eql('High').expect(todoItemVue.state.isActive).eql(false).expect(todoItemVue.computed.text).eql('Item 1');});
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: ...}.
VueSelector('component').getVue(({ props, state, computed, ref})=>{...});
Example
importVueSelectorfrom'testcafe-vue-selectors';fixture`TODO list test`.page('http://localhost:1337');test('Check list item',asynct=>{consttodoItem=VueSelector('todo-item');awaitt.expect(todoItem.getVue(({ props})=>props.priority)).eql('High').expect(todoItem.getVue(({ state})=>state.isActive)).eql(false).expect(todoItem.getVue(({ computed})=>computed.text)).eql('Item 1').expect(todoItem.getVue(({ ref})=>ref)).eql('ref-item-1');});
The.getVue() method can be called for theVueSelector or the snapshot this selector returns.
testcafe-vue-selectors support Vue starting with version 2.
Only the property, state, computed property and reference ID parts of a Vue component are available.
To check if a component can be found, use thevue-dev-tools extension for Google Chrome.
Pages with multiple Vue root nodes are not supported.
About
TestCafe selector extensions for Vue.js apps.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors14
Uh oh!
There was an error while loading.Please reload this page.