Какие использовал фреймворки JS?

Фреймворки JavaScript в контексте автоматизации тестирования

Как QA Automation Engineer с опытом более 10 лет, я использовал несколько ключевых фреймворков JavaScript, каждый из которых был применен для решения специфических задач в процессе тестирования. Моя работа сосредотачивается не на фронтенд-разработке, а на создании надежных, масштабируемых и эффективных автоматизированных тестовых комплексов. Поэтому выбор фреймворков всегда был обусловлен требованиями проекта, экосистемой инструментов и необходимостью интеграции с другими системами.

1. WebDriverIO (WDIO) — основной фреймворк для UI-тестирования

Это самый часто используемый фреймворк в моей практике для автоматизации браузерных UI-тестов. WDIO является реализацией стандарта WebDriver для JavaScript/TypeScript и предоставляет мощную, хорошо структурированную экосистему.

// Пример базового теста в WebDriverIO с использованием Mocha
describe('Проверка логина на сайте', () => {
    it('должен успешно выполнить вход с правильными данными', async () => {
        await browser.url('https://example.com/login');
        await $('#username').setValue('testUser');
        await $('#password').setValue('securePass123');
        await $('#login-button').click();

        // Проверка успешного логина
        const welcomeMessage = await $('.welcome-header').getText();
        expect(welcomeMessage).toContain('Добро пожаловать, testUser');
    });
});

Ключевые преимущества WDIO в моей работе:

• Поддержка множества браузеров (Chrome, Firefox, Safari, Edge) через интеграцию с Selenium Grid или сервисами типа BrowserStack.
• Гибкая конфигурация через файл wdio.conf.js, позволяющая настроить отчеты, параллельное выполнение, хуки.
• Интеграция с популярными репортерами (Allure, Spec, Cucumber) для красивых и информативных отчетов.
• Наличие готовых плагинов для работы с мобильными браузерами, визуальным тестированием (например, через Applitools).
• Возможность использования с различными тестовыми "runner" и форматами: Mocha, Jasmine, или Cucumber для BDD.

2. Cypress — для современных веб-приложений

Для проектов с современным фронтендом (например, на React или Vue) я активно использовал Cypress. Его архитектура "внутри браузера" предоставляет уникальные преимущества для тестирования.

// Пример теста в Cypress
describe('Тест функционала корзины покупок', () => {
    beforeEach(() => {
        cy.visit('/shop');
        cy.get('.product-card:first').click();
    });

    it('товар должен добавиться в корзину', () => {
        cy.get('.add-to-cart-btn').click();
        cy.get('.cart-counter').should('contain', '1');
        cy.get('.cart-modal').should('be.visible');
    });

    // Cypress позволяет легко работать с сетевыми запросами
    it('должен корректно обрабатывать ошибку API', () => {
        cy.intercept('POST', '/api/cart/add', { statusCode: 500 });
        cy.get('.add-to-cart-btn').click();
        cy.get('.error-toast').should('be.visible');
    });
});

Что ценного в Cypress для автоматизатора:

• Превосходная отладка: Time Travel, живой просмотр состояния приложения, детальные логи.
• Контроль над сетевыми запросами через cy.intercept() — ключевая функция для тестирования с моками или проверки ошибок.
• Автоматические ожидания — не нужно явно добавлять sleep или ожидания элементов.
• Интеграция с CI/CD через Docker образы и хорошая поддержка параллельного запуска.

3. Playwright — как rising star в автоматизации

В последних проектах я переходил или использовал параллельно Playwright от Microsoft. Он сочетает преимущества WDIO (мультибраузерность) и Cypress (удобство API, контроль над сетью).

// Пример теста в Playwright (используется Jest-like assertions)
import { test, expect } from '@playwright/test';

test('Проверка динамической загрузки данных', async ({ page }) => {
    await page.goto('https://demo.table.com');
    
    // Playwright предоставляет мощные селекторы
    await page.locator('button:has-text("Load More")').click();
    
    // Ожидание ответа от API
    await page.waitForResponse('**/api/data');
    
    // Проверка, что новые строки появились
    const rows = await page.locator('table tr').count();
    expect(rows).toBeGreaterThan(10);
});

Причины выбора Playwright:

• Единственный API для всех браузеров (Chromium, Firefox, WebKit) и мобильных эмуляций.
• Нативная поддержка еслиrame, мульти-табов, pop-ups.
• Встроенные возможности для визуального тестирования через page.screenshot() и сравнение.
• Скорость выполнения и меньшая зависимость от внешних серверов (как Selenium Hub).

4. Jest / Mocha — как основа для unit и API тестирования

Для тестирования API (REST, GraphQL) и модульного тестирования JS-кода я часто использовал Jest или Mocha в комбинации с Chai (для assertions) и Supertest или Axios для HTTP-запросов.

// Пример API-теста с использованием Jest и Supertest
const request = require('supertest');
const app = require('../api-server'); // или прямое указание URL

describe('API тесты для пользовательского сервиса', () => {
    test('GET /users должен возвращать список пользователей', async () => {
        const response = await request(app)
            .get('/users')
            .set('Authorization', 'Bearer test-token');
        
        expect(response.statusCode).toBe(200);
        expect(response.body).toBeInstanceOf(Array);
        expect(response.body[0]).toHaveProperty('id');
    });

    test('POST /users должен создавать нового пользователя', async () => {
        const newUser = { name: 'Alex', email: 'alex@test.com' };
        const response = await request(app)
            .post('/users')
            .send(newUser);
        
        expect(response.statusCode).toBe(201);
        expect(response.body.id).toBeDefined();
        expect(response.body.name).toBe(newUser.name);
    });
});

Критерии выбора между Jest и Mocha:

• Jest — "всё в одном" (assertions, mocking, coverage), быстрая установка, популярен в React-экосистеме.
• Mocha — более гибкий, позволяет комбинировать с любыми библиотеками (Chai, Sinon для моков), часто используется в конфигурации WDIO.

Стратегия выбора и интеграция фреймворков

Мой подход не в приверженности одному фреймворку, а в адаптивном выборе:

1. UI-тесты сложных, кросс-браузерных приложений → WebDriverIO + Selenium Grid.
2. Фокус на скорость разработки тестов и отладку для современных SPAs → Cypress.
3. Новый проект с требованием к скорости, поддержке всех браузеров и новым функциям → Playwright.
4. Тестирование API, бэкенд-сервисов или модулей JS → Jest или Mocha/Chai.

Все эти фреймворки интегрируются в CI/CD pipelines (GitLab CI, Jenkins, GitHub Actions) через Docker, используются для регрессионного тестирования, smoke-тестов и как часть allure-отчетов или качества сбора метрик. Ключевое — это не сам фреймворк, а архитектура тестового комплекса, которую он позволяет построить: модульность, читаемость, стабильность и легкость поддержки.