Статьи

Як почати крос-браузерні тестування

Оригінал статті:   https://dojo Оригінал статті: https://dojo.ministryoftesting.com/lessons/getting-started-with-cross-browser-testing

Автор: Алекс Ленгшалл (Alex Langshall)

Переклад: Ольга Алифанова.

Ви, як тестувальник, отримали на тестування юзер-сторі, і відповідальний за неї розробник попросив вас провести крос-браузерні тестування. Що це означає? Навіщо тестувати юзер-сторі в різних браузерах? Які браузери вибрати для тестування? На що звертати увагу в процесі?

Тестировщики повинні задавати ці питання і собі, і іншим зацікавленим особам, якщо для юзер-сторі або проекту потрібно тестувати в різних браузерах. Детально проаналізувати поведінку додатка важко навіть в одному браузері, не кажучи вже про всьому різноманітті браузерів, яке може підтримуватися вашим додатком. Давайте розберемо ці питання детальніше і розглянемо можливі шляхи вирішення, які зроблять ваше крос-браузерні тестування успішним.

Визначення крос-браузерного тестування

Крос-браузерні тестування - це тестування фичи в різних релевантних додатком браузерах. Це важлива частина тестування: незважаючи на існування веб-стандартів, різні браузери впроваджують їх різним чином. На глибокому рівні різні елементи сторінки поводяться по-різному в різних браузерах. Поведінка фичи в Safari, наприклад, може сильно відрізнятися від її роботи в Chrome.

Якщо є ймовірність функціональних або косметичних відмінностей в поведінці системи в різних браузерах, без крос-браузерного тестування просто не обійтися. Воно повинно проводитися для кожного аспекту зручності використання, відображення або функціональності, що розробляється вашою командою.

Крос-браузерні тестування засвідчує, що призначений для користувача досвід буде єдиним незалежно від браузера. Неважливо, новий це код або вже існуюча фіча: додаток повинен одноманітно працювати в різних браузерах. Залишимо за кадром суперечки про "жахливому Internet Explorer": багато користувачів змушені користуватися браузером, наданим їм на роботі, в школі, або обраним через певні характеристик іншого ПО. Всі вони заслуговують на те, щоб їх потреби приймалися до уваги незалежно від того, наскільки хорошим або поганим ви вважаєте обраний ними браузер.

вибір браузерів

Звичайно, тестувати абсолютно всі існуючі в світі браузери - це утопія. Їх надто багато, щоб це тестування мало якийсь сенс. Розумніше заощадити час, вибравши конкретні браузери, які підходять для тестування. Використання підходу, заснованого на ризиках, може ще більше звузити вибірку браузерів, знімаючи з вас необхідність тестування в різних середовищах і браузерах, що асоціюються з ними.

Якщо у вашого продукту або сайту є явно задекларований перелік підтримуваних браузерів, то саме в них ви і будете регулярно тестувати. Якщо ви підтримуєте тільки IE11, Firefox, Safari і Chrome, ви можете обмежити ваше тестування цієї четвіркою. Якщо чітко сформульованої браузерної політики не існує, отримаєте доступ до статистики використання та візьміть для тестування п'ять браузерів-лідерів - це непоганий спосіб отримати цілком пристойне покриття крос-браузерного тестування програми.

Якщо у вас є доступ до аналітики через Google Analytics, або що-небудь на зразок Kissmetrics, ви можете визначити, які конкретно браузери використовуються відвідувачами вашого сервісу. Це, звичайно, допоможе вам спланувати вибірку браузерів, але це ні в якому разі не срібна куля.

Деякі тестувальники планують крос-браузерні тестування, використовуючи таблиці на зразок тієї, яка наведена трохи нижче. Вона дозволяє тестувальника переконатися, що всі необхідні варіації і підтримувані ОС і мобільними ОС браузери покриті, а не підтримуються або не мають потреби в перевірці виключені з тестування.


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

Більшість браузерозавісімих багів часто виявляються в IE11 і Safari через їх закритого вихідного коду. Розробникам часто доводиться використовувати обхідні шляхи, щоб домогтися однаковості в поведінці додатки в різних браузерах, тому поведінки веб-елементів в цих браузерах потрібно приділяти особливу увагу.

Chrome і Firefox відносяться до так званим "вічнозеленим" браузерам - вони автоматично оновлюються, як тільки нова версія стає доступною. Оновлюються вони швидко і часто - приблизно раз на місяць. Safari і IE11 оновлюються значно рідше, і їх поновлення зав'язані на відновлення операційних систем.

За змінами браузерів можна стежити, порівнюючи бета-версії цих браузерів, або поточну версію з попередньою. Chrome Canary і Firefox Developer Version дають можливість подивитися на нову версію заздалегідь, як і Safari Technology Preview .

Трохи про обладнання

Якщо у вас є обмеження по обладнанню, а доступ є лише до однієї машини, то, можливо, найкращим варіантом буде вибрати Mac для тестування. Це дозволить вам встановити віртуальну машину з Windows і IE для тестування. На жаль, легально обзавестися віртуальною машиною з Mac Os куди важче, якщо ви тестируете під Windows.

Враховуйте так само, яке обладнання вам знадобиться для тестування в браузерах не для ПК. Safari - стандартний браузер для пристроїв під iOS. Для Android це Chrome, хоча на обох платформах існують і альтернативні браузери, а "рідні" браузери залежать від типу телефону. Наприклад, у Samsung є власний встановлений браузер. Інвестуючи в мобільне тестування, майте під рукою мінімальне і максимальне дозвіл екрану мобільного пристрою. Якщо додаток може використовуватися в інших типах НЕ-десктопних браузерів, то, можливо, хорошою ідеєю буде придбання таких пристроїв, як Xbox, PlayStation, AppleTV або навіть Wii U - у всіх них є специфічні браузери для консольної платформи.

Що ж саме тестувати в різних браузерах?

Залежно від специфіки юзер-сторі, яку ви тестируете, непогано почати з великих змін інтерфейсу або нових фіч, задіяних у всіх тестованих сценаріях. Якщо час на тестування сильно обмежена, сконцентруйтеся на тому, що з високою ймовірністю може зламатися в певних браузерах.

Якщо під рукою є дизайн-макети додатки, використовуйте їх як специфікацію для крос-браузерного тестування. Порівнюючи елементи в макеті і в браузері, ви швидко побачите відмінності, які, можливо, є багом.

Спілкуйтеся з розробниками! Те, як саме вони впроваджували фичу, і те, які обхідні шляхи вони використовували - це важлива інформація, яка може допомогти вам визначити, що вам тестувати, і є спостережувані вами відмінності багами - можливо, це просто специфіка впровадження тієї чи іншої фічі.

З чого почати?

Наведений нижче список - ні в якому разі не є вичерпним, але його можна використовувати як точку відліку.

  • Елементи інтерфейсу. Почніть з них.

- Кнопки, поля, текстова область, фон, панелі повинні виглядати однаково незалежно від браузера.

- Шрифти повинні виглядати однаково.

  • Розмір вікна. Зменшіть розмір вікна до мінімально можливого (в рамках розумного) і переконайтеся, що всі елементи можна використовувати незалежно від розміру екрана. При реактивному дизайні елементи повинні якимось чином схлопуватися, коли розмір екрану зменшується. Пошукайте місця, де цього схлопування не відбулося, але елементи дизайну пропали.
  • DPI. Переконайтеся, що всі елементи вірно відображаються і на екранах з високою роздільною DPI, і на екранах з низьким.
  • Курсори. Якщо вид курсора повинен змінюватися (на руку, приціл, і т. Д.), Переконайтеся, що зміни відбуваються вірно і вчасно.
  • Скролл. Чи можете ви проскролліть екран, чи правильно це відбувається? Тач-пад, тач-кнопка, покажчик миші, колесо миші, кнопки вгору / вниз - все, що має змушувати додаток Скролл, повинно викликати цю дію. Не забудьте перевірити і вертикальний, і горизонтальний скрол там, де можна застосувати обидва.
  • Масштабування. Чи зміниться щось, якщо ви збільшите масштаб відображення сторінки в браузері? Якщо використовується "чуйний" дизайн, елементи повинні змінити свої розміри.

Звертайте увагу на незрозумілі помилки Javascript, пов'язані з поведінкою додатки в браузері. Це поведінка може змінюватися в залежності від наявності відкритих інструментів розробника в процесі тестування. Протестуйте додаток як з відкритими, так і з закритими інструментами. Користувачі в нормі не відкривають панель розробки, користуючись сервісом.

Поради та рекомендації

Нижче кілька порад і рекомендацій, які можуть допомогти при відтворенні багів і оформленні баг-репортів.

Версії браузерів:

  • У Chrome і Firefox по URL "about:" можна знайти інформацію про версію і білді браузера. В IE і Edge ця інформація знаходиться в пункті меню "Про програму" (останній пункт правого меню, що випадає адресного рядка). Для Safari ця інформація сидить в меню "Про Safari", доступному через меню Apple.

Доступ до інструментів розробника

  • У Chrome, Firefox, IE11 і Edge натисніть клавішу F12, щоб відкрити інструменти розробника. Якщо ви дозволили використання цих інструментів в Safari , То вони відкриються або через Command-Option-C, або через Command-Option-I.
  • Деякі інструменти розробника дозволяють емулювати мобільні браузери або представлятися з додатком як інший браузер. У Chrome меню пристрою (Control або Command-Chift-M) дає можливість змінити розмір пристрою. У IE11 є меню, що випадає, що дозволяє змінити версію IE.

Управління зумом:

  • За допомогою миші: не знімаючи фокус з вікна браузера, затисніть Control (або кнопку Command для Mac) і, використовуючи колесо скролла, швидко міняйте масштаб браузера, щоб знайти помилки розмітки сторінки. Це працює і з трекпедом при використанні жестів скролла. На трекпаді Mac браузер Скролл при затиснутому Command і використанні скролла за допомогою двох пальців.
  • За допомогою інструментів браузера: Control (або Command) і кнопки + і - дозволяють змінювати масштаб браузера поуровневого. Повернутися до масштабу за замовчуванням можна за допомогою Control (Command) і кнопки 0.

Очищення кеш-пам'яті і тимчасових файлів браузерів:

  • Chrome, Firefox, IE11 і Edge очищають кеш і тимчасові файли по гарячих клавішах Control-Shift-Delete (Command-Shift-Delete для Mac). У Chrome і Firefox це дія вбиває кеш і тимчасові файли тільки для поточного профілю: інші профілі порушені не будуть. IE11 і Edge потрібно перезапустити після подібного очищення. У Safari, в меню Safari, є пункт "Очистити історію", що виконує аналогічну дію. Йому можна призначити гарячу клавішу через панель "Клавіатура" в системних настройках.

Ізольовані профілі Chrome і Firefox:

  • Firefox і Chrome дають можливість використання різних профілів, які відкривають окремі, повністю ізольовані один від одного сесії браузера. У Chrome для цього потрібно натиснути на назву профілю у верхньому правому куті. Firefox потрібно попередньо налаштувати.
  • Режим "інкогніто" доступний в Chrome, Firefox, Edge, Safari, і Internet Explorer. Він дає можливість відкрити одноразову сесію браузера, яка втрачає свої налаштування і тимчасові файли після закриття. Такий режим ідеальний для тестування ситуацій, для яких зберігання інформації не так уже й важливо. Майте на увазі, що всі інкогніто-вікна одного браузера ділять між собою одну і ту ж сесію. Наприклад, тимчасові файли діляться між активними вікнами браузера, відкритими в режимі інкогніто.

Що далі?

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

Джеймс Бах розповідав про евристику " підстрибом ". Тестування за допомогою цієї евристики дає можливість знайти цікаві баги. Браузери часто використовуються в далеко не ідеальних умовах: вкладки залишаються відкритими тривалий час, браузер висить в режимі очікування, поки користувач працює з іншими додатками, а в тлі щось робить операційна система . Випадкові "стрибки" по продукту в таких недосконалих умовах можуть дати вам інформацію, з якими несподіваними проблемами може зіткнутися користувач.

Використання крос-браузерних інструментів.

Інструменти цілком можуть бути враховані при плануванні крос-браузерного тестування. Наприклад, BrowseEmAll - це інструмент, що дозволяє подивитися на різні графічні движки в одному і тому ж вікні. Користувачі, звичайно, не будуть користуватися цим браузером, але цей інструмент ідеальний для швидкої перевірки відображення загальних елементів, верстки, і відсутнього змісту.

Browserstack - це хмарний інструмент, який запускає різні браузери всередині однієї браузерної сесії. Їх плагін дозволяє отримати доступ до сайтів всередині вашої корпоративної мережі або Фаєрвол. Він чудово підходить для тестування специфічних версій браузера, які можуть бути недоступні на тестовій машіне.браузер запускається у віртуальному режимі. Якщо продукт або додаток спирається на специфічний движок (наприклад, WebGL), така віртуалізація не дасть вам уявлення про поведінку системи в реальному браузері.

Для прогону Автотест в різних браузерах існує маса інструментів. Наприклад, Selenium Grid дозволяє зберігати браузерні сесії і запускати в них Автотест. Якщо підтримка серверів для Selenium Grid фінансово невигідна, можна звернутися до Sauce Labs - вона надає хмарне рішення для хорошого тестового покриття різних браузерів.

Довідкові матеріали:

  1. Surviving CRM - крос-браузерна матриця
  2. Desktop Browser Market Share - Netmarketshare
  3. What are Browser Developer Tools? - Mozilla Developer Network
  4. Firefox and other Browser Keyboard Shortcuts - F. David McRitchie
  5. RapidRelease / Calendar - MozillaWiki

Chromium Development Calendar and Release Info

Обговорити в форумі.

Що це означає?
Навіщо тестувати юзер-сторі в різних браузерах?
Які браузери вибрати для тестування?
На що звертати увагу в процесі?
Що ж саме тестувати в різних браузерах?
З чого почати?
Чи можете ви проскролліть екран, чи правильно це відбувається?
Чи зміниться щось, якщо ви збільшите масштаб відображення сторінки в браузері?
Що далі?

Новости