Skip to content
TestCafe selector extensions for Vue.js apps.
JavaScript Vue HTML
Branch: master
Clone or download
Latest commit daa2daa Jun 21, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
test made changes as per review comments Mar 14, 2019
.babelrc move selector validation in client function Sep 18, 2017
.publishrc turn off 'Checking for the vulnerable dependencies' in .publishrc Feb 9, 2017 Make some changes in Mar 15, 2019
webpack.config.js wrote tests to implement VueSelector(ref:component) Mar 13, 2019


This plugin provides selector extensions that make it easier to test Vue components with TestCafe. These extensions allow you to test Vue component state and result markup together.


$ npm install testcafe-vue-selectors


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.

<div id="todo-app">
    <todo-input ref="ref-todo-input-1"/>
    <todo-list ref="ref-todo-list-1">
        <todo-item ref="ref-todo-item-1" priority="High">Item 1</todo-item>
        <todo-item ref="ref-todo-item-2" priority="Low">Item 2</todo-item>
    <div className="items-count">Items count: <span>{{itemCount}}</span></div>
    Vue.component('todo-input', {...});
    Vue.component('todo-list', {...});
    Vue.component('todo-item', {...});
    new Vue({ 
        el:   '#todo-app',
        data: {...}

To get the root Vue node, use the VueSelector constructor without parameters.

import VueSelector from 'testcafe-vue-selectors';

const rootVue = VueSelector();

The rootVue variable will contain the <div id="todo-app"> element.

To get a root DOM element for a component, pass the component name to the VueSelector constructor.

import VueSelector from 'testcafe-vue-selectors';

const todoInput = VueSelector('todo-input');

To obtain a component based on its reference ID, pass the ref attribute value prepended with ref: to the VueSelector constructor.

import VueSelector from 'testcafe-vue-selectors';

const todoInput = VueSelector('ref:ref-todo-item-1');

To obtain a nested component, you can use a combined selector.

import VueSelector from 'testcafe-vue-selectors';

const todoItem       = VueSelector('todo-list todo-item');
const todoList1Items = VueSelector('ref:todo-list-1 todo-item');
const todoItem1      = VueSelector('todo-list ref:ref-todo-item-1');
const todoList1Item1 = VueSelector('ref:ref-todo-list-1 ref:ref-todo-item-1');

You can combine Vue selectors with testcafe Selector filter functions like .find, .withText, .nth and other.

import VueSelector from 'testcafe-vue-selectors';

var itemsCount = 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.

import VueSelector from 'testcafe-vue-selectors';

fixture `TODO list test`

test('Add new task', async t => {
    const todoTextInput = VueSelector('todo-input');
    const todoItem      = VueSelector('todo-list todo-item');

    await t
        .typeText(todoTextInput, 'My Item')

Obtaining component's props, computed, state and ref

In addition to DOM Node State, you can obtain state, computed, props or ref of a Vue component.

To get these data, use the Vue selector’s .getVue() method.

The getVue() method returns a client function. This function resolves to an object that contains component properties.

const vueComponent      = VueSelector('componentTag');
const vueComponentState = await vueComponent.getVue();

// >> vueComponentState
// {
//     props:    <component_props>,
//     state:    <component_state>,
//     computed: <component_computed>,
//     ref:      <component_ref>
// }

The returned client function can be passed to assertions activating the Smart Assertion Query mechanism.


import VueSelector from 'testcafe-vue-selector';

fixture `TODO list test`

test('Check list item', async t => {
    const todoItem    = VueSelector('todo-item');
    const todoItemVue = await todoItem.getVue();

    await t
        .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 }) => {...});


import VueSelector from 'testcafe-vue-selectors';

fixture `TODO list test`

test('Check list item', async t => {
    const todoItem = VueSelector('todo-item');

    await t
        .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 the VueSelector 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 the vue-dev-tools extension for Google Chrome.

Pages with multiple Vue root nodes are not supported.

You can’t perform that action at this time.