Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 137 Commits
.github		.github
lib		lib
test		test
.babelrc		.babelrc
.editoreconfig		.editoreconfig
.eslintrc		.eslintrc
.gitattributes		.gitattributes
.gitignore		.gitignore
.publishrc		.publishrc
LICENSE		LICENSE
README.md		README.md
appveyor.yml		appveyor.yml
package.json		package.json
webpack.config.js		webpack.config.js

Repository files navigation

DEPREDCATED

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.

testcafe-vue-selectors

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.

Install

$ npm install testcafe-vue-selectors

Usage

Create selectors for Vue components

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);});

Obtaining component's props, computed, state and ref

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');});