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.