Автоматическое тестирование сайта: зачем и как

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

Для тестирования кастомных компонентов я использую PHPUnit с инициализацией ядра Bitrix:

Add([
            'NAME' => 'Тестовый каталог',
            'CODE' => 'test_catalog',
            'IBLOCK_TYPE_ID' => 'catalog',
            'SITE_ID' => 's1',
        ]);
        
        // Добавляем тестовый товар
        $element = new \CIBlockElement();
        $elementId = $element->Add([
            'IBLOCK_ID' => $iblockId,
            'NAME' => 'Тестовый товар',
            'ACTIVE' => 'Y',
            'PREVIEW_TEXT' => 'Описание товара',
        ]);
        
        // Тестируем компонент
        global $APPLICATION;
        ob_start();
        $APPLICATION->IncludeComponent(
            'custom:catalog.list',
            '',
            ['IBLOCK_ID' => $iblockId]
        );
        $output = ob_get_clean();
        
        $this->assertStringContainsString('Тестовый товар', $output);
        
        // Очищаем тестовые данные
        \CIBlockElement::Delete($elementId);
        \CIBlock::Delete($iblockId);
    }
}

E2E-тестирование интернет-магазина на Bitrix

Для полноценного тестирования интернет-магазина я использую Playwright с учётом особенностей Bitrix:

// tests/e2e/bitrix-shop.spec.js
import { test, expect } from '@playwright/test';

test.describe('Интернет-магазин Bitrix', () => {
  test.beforeEach(async ({ page }) => {
    // Bitrix может долго грузиться
    page.setDefaultTimeout(30000);
  });
  
  test('добавление товара в корзину', async ({ page }) => {
    await page.goto('/catalog/');
    
    // Ждём загрузки каталога (Bitrix может подгружать компоненты)
    await page.waitForSelector('.catalog-item', { timeout: 10000 });
    
    // Кликаем на первый товар
    await page.click('.catalog-item:first-child .btn-buy');
    
    // Ждём обновления корзины (AJAX)
    await page.waitForFunction(() => {
      const counter = document.querySelector('.basket-counter');
      return counter && parseInt(counter.textContent) > 0;
    });
    
    // Проверяем, что товар добавился
    await expect(page.locator('.basket-counter')).toContainText('1');
  });
  
  test('оформление заказа', async ({ page }) => {
    // Добавляем товар в корзину
    await page.goto('/catalog/');
    await page.click('.catalog-item:first-child .btn-buy');
    await page.waitForSelector('.basket-counter:has-text("1")');
    
    // Переходим в корзину
    await page.click('.basket-link');
    await expect(page).toHaveURL(/\/personal\/cart\//);
    
    // Оформляем заказ
    await page.click('.btn-order');
    await page.fill('[name="ORDER_PROP_1"]', 'Тест Тестович'); // ФИО
    await page.fill('[name="ORDER_PROP_2"]', 'test@example.com'); // Email  
    await page.fill('[name="ORDER_PROP_3"]', '+7 900 123-45-67'); // Телефон
    
    await page.click('.btn-order-submit');
    
    // Проверяем успешное оформление
    await expect(page.locator('.order-success')).toBeVisible();
    await expect(page.locator('.order-number')).toContainText(/№\s*\d+/);
  });
});

Важный нюанс: Bitrix активно использует AJAX и может долго инициализироваться. Поэтому я всегда увеличиваю таймауты и добавляю explicit waits.

Также полезно тестировать кеширование в Bitrix — проверять, что после очистки кеша сайт работает корректно.

Тестирование сайтов на WordPress

WordPress — совершенно другая история. Здесь много готовых плагинов, но каждый может сломаться после обновления. Плюс кастомные темы с собственной логикой.

Unit-тестирование WordPress

WordPress предоставляет собственную тестовую среду на базе PHPUnit. Честно говоря, настройка муторная, но результат того стоит.

# Установка WP test suite
bash bin/install-wp-tests.sh wordpress_test root 'password' localhost latest

Пример теста для кастомного плагина:

assertStringContainsString('assertStringContainsString('id="custom-form-123"', $output);
    }
    
    public function test_ajax_handler() {
        // Тестируем AJAX-обработчик
        $_POST['action'] = 'custom_form_submit';
        $_POST['form_data'] = 'name=John&email=john@example.com';
        
        try {
            $this->_handleAjax('custom_form_submit');
        } catch (WPAjaxDieContinueException $e) {
            // AJAX завершился корректно
        }
        
        $response = json_decode($this->_last_response, true);
        $this->assertEquals('success', $response['status']);
    }
}

E2E-тестирование WordPress

Для E2E-тестирования WordPress я использую Playwright с учётом особенностей админки:

// tests/e2e/wordpress-admin.spec.js
import { test, expect } from '@playwright/test';

test.describe('Админка WordPress', () => {
  test.beforeEach(async ({ page }) => {
    // Авторизуемся в админке
    await page.goto('/wp-admin/');
    await page.fill('#user_login', 'admin');
    await page.fill('#user_pass', 'password');
    await page.click('#wp-submit');
    
    await expect(page).toHaveURL(/wp-admin\/(?:index\.php)?$/);
  });
  
  test('создание нового поста', async ({ page }) => {
    // Переходим к созданию поста
    await page.click('text=Записи');
    await page.click('text=Добавить новую');
    
    // Заполняем пост
    await page.fill('[data-testid="post-title"]', 'Тестовый пост');
    
    // Работаем с Gutenberg редактором
    await page.click('[data-type="core/paragraph"]');
    await page.keyboard.type('Содержимое тестового поста');
    
    // Публикуем
    await page.click('text=Опубликовать');
    await page.click('text=Опубликовать', { nth: 1 }); // подтверждение
    
    // Проверяем успешную публикацию
    await expect(page.locator('text=Запись опубликована')).toBeVisible();
    
    // Проверяем на фронтенде
    await page.click('text=Просмотреть запись');
    await expect(page.locator('h1')).toContainText('Тестовый пост');
  });
  
  test('обновление плагина', async ({ page }) => {
    await page.goto('/wp-admin/plugins.php');
    
    // Ищем плагин с обновлением
    const updateLink = page.locator('.update-now').first();
    if (await updateLink.count() > 0) {
      await updateLink.click();
      
      // Ждём завершения обновления
      await expect(page.locator('.notice-success')).toBeVisible({ timeout: 30000 });
      
      // Проверяем, что сайт работает
      await page.goto('/');
      await expect(page.locator('body')).toBeVisible();
    }
  });
});

Тестирование WooCommerce

Если у вас интернет-магазин на WooCommerce, критично важно тестировать процесс покупки:

// tests/e2e/woocommerce.spec.js
test('покупка товара в WooCommerce', async ({ page }) => {
  // Добавляем товар в корзину
  await page.goto('/shop/');
  await page.click('.product:first-child .add_to_cart_button');
  
  // Ждём добавления (WooCommerce использует AJAX)
  await page.waitForSelector('.cart-contents-count:not(:empty)');
  
  // Переходим в корзину
  await page.click('.cart-contents');
  await expect(page).toHaveURL(/\/cart\//);
  
  // Оформляем заказ
  await page.click('.checkout-button');
  
  // Заполняем данные покупателя
  await page.fill('#billing_first_name', 'Иван');
  await page.fill('#billing_last_name', 'Петров');
  await page.fill('#billing_email', 'ivan@example.com');
  await page.fill('#billing_phone', '+7 900 123-45-67');
  
  // Выбираем способ оплаты
  await page.check('#payment_method_cod'); // наложенный платёж
  
  // Размещаем заказ
  await page.click('#place_order');
  
  // Проверяем успешное оформление
  await expect(page.locator('.woocommerce-order-received')).toBeVisible();
  await expect(page.locator('.order-number')).toContainText(/\d+/);
});

У меня был клиент с WooCommerce, где после обновления плагина сломалась интеграция с платёжной системой. Автотесты помогли поймать это за 5 минут вместо нескольких дней жалоб клиентов.

Мониторинг и алертинг

Автотесты — это не только про разработку. Их можно использовать для постоянного мониторинга работоспособности сайта. Особенно полезно для критичных бизнес-процессов.

Регулярные проверки

Я настраиваю автотесты на запуск каждые 30 минут через cron. Если что-то сломалось — сразу получаю уведомление в Slack.

# Cron для регулярного запуска тестов
*/30 * * * * cd /var/www/site && npm run test:critical > /dev/null 2>&1 || echo "Tests failed" | mail -s "Site tests failed" admin@example.com

Для этого создаю отдельный набор "smoke tests" — быстрые тесты критичного функционала:

// tests/smoke/critical.spec.js
import { test, expect } from '@playwright/test';

test.describe('Критичные проверки', () => {
  test('главная страница загружается', async ({ page }) => {
    await page.goto('/');
    await expect(page.locator('h1')).toBeVisible({ timeout: 5000 });
  });
  
  test('форма обратной связи работает', async ({ page }) => {
    await page.goto('/contacts/');
    await page.fill('[name="name"]', 'Test');
    await page.fill('[name="email"]', 'test@example.com');
    await page.fill('[name="message"]', 'Test message');
    await page.click('[type="submit"]');
    
    await expect(page.locator('.success-message')).toBeVisible();
  });
  
  test('каталог товаров отображается', async ({ page }) => {
    await page.goto('/catalog/');
    await expect(page.locator('.product-item')).toHaveCount({ min: 1 });
  });
});

Интеграция с мониторингом

Автотесты можно интегрировать с системами мониторинга типа Zabbix, Prometheus или DataDog. Я отправляю метрики успешности тестов:

// utils/monitoring.js
export async function sendMetrics(testResults) {
  const metrics = {
    tests_total: testResults.total,
    tests_passed: testResults.passed,
    tests_failed: testResults.failed,
    response_time: testResults.avgResponseTime,
    timestamp: Date.now()
  };
  
  // Отправляем в InfluxDB или другую TSDB
  await fetch('http://monitoring.example.com/api/metrics', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(metrics)
  });
}

Уведомления в Slack

Когда тесты падают, важно быстро об этом узнать. Я настраиваю уведомления в Slack:

// utils/notifications.js
export async function notifySlack(testResults) {
  if (testResults.failed > 0) {
    const message = {
      text: `🚨 Тесты упали на ${process.env.SITE_URL}`,
      attachments: [{
        color: 'danger',
        fields: [
          { title: 'Упавшие тесты', value: testResults.failed, short: true },
          { title: 'Всего тестов', value: testResults.total, short: true },
          { title: 'Время', value: new Date().toLocaleString(), short: true }
        ]
      }]
    };
    
    await fetch(process.env.SLACK_WEBHOOK_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(message)
    });
  }
}

У одного клиента такой мониторинг помог поймать проблему с платёжным шлюзом в 2 часа ночи. Без автотестов узнали бы только утром по жалобам покупателей.

Типичные ошибки и подводные камни

За годы работы с автотестами я наступил на все возможные грабли. Поделюсь самыми болезненными, чтобы вы их избежали.

Хрупкие селекторы

Самая частая проблема — тесты ломаются из-за изменений в вёрстке. Вчера кнопка была `.btn-primary`, сегодня стала `.button-submit` — и все тесты упали.

Плохо:

await page.click('.btn.btn-primary.btn-lg'); // сломается при изменении CSS
await page.click('div > ul > li:nth-child(3) > a'); // сломается при изменении структуры

Хорошо:

await page.click('[data-testid="submit-button"]'); // стабильно
await page.click('text=Отправить заказ'); // понятно и стабильно

Я всегда прошу верстальщиков добавлять data-testid для важных элементов. Это небольшие усилия, которые сэкономят кучу времени.

Зависимость от внешних сервисов

Тесты не должны зависеть от внешних API. Платёжные системы, SMS-сервисы, почтовые провайдеры — всё это может быть недоступно во время тестирования.

Я использую моки для внешних сервисов:

// utils/mocks.js
export async function mockPaymentGateway(page) {
  await page.route('**/api/payment/**', route => {
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({
        status: 'success',
        transaction_id: 'mock_12345',
        payment_url: '/payment/success'
      })
    });
  });
}

Слишком медленные тесты

Если тесты выполняются больше 10 минут, их никто не будет запускать. Я оптимизирую производительность тестов:

• Запуск тестов параллельно
• Переиспользование браузерных сессий
• Моки вместо реальных HTTP-запросов
• Отключение изображений и CSS в тестах

// playwright.config.js - оптимизация скорости
use: {
  // Отключаем загрузку изображений
  launchOptions: {
    args: ['--disable-images']
  },
  // Блокируем ненужные ресурсы
  extraHTTPHeaders: {
    'Accept-Language': 'en-US'
  }
}

Недетерминированные тесты

Тесты должны работать одинаково при каждом запуске. Но иногда они падают случайно из-за race conditions, асинхронности, случайных данных.

Типичные проблемы:

• Использование текущего времени в тестах
• Зависимость от порядка выполнения
• Недостаточные таймауты
• Конкурентное использование одних данных

Решения:

// Плохо - зависит от времени
test('создание события на завтра', async ({ page }) => {
  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  await page.fill('[name="date"]', tomorrow.toISOString().split('T')[0]);
});

// Хорошо - фиксированная дата
test('создание события', async ({ page }) => {
  await page.fill('[name="date"]', '2026-12-31');
});

// Плохо - race condition
test('проверка счётчика', async ({ page }) => {
  await page.click('.increment-btn');
  expect(await page.textContent('.counter')).toBe('1');
});

// Хорошо - ждём изменения
test('проверка счётчика', async ({ page }) => {
  await page.click('.increment-btn');
  await expect(page.locator('.counter')).toHaveText('1');
});

Избыточное тестирование

Не нужно тестировать всё подряд. 80% багов можно поймать 20% тестов. Я фокусируюсь на критичном функционале:

• Регистрация и авторизация
• Оформление заказов
• Отправка форм
• Интеграции с внешними сервисами

А вот тестировать цвет кнопок или отступы — пустая трата времени.

Помните: исправление ошибок на сайте обходится дороже, чем их предотвращение с помощью тестов. Но писать тесты тоже нужно с умом.

Автоматическое тестирование — это инвестиция в будущее проекта. На начальных этапах кажется, что проще протестировать вручную. Но когда проект растёт, автотесты становятся критично важными для поддержания качества и скорости разработки.

Начните с малого — автоматизируйте тестирование самых важных функций. Постепенно расширяйте покрытие. И помните: лучше 10 стабильных тестов, чем 100 нестабильных.