Налаштування end-to-end тестування для 1С-Бітрікс

Налаштування end-to-end тестування для 1С-Бітрікс

Після кожного оновлення ядра або доопрацювання хтось вручну перевіряє кошик, оформлення замовлення та особистий кабінет. Це займає 2–3 години і все одно пропускає регресії — бо жоден тестувальник не перевірить одночасно п'ять браузерів, мобільний вигляд і авторизацію через соцмережі. E2E тести вирішують це автоматично.

Вибір інструменту

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

Cypress — гарний для SPA, але для багатосторінкових сайтів на 1С-Бітрікс його обмеження (один 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 для 1С-Бітрікс

Стандартний компонент 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 у 1С-Бітрікс, а не в Playwright.