E2E тестирование с Cypress

Для начала необходимо установить Cypress в проект Quasar. Используется стандартный менеджер пакетов npm или yarn:

npm install cypress --save-dev
# или
yarn add cypress --dev

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

npx cypress open

В Quasar проекте рекомендуется интегрировать Cypress через @quasar/cli, чтобы обеспечить корректную работу с окружением Vue и Quasar-компонентами. Для этого создают папку cypress в корне проекта, где будут храниться тесты и конфигурационные файлы.

Файл конфигурации cypress.config.js позволяет задать базовый URL, директории для тестов и скриншотов:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:8080',
    specPattern: 'cypress/e2e/**/*.cy.js',
    supportFile: 'cypress/support/e2e.js',
    screenshotsFolder: 'cypress/screenshots',
    videosFolder: 'cypress/videos',
  },
})

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

Тесты в Cypress обычно делятся на несколько типов:

  1. Smoke tests – проверка основных функциональных блоков.
  2. User flow tests – проверка сценариев пользователя от входа в систему до выхода.
  3. Regression tests – контроль того, что новые изменения не нарушают старую функциональность.

Файлы тестов помещаются в папку cypress/e2e/ с расширением .cy.js. Например:

cypress/
├─ e2e/
│  ├─ login.cy.js
│  ├─ dashboard.cy.js
│  └─ navigation.cy.js

Основные команды Cypress

  • cy.visit(url) – переход на указанный URL.
  • cy.get(selector) – получение элемента по CSS-селектору.
  • cy.contains(text) – поиск элемента по тексту.
  • cy.click() – клик по элементу.
  • cy.type(text) – ввод текста в поле.
  • cy.should('have.text', 'value') – проверка текста элемента.

Пример простого теста для формы входа:

describe('Тестирование формы входа', () => {
  it('Успешный вход с валидными данными', () => {
    cy.visit('/login')
    cy.get('input[name=email]').type('user@example.com')
    cy.get('input[name=password]').type('password123')
    cy.get('button[type=submit]').click()
    cy.url().should('include', '/dashboard')
    cy.contains('Добро пожаловать').should('be.visible')
  })
})

Работа с компонентами Quasar

Quasar активно использует динамические и интерактивные компоненты, такие как q-dialog, q-select, q-table. Для E2E тестов важно учитывать их особенности:

  • q-dialog – модальные окна не всегда видимы сразу, поэтому нужно вызывать cy.get('selector').click() перед проверкой содержимого.
  • q-select – раскрывающийся список требует использования cy.get('.q-menu').contains('Option').click() для выбора.
  • q-table – для проверки строк таблицы используется cy.get('.q-table tbody tr').

Пример работы с q-select:

cy.get('q-select[label="Статус"]').click()
cy.get('.q-menu').contains('Активный').click()
cy.get('q-select[label="Статус"]').should('contain.text', 'Активный')

Поддержка асинхронных действий

Quasar компоненты часто используют асинхронные действия, например загрузку данных через Axios. В таких случаях Cypress автоматически ждёт завершения DOM обновлений, но иногда требуется явное ожидание:

cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers')
cy.visit('/users')
cy.wait('@getUsers')
cy.get('table tbody tr').should('have.length', 5)

Использование cy.intercept позволяет подменять API-ответы и создавать стабильные тесты без зависимости от реального сервера.

Настройка CI/CD для E2E тестов

Cypress легко интегрируется в процессы CI/CD, такие как GitHub Actions, GitLab CI или Jenkins. В конфигурации указывают команды для запуска сервера Quasar и выполнения тестов:

jobs:
  e2e-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Установка Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20
      - run: npm install
      - run: npm run quasar dev -m spa &
      - run: npx cypress run

Логирование и скриншоты

Cypress автоматически создаёт скриншоты при падении теста, а также может записывать видео. Для их настройки в cypress.config.js:

video: true,
screenshotOnRunFailure: true

Эти возможности упрощают отладку и позволяют быстро выявлять проблемные места в интерфейсе Quasar-приложения.

Продвинутые техники

  • Custom commands – создание повторно используемых команд в cypress/support/commands.js:
Cypress.Commands.add('login', (email, password) => {
  cy.visit('/login')
  cy.get('input[name=email]').type(email)
  cy.get('input[name=password]').type(password)
  cy.get('button[type=submit]').click()
})

  • Page Object Pattern – структура тестов с разделением логики страниц и шагов для повышения читаемости и поддержки.

  • Тестирование реактивных состояний – использование cy.wrap() и cy.then() для работы с данными из Vue-компонентов и store Quasar (например, Pinia).

Эти подходы обеспечивают стабильность тестов и позволяют масштабировать E2E покрытие для больших Quasar-проектов.

Оглавление