Vue.js

Vue.js ist ein zugängliches, leistungsfähiges und vielseitiges Framework zum Erstellen von Web-Benutzeroberflächen. Mit WebdriverIO und seinem Browser Runnerkönnen Sie Vue.js-Komponenten direkt in einem echten Browser testen.

Setup

Um WebdriverIO in Ihrem Vue.js-Projekt einzurichten, befolgen Sie die Anweisungen in unseren Komponententestdokumenten. Stellen Sie sicher, dass Sie vue als Voreinstellung in Ihren Runner-Optionen auswählen, z. B.:

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

info

Wenn Sie bereits Vite als Entwicklungsserver verwenden, können Sie auch einfach Ihre Konfiguration in vite.config.ts in Ihrer WebdriverIO-Konfiguration wiederverwenden. Weitere Informationen finden Sie unter viteConfig in Runner-Optionen.

Für die Vue-Voreinstellung muss @vitejs/plugin-vue installiert sein. Außerdem empfehlen wir die Verwendung von Testing Library zum Rendern der Komponente auf der Testseite. Dazu müssen Sie die folgenden zusätzlichen Abhängigkeiten installieren:

npm

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

Yarn

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

Sie können die Tests dann starten, indem Sie Folgendes ausführen:

npx wdio run ./wdio.conf.js

Tests schreiben

Vorausgesetzt, Sie haben die folgende Vue.js-Komponente:

./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>

Verwenden Sie in Ihrem Test die Methode render aus @testing-library/vue , um die Komponente an die Testseite anzuhängen. Um mit der Komponente zu interagieren, empfehlen wir die Verwendung von WebdriverIO-Befehlen, da sie sich näher an tatsächlichen Benutzerinteraktionen verhalten, z.B.:

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

Ein vollständiges Beispiel einer Testsuite für WebdriverIO-Komponenten für Vue.js finden Sie in unserem Beispiel-Repository.