Настройка end-to-end тестирования для 1С-Битрикс

Настройка end-to-end тестирования для 1С-Битрикс

После каждого обновления ядра или доработки кто-то вручную проверяет корзину, оформление заказа и личный кабинет. Это занимает 2–3 часа и всё равно пропускает регрессии — потому что ни один тестировщик не проверит одновременно пять браузеров, мобильный вид и авторизацию через соцсети. E2E тесты решают это автоматически.

Выбор инструмента

Playwright — оптимальный выбор для Битрикс-проектов. Поддерживает Chromium, Firefox, WebKit в одном запуске, работает headless и headful, имеет мощный локатор API, который не ломается при изменении структуры DOM. Встроенная поддержка мобильных вьюпортов, сетевого перехвата, скриншотов.

Cypress — хорош для SPA, но для многостраничных Битрикс-сайтов его ограничения (один origin, отсутствие нативной поддержки нескольких вкладок) создают проблемы.

Инфраструктура

Тестовая среда — обязательно отдельная база данных с фиксированными данными. Никаких тестов на продакшене. Минимальная структура:

tests/
  e2e/
    fixtures/        # JSON с тестовыми данными
    pages/           # Page Object Model
    specs/           # сценарии
  playwright.config.ts

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e/specs',
  timeout: 30_000,
  retries: process.env.CI ? 2 : 0,
  use: {
    baseURL: process.env.TEST_BASE_URL || 'https://test.shop.example.com',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'mobile',   use: { ...devices['iPhone 13'] } },
  ],
});

Page Object Model для Битрикс

Стандартный компонент bitrix:sale.order.ajax имеет устойчивые CSS-классы. Page Object изолирует локаторы от тестов:

// tests/e2e/pages/CartPage.ts
import { Page, Locator } from '@playwright/test';

export class CartPage {
  readonly page: Page;
  readonly checkoutButton: Locator;
  readonly totalPrice: Locator;

  constructor(page: Page) {
    this.page           = page;
    this.checkoutButton = page.locator('.basket-checkout-btn');
    this.totalPrice     = page.locator('.basket-coupon-block-total-price-current');
  }

  async goto() {
    await this.page.goto('/personal/cart/');
  }

  async applyPromocode(code: string) {
    await this.page.fill('.basket-coupon-field-input', code);
    await this.page.click('.basket-coupon-apply-btn');
    await this.page.waitForResponse(resp =>
      resp.url().includes('ajax_basket') && resp.status() === 200
    );
  }
}

Ключевые сценарии

Добавление в корзину и оформление заказа:

// tests/e2e/specs/checkout.spec.ts
import { test, expect } from '@playwright/test';
import { CartPage } from '../pages/CartPage';

test('checkout flow', async ({ page }) => {
  // Добавляем товар со страницы каталога
  await page.goto('/catalog/electronics/headphones/sennheiser-hd-599/');
  await page.click('.catalog-element-offer-set-item:first-child'); // выбор SKU
  await page.click('.btn-buy');
  await expect(page.locator('.bx-basket-count')).toContainText('1');

  // Переход в корзину
  const cart = new CartPage(page);
  await cart.goto();
  await expect(cart.totalPrice).toBeVisible();

  // Оформление
  await cart.checkoutButton.click();
  await page.fill('#order-name', 'Иван Иванов');
  await page.fill('#order-email', '[email protected]');
  await page.fill('#order-phone', '+79001234567');
  await page.click('#pay-system-1'); // выбор способа оплаты

  await Promise.all([
    page.waitForURL(/\/order\/success\//),
    page.click('.btn-checkout-submit'),
  ]);

  await expect(page.locator('.sale-order-detail-result')).toBeVisible();
});

Авторизация и личный кабинет:

test('login and account access', async ({ page }) => {
  await page.goto('/personal/login/');
  await page.fill('#USER_LOGIN', '[email protected]');
  await page.fill('#USER_PASSWORD', 'testpassword123');
  await page.click('.login-btn');

  await expect(page).toHaveURL(/\/personal\//);
  await expect(page.locator('.personal-user-name')).toContainText('Иван');
});

Интеграция в CI/CD

# .github/workflows/e2e.yml
name: E2E Tests
on:
  push:
    branches: [main, staging]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx playwright install --with-deps chromium
      - run: npx playwright test
        env:
          TEST_BASE_URL: ${{ secrets.TEST_BASE_URL }}
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/

Что покрывать в первую очередь

Стабильность тестов — главная задача. Используйте waitForResponse вместо waitForTimeout, локаторы по data-testid там, где стандартные CSS-классы меняются при обновлениях шаблона. При нестабильных тестах проблема почти всегда в асинхронности Битрикс AJAX, а не в Playwright.