Setting up end-to-end testing for 1C-Bitrix

Setting Up End-to-End Testing for 1C-Bitrix

After every core update or feature change, someone manually checks the cart, checkout flow, and personal account. This takes 2–3 hours and still misses regressions — because no single tester can simultaneously verify five browsers, mobile views, and social login at once. E2E tests handle this automatically.

Choosing a Tool

Playwright is the optimal choice for 1C-Bitrix projects. It supports Chromium, Firefox, and WebKit in a single run, works headless and headed, and features a powerful locator API that does not break when the DOM structure changes. Built-in support for mobile viewports, network interception, and screenshots.

Cypress works well for SPAs, but for multi-page 1C-Bitrix sites its limitations (single origin, no native multi-tab support) create problems.

Infrastructure

The test environment must use a dedicated database with fixed data. Never run tests against production. Minimal structure:

tests/
  e2e/
    fixtures/        # JSON with test data
    pages/           # Page Object Model
    specs/           # test scenarios
  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 for 1C-Bitrix

The standard bitrix:sale.order.ajax component has stable CSS classes. The Page Object isolates locators from tests:

// 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
    );
  }
}

Key Scenarios

Add to cart and checkout:

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

test('checkout flow', async ({ page }) => {
  // Add product from catalog page
  await page.goto('/catalog/electronics/headphones/sennheiser-hd-599/');
  await page.click('.catalog-element-offer-set-item:first-child'); // select SKU
  await page.click('.btn-buy');
  await expect(page.locator('.bx-basket-count')).toContainText('1');

  // Go to cart
  const cart = new CartPage(page);
  await cart.goto();
  await expect(cart.totalPrice).toBeVisible();

  // Checkout
  await cart.checkoutButton.click();
  await page.fill('#order-name', 'Ivan Ivanov');
  await page.fill('#order-email', '[email protected]');
  await page.fill('#order-phone', '+79001234567');
  await page.click('#pay-system-1'); // select payment method

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

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

Login and personal account:

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('Ivan');
});

CI/CD Integration

# .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/

What to Cover First

Test stability is the primary goal. Use waitForResponse instead of waitForTimeout, use data-testid locators where standard CSS classes change on template updates. When tests are flaky, the problem is almost always 1C-Bitrix AJAX asynchrony, not Playwright.