Тестирование Vue компонентов

Playwright — это мощная библиотека для автоматизации браузера, которая позволяет проводить интеграционные и энд-ту-энд тесты для современных веб-приложений. В контексте тестирования Vue компонентов, Playwright предоставляет все необходимые инструменты для того, чтобы тестировать взаимодействие с DOM, эмулировать действия пользователей и проверять корректность работы компонентов.

Установка и настройка Playwright для тестирования Vue компонентов

Для начала необходимо установить Playwright и все нужные зависимости. В проекте на Vue.js для этого достаточно выполнить несколько команд.

  1. Установка Playwright:
npm install playwright
  1. Установка дополнительных библиотек для тестирования с Vue:
npm install @playwright/test vue-test-utils
  1. После этого можно настроить конфигурацию тестов и начать писать тесты.

Структура тестов

Playwright предоставляет обширный API для взаимодействия с элементами на странице. В контексте тестирования Vue компонентов важно понимать структуру приложения и расположение компонентов. Обычно компоненты Vue рендерятся на странице как HTML элементы с привязками к классам, ID или данным из состояния приложения.

Пример базовой структуры теста с Playwright для компонента Vue:

import { test, expect } from '@playwright/test';

test('проверка отображения компонента', async ({ page }) => {
  // Переход к странице, где рендерится компонент
  await page.goto('http://localhost:8080/');

  // Проверка, что элемент с текстом 'Hello, Vue!' присутствует на странице
  const text = await page.textContent('.hello-vue');
  expect(text).toBe('Hello, Vue!');
});

Взаимодействие с компонентами Vue

Одним из ключевых аспектов тестирования компонентов является взаимодействие с ними: клик, ввод текста, изменение состояний. Для этого Playwright предоставляет API, которое позволяет имитировать действия пользователя.

Тестирование ввода данных

Предположим, у нас есть компонент формы, который принимает данные пользователя:

<template>
  <form @submit.prevent="submitForm">
    <input v-model="name" type="text" placeholder="Введите имя" />
    <button type="submit">Отправить</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    };
  },
  methods: {
    submitForm() {
      alert(`Имя: ${this.name}`);
    }
  }
};
</script>

Для тестирования ввода данных можно использовать следующие шаги:

  1. Найти элемент поля ввода с помощью селектора.
  2. Ввести данные в поле.
  3. Проверить, что данные корректно отобразились в компоненте.

Пример теста:

test('проверка ввода текста', async ({ page }) => {
  await page.goto('http://localhost:8080/');

  // Найти поле ввода и ввести имя
  await page.fill('input[type="text"]', 'Иван');

  // Найти кнопку и кликнуть по ней
  await page.click('button[type="submit"]');

  // Проверить, что alert был вызван с правильным значением
  page.on('dialog', dialog => {
    expect(dialog.message()).toBe('Имя: Иван');
    dialog.accept();
  });
});

Работа с асинхронными операциями

Vue часто использует асинхронные операции, такие как запросы к серверу или задержки перед рендером. Playwright позволяет работать с асинхронными элементами и ожидать завершения операций.

Тестирование загрузки данных

Предположим, у нас есть компонент, который загружает данные с сервера и отображает их в списке:

<template>
  <div v-if="items.length > 0">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
  <p v-else>Загрузка...</p>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  mounted() {
    fetch('/api/items')
      .then(res => res.json())
      .then(data => {
        this.items = data;
      });
  }
};
</script>

Тестирование этого компонента требует проверки, что текст “Загрузка…” отображается до завершения загрузки данных, а затем появляется список.

Пример теста:

test('проверка загрузки данных', async ({ page }) => {
  await page.goto('http://localhost:8080/');

  // Проверка, что изначально показывается "Загрузка..."
  const loadingText = await page.textContent('p');
  expect(loadingText).toBe('Загрузка...');

  // Подключение к мокированному API
  await page.route('**/api/items', (route) => {
    route.fulfill({
      status: 200,
      body: JSON.stringify([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]),
    });
  });

  // Дождаться появления списка
  await page.waitForSelector('ul');
  const listItems = await page.locator('ul').textContent();
  expect(listItems).toContain('Item 1');
  expect(listItems).toContain('Item 2');
});

Использование Playwright с Vue Test Utils

Vue Test Utils — это официальная утилита для тестирования Vue компонентов, которая позволяет тестировать компоненты изнутри. Когда Playwright используется вместе с Vue Test Utils, это позволяет более точно проверять внутренние изменения состояния и поведение компонентов.

import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';

test('проверка рендеринга компонента', async () => {
  const wrapper = mount(MyComponent);
  
  // Проверка содержимого элемента
  expect(wrapper.text()).toContain('Hello, World!');
  
  // Моделирование ввода данных в компонент
  await wrapper.setData({ name: 'Иван' });
  expect(wrapper.vm.name).toBe('Иван');
});

Обработка ошибок и логирование

Одной из важных задач тестирования является проверка корректности обработки ошибок в приложении. Playwright предоставляет инструменты для мониторинга ошибок и логирования событий в процессе тестирования.

test('проверка обработки ошибок', async ({ page }) => {
  await page.goto('http://localhost:8080/');

  // Проверка, что компонент корректно отображает ошибку при неправильном запросе
  page.on('console', (msg) => {
    if (msg.type() === 'error') {
      expect(msg.text()).toContain('Ошибка при загрузке');
    }
  });

  // Имитируем ошибку на сервере
  await page.route('**/api/items', (route) => {
    route.abort();
  });

  // Ожидаем появления ошибки
  await page.waitForSelector('.error-message');
  const errorMessage = await page.textContent('.error-message');
  expect(errorMessage).toBe('Ошибка при загрузке данных');
});

Тестирование визуальных изменений

Playwright также позволяет проверять визуальные изменения компонентов, сравнивая снимки экрана. Это полезно для регрессионного тестирования интерфейса.

test('проверка визуальных изменений', async ({ page }) => {
  await page.goto('http://localhost:8080/');

  // Сделать скриншот компонента
  const screenshot = await page.screenshot();
  expect(screenshot).toMatchSnapshot('component-snapshot.png');
});

Заключение

Использование Playwright для тестирования Vue компонентов предоставляет мощный инструментарий для автоматизированных тестов. Возможности Playwright позволяют тестировать не только функциональность, но и взаимодействие с компонентами, асинхронные процессы, обработку ошибок и визуальные изменения интерфейса. Integrating Playwright с Vue Test Utils даёт возможность глубже проверять компоненты на уровне внутренней логики и их рендеринга.

Оглавление