>

Тестування на різних браузерах

📘 Чому важливо cross-browser testing?

Різні браузери відображають сайти по-різному:

Browser Market Share (2026):

Частина 1: Порівняння інструментів

Інструмент Безкоштовний Браузери Mobile Автоматизація Ціна
BrowserStack ⚠️ Trial 30 днів 3000+ комбінацій ✅ Real devices ✅ Selenium/Cypress $39-299/міс
Sauce Labs ⚠️ Trial 14 днів 900+ комбінацій ✅ iOS/Android ✅ Selenium $39-349/міс
LambdaTest ✅ 100 хв/міс 3000+ комбінацій ✅ Real devices ✅ Selenium/Playwright $15-499/міс
CrossBrowserTesting ❌ Платно 2050+ комбінацій ✅ Real devices ✅ Selenium $29-250/міс
Browserling ✅ 3 хв sessions Основні браузери ❌ Ні ❌ Тільки live $19-99/міс

Частина 2: BrowserStack (найпопулярніший)

Live Testing (ручне тестування)

  1. Signup на BrowserStack.com
  2. Open Live → Desktop Browsers
  3. Виберіть комбінацію:
    OS: Windows 11 Browser: Chrome 121 Resolution: 1920x1080
  4. Введіть URL: https://scientific-calculators.com
  5. Тестуйте функціональність:
    • Форми введення працюють?
    • JavaScript калькулятори обчислюють правильно?
    • CSS відображається коректно?
    • Адаптивність (resize window)

Автоматизоване тестування (Selenium)

// BrowserStack + Selenium WebDriver const webdriver = require('selenium-webdriver'); const capabilities = { 'bstack:options': { os: 'Windows', osVersion: '11', browserName: 'Chrome', browserVersion: 'latest', userName: 'YOUR_USERNAME', accessKey: 'YOUR_ACCESS_KEY' } }; const driver = new webdriver.Builder() .usingServer('https://hub.browserstack.com/wd/hub') .withCapabilities(capabilities) .build(); (async function test() { await driver.get('https://scientific-calculators.com/quadratic-equation'); // Заповнити форму await driver.findElement(webdriver.By.id('coef-a')).sendKeys('1'); await driver.findElement(webdriver.By.id('coef-b')).sendKeys('-5'); await driver.findElement(webdriver.By.id('coef-c')).sendKeys('6'); // Натиснути кнопку await driver.findElement(webdriver.By.id('calculate')).click(); // Перевірити результат await driver.sleep(1000); const result = await driver.findElement(webdriver.By.id('result')).getText(); console.log('Result:', result); // Закрити сесію await driver.quit(); })();

Частина 3: Локальне тестування

Встановлення різних браузерів

# Mac (Homebrew) brew install --cask google-chrome brew install --cask firefox brew install --cask microsoft-edge brew install --cask opera # Windows (Chocolatey) choco install googlechrome firefox microsoft-edge opera # Linux (Ubuntu/Debian) sudo apt install chromium-browser firefox sudo snap install opera

Playwright — multi-browser automation

// npm install playwright const { chromium, firefox, webkit } = require('playwright'); (async () => { // Тестування на всіх браузерах for (const browsers of [chromium, firefox, webkit]) { const browser = await browsers.launch(); const page = await browser.newPage(); await page.goto('https://scientific-calculators.com'); // Тест: заповнити квадратне рівняння await page.fill('#coef-a', '1'); await page.fill('#coef-b', '-5'); await page.fill('#coef-c', '6'); await page.click('#calculate'); // Перевірити результат const result = await page.textContent('#result'); console.log(`${browsers.name()}: ${result}`); await browser.close(); }

Частина 4: Mobile Browser Testing

BrowserStack Real Devices

  1. Live → Mobile Browsers
  2. Виберіть пристрій:
    • iPhone 15 Pro → Safari 17
    • Samsung Galaxy S24 → Chrome
    • Google Pixel 8 → Chrome
  3. Тестуйте:
    • Touch events працюють?
    • Viewport meta tag коректний?
    • Форми easy to fill?
    • Розмір тексту читабельний?
    • Landscape/Portrait орієнтація

Chrome DevTools Device Mode (безкоштовно)

  1. Відкрийте Chrome DevTools (F12)
  2. Натисніть Toggle Device Toolbar (Ctrl+Shift+M)
  3. Виберіть пристрій:
    • iPhone 14 Pro Max (430x932)
    • Samsung Galaxy S20 (360x800)
    • iPad Pro (1024x1366)
  4. Тестуйте адаптив

Частина 5: Cross-Browser CSS

CSS Browser Support

⚠️ Перевірте підтримку на CanIUse.com:

CSS Autoprefixer

/* package.json */ { "browserslist": [ "last 2 versions", "> 1%", "not dead" ] } /* Before Autoprefixer */ .element { display: flex; user-select: none; } /* After Autoprefixer */ .element { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

Частина 6: JavaScript Compatibility

Babel — transpile ES6+ → ES5

// Modern JavaScript (ES6+) const quadratic = (a, b, c) => { const discriminant = b ** 2 - 4 * a * c; return discriminant >= 0 ? [(- b + Math.sqrt(discriminant)) / (2 * a), (-b - Math.sqrt(discriminant)) / (2 * a)] : null; }; // Після Babel (ES5) var quadratic = function quadratic(a, b, c) { var discriminant = Math.pow(b, 2) - 4 * a * c; return discriminant >= 0 ? [(-b + Math.sqrt(discriminant)) / (2 * a), (-b - Math.sqrt(discriminant)) / (2 * a)] : null; };

Polyfills для старих браузерів

// npm install core-js import 'core-js/stable'; // Polyfills для ES6+ import 'regenerator-runtime/runtime'; // Async/await // Приклад: Promise polyfill if (!window.Promise) { window.Promise = require('promise-polyfill'); }

Частина 7: Best Practices

✅ Рекомендації:
  1. Пріоритетні браузери для тестування:
    • Desktop: Chrome (latest), Safari (latest), Firefox (latest), Edge (latest)
    • Mobile: Chrome Android, Safari iOS
  2. Тестуйте на real devices, а не тільки emulators
  3. Автоматизуйте regression testing — Playwright/Selenium
  4. Feature detection замість browser detection:
    // ❌ ПОГАНО if (navigator.userAgent.includes('Chrome')) { // Chrome-specific code } // ✅ ДОБРЕ if ('serviceWorker' in navigator) { // Service Worker supported }
  5. Graceful degradation: сайт працює навіть якщо якась feature не підтримується

Висновок

Cross-browser testing забезпечує однаковий UX для всіх користувачів:

📚 Ресурси:

Як користуватися шпаргалкою

Ця шпаргалка зосереджує найважливіші формули, правила та визначення теми в компактному форматі для швидкого пошуку та підготовки до іспитів. Матеріал систематизований від базових понять до просунутих результатів.

Шпаргалка охоплює: закон Ома, закони Кірхгофа, ємність, індуктивність, резонанс, формули потужності змінного та постійного струму.

Ефективне використання

Використовуйте шпаргалку поряд з розв'язуванням задач — не для списування, а як довідник формул. Спершу спробуйте пригадати формулу самостійно, потім звіртеся з довідником. Регулярне повторення формує стійку пам'ять.

Часті запитання (FAQ)

Які ключові формули та правила містить шпаргалка з тестування на різних браузерах?
Ця шпаргалка з 'Тестування на різних браузерах' включає: основні означення, головні формули у компактному вигляді, правила обчислень, типові підстановки та приклади застосування. Все систематизовано для швидкого пошуку.
Для кого призначена ця шпаргалка з тестування на різних браузерах?
Шпаргалка з 'Тестування на різних браузерах' орієнтована на студентів університетів та учнів старшої школи, а також на всіх, хто хоче швидко освіжити знання перед іспитом або при вирішенні практичних задач.
Як використовувати шпаргалку з тестування на різних браузерах при підготовці до іспиту?
Оптимальна стратегія: спершу вивчіть теорію, потім використовуйте шпаргалку як довідник при розв'язанні задач. За 1–2 дні до іспиту перегляньте шпаргалку цілком, звертаючи увагу на формули, які ви плутаєте.
Чи охоплює ця шпаргалка всю програму курсу з тестування на різних браузерах?
Шпаргалка з 'Тестування на різних браузерах' охоплює стандартну університетську програму: всі ключові теореми, формули та методи. Матеріал структурований від базових понять до просунутих результатів.
Де ще можна попрактикуватися з тестування на різних браузерах після вивчення шпаргалки?
Після роботи зі шпаргалкою рекомендуємо: тренажери вправ на calculator.party (миттєвий зворотний зв'язок), розв'язані задачі (показують метод покроково) та онлайн-калькулятори для перевірки власних результатів.

🔗 Також за темою

🧮 Калькулятор тестування ПЗ