Vue.js

Vue.js is an approachable, performant and versatile framework for building web user interfaces. You can test Vue.js components directly in a real browser using WebdriverIO and its browser runner.

Setup

To setup WebdriverIO within your Vue.js project, follow the instructions in our component testing docs. Make sure to select vue as preset within your runner options, e.g.:

// wdio.conf.js
export const config = {
    // ...
    runner: ['browser', {
        preset: 'vue'
    }],
    // ...
}

info

If you are already using Vite as development server you can also just re-use your configuration in vite.config.ts within your WebdriverIO config. For more information, see viteConfig in runner options.

The Vue preset requires @vitejs/plugin-vue to be installed. Also we recommend using Testing Library for rendering the component into the test page. Therefor you'll need to install the following additional dependencies:

npm

npm install --save-dev @testing-library/vue @vitejs/plugin-vue

Yarn

yarn add --dev @testing-library/vue @vitejs/plugin-vue

You can then start the tests by running:

npx wdio run ./wdio.conf.js

Writing Tests

Given you have the following Vue.js component:

./components/Component.vue

<template>
    <div>
        <p>Times clicked: {{ count }}</p>
        <button @click="increment">increment</button>
    </div>
</template>

<script>
export default {
    data: () => ({
        count: 0,
    }),

    methods: {
        increment() {
            this.count++
        },
    },
}
</script>

In your test use the render method from @testing-library/vue to attach the component to the test page. To interact with the component we recommend to use WebdriverIO commands as they behave more close to actual user interactions, e.g.:

vue.test.js

import { $, expect } from '@wdio/globals'
import { render } from '@testing-library/vue'
import Component from './components/Component.vue'

describe('Vue Component Testing', () => {
    it('increments value on click', async () => {
        // The render method returns a collection of utilities to query your component.
        const { getByText } = render(Component)

        // getByText returns the first matching node for the provided text, and
        // throws an error if no elements match or if more than one match is found.
        getByText('Times clicked: 0')

        const button = await $(getByText('increment'))

        // Dispatch a native click event to our button element.
        await button.click()
        await button.click()

        getByText('Times clicked: 2') // assert with Testing Library
        await expect($('p=Times clicked: 2')).toExist() // assert with WebdriverIO
    })
})

You can find a full example of a WebdriverIO component test suite for Vue.js in our example repository.