testcafe-nuxt-selectors
This plugin provides selector extensions that make it easier to test Vue components in a Nuxt application with TestCafe. These extensions allow you to test Vue component state and result markup together.
Install
$ npm install testcafe-nuxt-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.
Item 1 Item 2 Items count: {{itemCount}}
To get the root Vue instance, use the VueSelector constructor without parameters.
; const rootVue = ;
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.
; const todoInput = ;
To obtain a nested component, you can use a combined selector.
; const todoItem = ;
You can combine Vue selectors with testcafe Selector
filter functions like .find
, .withText
, .nth
and other.
; var itemsCount = ;
Let’s use the API described above to add a task to a Todo list and check that the number of items changed.
; fixture `TODO list test` ; ;
Obtaining component's props, computed and state
In addition to DOM Node State, you can obtain state
, computed
or props
of a Vue component. You can use them in an assertion directly thus simplifying assertion logic.
To get these data, use the Vue selector’s .getVue()
method.
If you call this method without parameters, it returns an object of the following structure.
props: <component_props> state: <component_state> computed: <component_computed>
Example
; fixture `TODO list test` ; ;
As an alternative, the .getVue()
method can take a function that returns the required property, state or computed property. This function acts as a filter. Its argument is an object returned by .getVue()
, i.e. { props: ..., state: ..., computed: ...}
.
;
Example
; fixture `TODO list test` ; ;
The .getVue()
method can be called for the VueSelector or the snapshot this selector returns.
Limitations
testcafe-vue-selectors
support Vue starting with version 2.
Only props, state and computed parts of a Vue component are avalible.
To check if a component can be found, use the vue-dev-tools extension for a Google Chrome.
Supported pages only with one Vue root.