Setting Up Visual Regression Testing for Bitrix

Imagine this: you update a CSS template, modify a component, or just add a new jQuery plugin. The "Buy" button shifts by 3 pixels, the price block overlaps the gallery on mobile, and the font in the product card shrinks by 2px. Hard to spot visually, but customers complain about broken layout. Visual Regression Testing (VRT) solves this: it takes a screenshot of the page before and after changes, compares pixel-by-pixel, and highlights differences. We implement this check on Bitrix projects and share our experience. Over many years we have delivered more than 150 projects, and every one faced visual regressions after updates. Automation testing is the only way to guarantee layout stability without manually checking every page.

Visual regression testing is a standard practice for guaranteeing UI consistency, as stated in the Playwright Documentation.

Why VRT Is Essential for 1C-Bitrix Projects

1C-Bitrix sites involve complex templates with customization, components, and dynamic content. Even a minor layout change can break responsiveness, overlap elements, or mess up mobile display. Manually checking every page after each deploy is expensive and slow. Automation solves this: screenshots are captured in minutes, and diffs highlight deviations. VRT saves up to 20 hours of manual testing per month on an average project — that's an estimated $1,000 at $50/hour. It also catches regressions invisible to the naked eye — like a 1px shift or margin change.

Tools for VRT

Playwright with built-in snapshot tests is the most integrated option if the framework is already used for E2E. In our experience, it is 3–5 times faster than Percy for small projects and requires no monthly subscription. For most 1C-Bitrix projects this is sufficient. If you need an advanced platform with diff analytics and screenshot hosting, Percy is suitable, but its cost can be higher under heavy use.

How to Set Up Snapshot Tests in Playwright

Step 1: Install Playwright: npm init playwright@latest. Step 2: Configure the file playwright.config.ts:

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

export default defineConfig({
  snapshotPathTemplate: '{testDir}/__snapshots__/{testFilePath}/{arg}{ext}',
  expect: {
    toHaveScreenshot: {
      maxDiffPixels: 50,      // tolerance: 50 pixel difference
      threshold: 0.01,         // 1% difference per pixel
      animations: 'disabled',  // disable CSS animations
    },
  },
});

Step 3: Create tests for key pages: homepage, catalog, product card, cart, checkout.

Basic Visual Tests for Bitrix

// tests/visual/catalog.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Catalog visual', () => {

  test('catalog section page', async ({ page }) => {
    await page.goto('/catalog/electronics/');
    await page.waitForLoadState('networkidle');
    await page.evaluate(() => {
      document.querySelectorAll('.catalog-item-label-sale').forEach(el => {
        (el as HTMLElement).style.visibility = 'hidden';
      });
    });
    await expect(page).toHaveScreenshot('catalog-section.png');
  });

  test('product card', async ({ page }) => {
    await page.goto('/catalog/electronics/headphones/model-x100/');
    await page.waitForLoadState('networkidle');
    const timer = document.querySelector('.sale-timer');
    if (timer) await page.evaluate(() => (document.querySelector('.sale-timer') as HTMLElement).style.display = 'none');
    await expect(page).toHaveScreenshot('product-card.png', { fullPage: false });
  });

  test('cart page', async ({ page }) => {
    await page.request.post('/local/ajax/cart-add.php', {
      data: { product_id: 123, quantity: 1 }
    });
    await page.goto('/personal/cart/');
    await page.waitForLoadState('networkidle');
    await expect(page).toHaveScreenshot('cart.png');
  });

});

Mobile Viewport

Add a separate project in the config for mobile tests:

// playwright.config.ts
projects: [
  {
    name: 'desktop-chrome',
    use: { viewport: { width: 1440, height: 900 } },
  },
  {
    name: 'mobile-iphone',
    use: {
      ...devices['iPhone 14'],
      viewport: { width: 390, height: 844 },
    },
    testMatch: '**/visual/**',
  },
];

Masking Dynamic Elements

Bitrix pages contain elements that change every time: visitor counters, promo timers, "Viewed today" blocks, and the like. They must be masked:

await expect(page).toHaveScreenshot('homepage.png', {
  mask: [
    page.locator('.bx-visitor-counter'),
    page.locator('.product-views-count'),
    page.locator('.sale-countdown-timer'),
    page.locator('.personal-greeting'),
  ],
});

CI/CD Integration

Example pipeline for GitHub Actions:

# .github/workflows/visual.yml
visual-tests:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v4
    - run: npm ci
    - run: npx playwright install chromium
    - run: npx playwright test tests/visual/
      env:
        TEST_BASE_URL: ${{ secrets.STAGING_URL }}
    - uses: actions/upload-artifact@v4
      if: failure()
      with:
        name: visual-diff
        path: test-results/

On test failure, test-results/ will contain three files: baseline, actual snapshot, and diff with highlighted differences.

What to Do About False Positives?

False positives arise from dynamic content (counters, timers) or random changes (e.g., different content in a news widget). Solution: mask such elements (as shown above) or increase maxDiffPixels. If the design is intentionally changed, update the baseline snapshots with the command npx playwright test --update-snapshots tests/visual/ and commit the new snapshots — the reviewer will then see visual changes in the diff along with code.

What's Included in Turnkey Setup

• Audit of the current state and selection of 10–15 key pages
• Writing snapshot tests for desktop and mobile views
• CI/CD setup (GitHub Actions, GitLab CI)
• Masking of dynamic elements and tolerance configuration
• Integration with notifications (Telegram, Slack, Bitrix24)
• Documentation and team training

Our extensive 1C-Bitrix experience with 150+ projects ensures stable layout. Contact us to discuss your project — we will assess it within one day and provide a quote after analysis.

Implementation Strategy

Start with the homepage, catalog page, product card, and cart — these cover 80% of regressions that occur during template updates. When design is intentionally changed, update baselines with npx playwright test --update-snapshots tests/visual/. Updated screenshots are committed as part of the PR — the reviewer sees visual changes alongside code in the diff.

Duplicate Products on Page 3: A Bug That Goes to Production

A real case: an online store with pagination through bitrix:catalog.section duplicates products on page three after every second visit. Cache clearing helps for a day, then the duplicates return. Root cause: a custom sort handler collides with PAGEN_1, and under a specific filter combination CIBlockElement::GetList returns identical IDs. Code review missed it; only testing caught it. We build QA for 1C-Bitrix projects that catches such bugs before they hit production: manual functional, automated E2E, load, and acceptance testing. With over a decade of Bitrix experience, we have a library of typical pitfalls and test scenarios that prevent these issues from the start.

How Does a Standard Bitrix Project Break Without Dedicated Testing?

1C-Bitrix is not a landing page. Behind the frontend lie dozens of modules, external integrations, and non‑obvious dependencies. A discount change in sale.discount breaks a promo code in sale.basket.discount — the discount module is one of the most fragile in the platform. Interchange with 1C via catalog.import.1c or REST fails when property mapping is off, resulting in products without price or stock. Core updates — bitrix:main updated, a custom component uses the deprecated CModule::IncludeModule. Without regression testing, every deployment is Russian roulette. Cross‑browser: sale.order.ajax renders differently in Safari and Chrome; the “Place Order” button can move off‑screen on an iPhone. These are not edge cases — they are daily realities for Bitrix teams.

What Does Functional Testing Cover?

We check every business scenario — not just “works or doesn’t work”, but all boundary cases.

Catalog (catalog.section, catalog.element)

• Smart filter catalog.smart.filter: all property combinations, reset, result counting. Filters by SKUs break most often.
• Sorting + pagination — the duplicate bug described above.
• Comparison via catalog.compare.list — add, remove, display differences.
• Quick view — modal window, cart from modal.

Cart and Order (sale.basket.basket, sale.order.ajax)

• Adding from catalog, product page, quick order.
• Discounts: by quantity, by amount, by coupon, cumulative. Discount intersection — at least eight test combinations.
• Delivery calculation: handlers sale.delivery.services, cost, time, pickup points on map.
• Payment: sale.paysystem — processing, handling declines, refunds.
• Order placement: email via main.mail.event, CRM recording, transmission to 1C via sale.export.1c.

Personal Account (sale.personal.section)

• Registration, authorization, password recovery — including Cyrillic email edge cases.
• Order history, repeat order.
• Subscriptions, bonus program.

Forms and Search

• form.result.new / iblock.element.add.form — submission, validation, file fields.
• search.page — relevance, morphology, typo handling via search.title.

Why Is Regression Testing Critical for Bitrix?

After every deployment we verify that nothing previously working is broken.

• Smoke tests — main page loads, catalog shows products, order completes. 5 minutes, run after every deploy. If smoke fails — roll back immediately.
• Regression suite — 40–80 test cases covering main scenarios before every release.
• Visual testing — screenshot comparison (Percy or Playwright). A button shifted 20px, font changed after update — test shows the diff.
• Module checklists — structured lists for sale, catalog, iblock, search. Each module has its own checklist.

What Happens During Load Testing?

The question is not “will the site handle it” but at how many concurrent users catalog.section starts returning 500 errors.

Tools:

• k6 — JavaScript scripting.
• Apache JMeter — classic, for complex scenarios with cookie authorization.
• Yandex.Tank — real‑time visualization, integration with Overload.

Output: peak RPS, response times by percentiles p50/p95/p99, bottlenecks (CPU, RAM, MySQL slow queries on b_iblock_element, file cache). Recommendations: which index to add, which query to rewrite with D7 ORM, where to enable composite cache.

What Deliverables Do You Receive After Testing?

• Test plan with scope, priorities, and quality criteria.
• Test case suite — functional, regression, load.
• Defect report in a tracker (Jira/YouTrack) with severity classification.
• Auto tests (Playwright/Cypress) — basic smoke suite for CI/CD.
• Load testing protocol with graphs and recommendations.
• Acceptance certificate after UAT — confirming readiness for launch.

After delivery, we provide free consultation for a month — answering questions on test improvements and process adaptation. Contact us to receive a full package of documents and auto tests.

Cross‑Browser Testing

We test where buyers actually are. Statistics from your Metrica are more important than general market data.

Minimum set:

• Chrome (last 2 versions) — main traffic.
• Safari on iOS — critical for mobile checkout, sale.order.ajax often behaves unpredictably.
• Yandex.Browser — significant share in Russia, Chromium‑based but with extension quirks.
• Samsung Internet — mobile Android, often forgotten.

Devices:

• Desktop: 1920×1080, 1366×768.
• iPhone: 375×812, 390×844 — checkout must be verified.
• Android: 360×800, 412×915.

Tools: BrowserStack for real devices, Playwright for automation on Chromium/Firefox/WebKit.

Automation

Playwright — primary choice for E2E on Bitrix:

• Cross‑browser: Chromium, Firefox, WebKit.
• Parallel execution, automatic waits.
• Works well with dynamic forms sale.order.ajax.
• Supports mobile viewports and geolocation.

Cypress:

• Runs in browser — more stable for SPA‑like interfaces.
• Excellent visual runner for debugging.
• Limitation: only Chromium‑based browsers.

PHPUnit for custom code:

• Unit tests for custom Bitrix components and modules.
• Tests business logic without frontend dependency.
• Integration with CI/CD — GitLab CI, GitHub Actions.

UAT – Acceptance Testing

Final check with the client on a staging environment with real data:

• Jointly compile a list of critical scenarios — 15–20 key customer paths, not 200 test cases.
• Staging with a copy of the production database (anonymized personal data).
• Quick bug tracking — Jira/YouTrack, prioritization by severity.
• Acceptance protocol — document with results, signatures, and launch readiness.

Order UAT support and we guarantee a release without surprises.

QA Process – Integrated, Not Tacked On

1. Requirements analysis — QA participates in task discussions, catches ambiguities. “Does the discount apply to the product or the order?” — such a question upfront saves two days of debugging.
2. Test cases before development — scenarios ready before the first line of code.
3. Code review — checks for typical Bitrix mistakes: uncleared component cache, direct SQL queries instead of ORM, missing $USER‑>IsAuthorized() check.
4. Functional → regression → deploy.
5. Post‑release monitoring — errors in bitrix/error.log, metrics in Metrica, alerts for 500 errors.

We have been working with Bitrix for over 10 years and have tested more than 300 projects of various scales — from small online stores to corporate portals with 1C and Bitrix24 integration.

Timelines

Testing cost is calculated individually for your project. Get a free consultation — we will assess the scope within one business day and provide a preliminary estimate and test plan. Contact us to discuss your project and schedule a call.