Skip to main content

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 install --save-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.