Cross-Browser Testing for 1C-Bitrix Sites

Safari on iOS 16 shows the checkout form with misaligned inputs. Firefox on Windows ignores gap in a flex container. Edge on corporate machines blocks the analytics script due to security settings. These are real problems that arrive in support after launch. We are a team of engineers with 10+ years of experience in Bitrix development — we encounter such bugs daily. Our methodology includes manual and automated testing in 8 browsers on 4 platforms. We guarantee your online store will display correctly for 99% of users. Our engineers hold Bitrix web certification, confirming their competence. Contact us to get a consultation on a testing matrix for your project.

Why cross-browser testing is critical for Bitrix projects?

Bitrix sites contain custom templates, complex JS components (smart filter, checkout form) and integrations with external services (payment forms, pickup point widgets). Each element can behave differently depending on the browser and version. Below is the browser matrix we create based on project analytics or industry data:

P0 — blocks release, P1 — must work, P2 — desirable.

What typical problems occur in Safari?

Safari is one of the most problematic browsers for Bitrix. The smart filter historically works poorly in Firefox and Safari due to non-standard CSS properties and direct DOM manipulation via BX.bind. We check: opening/closing filter groups, correct URL update when selecting parameters (History API), price range slider, correct filter reset. The checkout form uses many custom JS events in /bitrix/templates/.default/components/bitrix/sale.order.ajax/. Safari often breaks position: sticky inside overflow: hidden containers, autofill with non-standard name attributes, and date input (not supported until version 14).

Pickup point widgets (CDEK, Boxberry) — third-party JS widgets conflicting with Content Security Policy (CSP). In Safari, an additional issue is Intelligent Tracking Prevention (ITP) which can block cookies from subdomains used by widgets. Payment forms require special attention: iframes from payment systems in Safari can break due to tightened third-party cookie policies.

How we conduct cross-browser testing?

We use a combination of tools and approaches:

1. Playwright — the basis of automation. It supports Chromium, Firefox, and WebKit (Safari engine) out of the box. We write tests for key user scenarios: product selection in catalog, adding to cart, checkout, payment. Tests are integrated into CI and run on every PR. According to Playwright documentation, automation reduces regression execution time by 80%.

2. BrowserStack — for real iOS devices and specific versions of Samsung Internet. Integration with Playwright via configuration:

const capabilities = {
    'browserstack.user': process.env.BROWSERSTACK_USERNAME,
    'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY,
    'project': 'Bitrix Shop',
    'build': `Regression ${new Date().toISOString()}`,
};

3. LambdaTest — alternative to BrowserStack, cheaper for small projects.

4. Manual testing on real devices — indispensable for Safari on iPhone. WebKit in emulator and real Safari behave differently with touch events and virtual keyboard.

Common CSS issues in custom Bitrix templates are solved via fallback properties:

.catalog-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* fallback for Safari < 14.1 */
@supports (gap: 20px) {
    .catalog-grid { gap: 20px; margin: 0; }
    .catalog-grid > .item { margin: 0; }
}
@supports not (gap: 20px) {
    .catalog-grid { margin: -10px; }
    .catalog-grid > .item { margin: 10px; }
}

Bitrix JS specifics — using old BX API. Custom code often uses ES6+ without transpilation. We check:

// Problem: optional chaining does not work in old browsers without transpile
const price = product?.offers?.[0]?.price; // Breaks in Samsung Internet 14

// Safe variant
const price = product && product.offers && product.offers[0] && product.offers[0].price;

What is included in the work

• Agreement on the browser and device matrix
• Writing automated tests (Playwright) for key scenarios
• Manual testing on real devices (iPhone, iPad, Android tablets)
• Integration testing: pickup point widgets, payment forms, analytics
• Report with found issues and recommendations
• Re-testing after fixes
• Documentation on test coverage and CI integration
• Training the client's team on using the report
• Post-testing support

Time estimates

Our team has extensive experience, with over 50 projects tested. All engineers hold Bitrix web certification. The cost is calculated individually depending on the project complexity. Order cross-browser testing as part of a pre-release audit — it saves budget on post-release fixes. Get a consultation on a testing matrix for your project. Contact us to schedule testing.

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.