Адаптивне тестування веб-дизайну: Повний посібник для початківців

responsive web design testing

У наш час використання мобільних пристроїв для доступу до Інтернету зросло і стало досить популярним. Майже кожен користувач Інтернету бажає мобільної версії веб-сайту.

Однак більшість веб-сайтів не настільки оптимізовані, як це повинно бути для мобільних пристроїв. Тестери повинні виконати мобільний адаптивний тест на адаптивних дизайнах.

Традиційні програмні продукти відображають по суті те саме на будь-якому пристрої.

Microsoft Office, наприклад , виглядає однаково на кожному персональному комп’ютері. Уявіть, що ви берете Microsoft Word точно так, як він працює на вашому робочому столі, і переглядаєте його на iPhone4. Або меню, і кнопки з’являться крихітними, інакше ви побачите лише кут екрана, і вам потрібно використовувати великі смуги прокрутки. У будь-якому випадку, програма стає по суті непридатною для використання.

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

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

Це означає стратегію тестування (і стратегію автоматизації), яка повинна мати можливість експериментувати та вивчати, що 'виглядає правильно', а що ні, з різною роздільною здатністю.

Що ви дізнаєтесь:

• Посібник для початківців з тестування чуйних дизайнів веб-сайтів
  • Що таке адаптивний веб-дизайн?
  • Переваги адаптивного дизайну:
  • Основні компоненти адаптивного дизайну веб-сайту:
  • Адаптивні приклади веб-дизайну
  • Як протестувати чуйний веб-сайт
  • Приклади сценаріїв тестування для адаптивного тестування веб-сайтів:
  • Інструменти для перевірки адаптивного веб-сайту
  • Проблеми тестування адаптивного дизайну та можливі рішення
  • Поради щодо адаптивного веб-тестування
• Висновок
  • Рекомендована література

Посібник для початківців з тестування чуйних дизайнів веб-сайтів

Коли ми намагаємося відкрити веб-сайт, сервер читає “ m.sub-домени ”, Щоб визначити, з якого мобільного пристрою походить запит. Виходячи з цього, він перенаправляє користувача на відповідну мобільну версію.

Щоб зробити це на 100% ефективним, кожен пристрій повинен мати свій власний дизайн веб-сайту, спеціально розроблений для нього; fабо приклад,інший специфічний дизайн для Blackberry, iPhone, iPad тощо з урахуванням розміру екрана та роздільної здатності.

Однак різні веб-версії для будь-якої роздільної здатності та пристрою не є практичними. Ітан Маркотт запропонував новий підхід - адаптивний веб-дизайн ( RWD ) - це вирішує цю проблему.

Наша рекомендація

# 1) LT-браузер

LT браузер допомагає користувачам протестувати та налагодити свій веб-сайт у 45+ вікнах перегляду пристроїв. Перевірте свій веб-сайт на різних попередньо встановлених портах перегляду мобільних та настільних пристроїв за допомогою LT Browser, зручного для розробників браузера для налагодження мобільного перегляду.

Просто введіть URL-адресу свого веб-сайту, виберіть пристрій, на якому буде тестуватися ваш веб-сайт. Ви можете одночасно вибрати два пристрої для порівняння виглядів поруч.

Не лише тестування, але й користувачі можуть також налагоджувати свій веб-сайт у дорозі за допомогою вбудованих DevTools, пропонованих LT Browser.

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

Що таке адаптивний веб-дизайн?

RWDцілі для веб-сайтів, щоб вони реагували на свій пристрій, роздільну здатність і мали можливість правильно відображати та адаптувати. Наприклад, якщо користувач переходить з робочого столу / ноутбука на iPad, то веб-сайт повинен автоматично адаптувати зміни роздільної здатності, такі як розмір зображення тощо відповідно до можливостей відповідного пристрою.

Коротко,Чуйний дизайнє “Один веб-сайт на кожен екран” .

Нижче наведено екранприкладRWD:

Примітка: Реальний часприклададаптивного веб-сайту www.fpl.com

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

• Адаптивні веб-сайти кодуються в PHP, .Net, Java, CQ5 (Adobe Experience Manager - AEM) та багатьох нових фреймворках, які дуже зручні для розробки адаптивних дизайнів.
• Функції CSS та HTML використовуються для того, щоб дозволи екрана та зображення автоматично змінювалися.
• Дизайн RW використовує точки зупинку для ідентифікації макета сайту. Кожна конструкція використовується на різних точках розриву. Один дизайн застосовується над точкою розриву, тоді як інший дизайн використовується нижче точки розриву. Ці точки зупинки, як правило, залежать від ширини браузерів.
• Розробляючи адаптивний веб-сайт, розробники враховують вміст, дизайн та продуктивність сайту на всіх пристроях забезпечити зручність користування .

Діаграма є точним порівнянням того, як вміст адаптується до середовища та поведінки пристрою.

Примітка : Крім RWD, існує інший підхід, який називається Адаптивний веб-дизайн ( Повний привід ) . У підході AWD для кожного пристрою буде передбачена конкретна конструкція. Однак AWD може бути непридатним постійно. Крім того, проектування сайтів AWD вимагає більше часу та грошей у порівнянні з сайтами RWD.

Переваги адаптивного дизайну:

# 1) Досвід користувача: На основі пристрою, з якого ми отримуємо доступ до RW, він приховує незвичні елементи та допомагає користувачам швидше досягти своїх цілей.Наприклад:якщо ми відкриваємо RW з мобільного, то він приховує неважливі елементи та пришвидшує завантаження веб-сторінок.

# два) Спільний доступ або посилання: Для RW використовується лише одна URL-адреса для різних пристроїв. Оскільки лише одна URL-адреса накопичує всі дані та інформацію з різних пристроїв, це дає кращий інтерфейс для користувачів.

# 3) Для РАВ необхідне незначне або мінімальне обслуговування.

# 4) Макети РАВ є текучими.

Відмінності між адаптивним веб-дизайном та адаптивним веб-дизайном:

RWD та AWD тісно пов’язані між собою.

• RWD швидко і позитивно реагує на зміни, тоді як AWD можна легко модифікувати для нової мети.
• RWD має кілька макетів рідинної сітки, а AWD має кілька макетів фіксованої ширини.
• Зображення в RWD називаються контекстними.

Основні компоненти адаптивного дизайну веб-сайту:

Адаптивний веб-дизайн має три основні компоненти:

# 1) Гнучкі макети: Створення веб-сайту з гнучкою сіткою, яку можна легко динамічно змінювати на будь-яку ширину.

# два) Медіа-запити: Надайте різні стилі для браузерів та пристроїв на основі контексту, такі як орієнтація пристрою, область перегляду тощо.

# 3)Гнучке середовище: Оскільки розмір вікон перегляду змінюється, носії (зображення, відео тощо) також повинні змінювати свій розмір або роздільну здатність відповідно до вимог.

Примітка : “Viewport” - це область браузера, де відображається фактичний вміст веб-сайту. Viewport не включає панелі інструментів, вкладки тощо.

Адаптивні приклади веб-дизайну

Приклад №1)

Відкрийте посилання www.fpl.com з різних пристроїв і відстежуйте URL-адресу. URL-адреса адаптивного веб-сайту залишається незмінною для всіх пристроїв.

до) Вид RW з робочого столу або ноутбука (великий розмір екрану)

б) Вид RW з планшета (середній розмір екрану)

в) Вид RW з мобільного (невеликий розмір екрану)

Приклад №2)

Відкрийте сайт www.yepme.com з ноутбука, а також з мобільного та порівняйте URL-адреси. Це yepme.com посилання не є адаптивним посиланням.

до) Перегляд веб-сайту, що не відповідає, із робочого столу чи ноутбука

Як відкрити торрент-файл на

б) Перегляд веб-сайту, що не відповідає, з мобільного пристрою

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

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

Можливий спосіб адаптивного тесту - це зміна розміру вікна браузера відповідно до сценарію тесту.

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

Інші браузери, такі як Chrome, пропонують програмне забезпечення або програму під назвою “Емулятор” що допоможе змінити функції екрану та середовище відповідно до потрібного пристрою, необхідного для тестування.

Примітка: “Емулятор” - це програмне забезпечення або програма, яка надається у браузері, що змушує хост-систему (поточний браузер) поводитись як гостьова система (браузер потрібного пристрою, який перевіряється на бажаний розмір екрану).

Незважаючи на те, що емулятори не можуть дати вам точного середовища, необхідного для тестування, вони є економічно вигідним рішенням для тестування РАВ на високому рівні.

Приклади сценаріїв тестування для адаптивного тестування веб-сайтів:

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

# 1) Адаптивне посилання на веб-сайт або URL-адреса повинні бути однаковими для всіх браузерів на кожному пристрої, незалежно від роздільної здатності екрана.

Припустимо www.abc.com є адаптивним веб-сайтом. Якщо ми відкриваємо його на ноутбуці та мобільному телефоні, URL-адреса повинна бути однаковою на обох пристроях. Веб-сайт, відкритий у мобільному браузері, не повинен починатися з www.m.abc.com або www.mobile.abc.com

Приклад: Відкрийте веб-сайт www.kotak.com з ноутбука, а також відкрити те ж саме з мобільного і відстежувати URL-адресу на обох пристроях. URL-адреса не однакова для обох пристроїв.

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

Відкрийте веб-сайт www.w3schools.com з ноутбука та мобільного телефону та перевірте URL-адреси. Він повинен бути однаковим для обох пристроїв.

Нижче на знімку показано, що URL-адреса залишається незмінною для адаптивного веб-сайту на різних пристроях:

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

Приклад: Відкрийте посилання www.fpl.com з ноутбука та натисніть на меню у верхньому правому куті вікна. Параметри меню відображаються, як показано нижче:

шлюз за замовчуванням недоступний Windows 7

відчинено www.fpl.com з мобільного та натисніть на меню у правому верхньому куті вікна. Параметри меню наведені нижче:

Примітка: Цей сценарій також можна протестувати за допомогою емуляторів браузера (Колишній:хром).

Відкрийте веб-сайт www.fpl.com через робочий стіл і спостерігайте, як відображаються параметри меню. Дивіться знімок нижче:

Тепер змініть розмір вікна браузера до розміру екрану для мобільних пристроїв, а потім перевірте відображення параметрів меню. Дивіться знімок нижче:

# 3) URL-адреси адаптивного веб-сайту також повинні визначати роздільну здатність.

Передумова для тестування цього сценарію: Попросіть розробника вставити будь-яке підсила на веб-сайт адаптивного тестування, де це посилання не відповідає.

Наприклад, розробник може вставити посилання www.snapdeal.com на наш тестовий веб-сайт.

Тепер відкрийте веб-сайт адаптивного тестування з мобільного пристрою та натисніть на посилання, зазначене в умові. Тоді URL-адреса вкладеного посилання має змінитися на https://m.snapdeal.com .

# 4) Той самий сценарій можна протестувати і з ноутбука. Відкрийте RW із робочого столу або ноутбука та клацніть на посилання (згадане в попередній умові тестового сценарію три), яке не відповідає. URL-адреса вкладеного посилання не повинна змінюватися (оскільки ми тестуємо цей сценарій із ноутбука, URL-адреса повинна залишатися незмінною).

# 5) Передумова для тестування цього сценарію: Попросіть розробника вставити будь-яку підсилку,наприклад, www.paytm.com на сайт тестування. Мобільний пристрій, на якому ви збираєтеся виконати цей сценарій, повинен мати відповідну програму Paytm, встановлену на мобільному телефоні.

Тепер відкрийте наш тестуючий адаптивний веб-сайт із мобільного пристрою та натисніть на посилання “paytm”. Потім слід відкрити додаток Paytm, який встановлено на мобільному телефоні. (Користувача не слід перенаправляти на веб-сайт у браузері або в інше вікно; має бути відкрита лише програма.)

# 6) Зображення на адаптивному веб-сайті мають роздільну здатність. Це означає, що роздільна здатність зображення, вставленого в код адаптивного веб-сайту, призначеного для мобільної сумісності, відрізняється від роздільної здатності робочого столу або планшета. Кожен розмір екрану повинен мати своє конкретне зображення в дизайні.

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

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

(АБО)

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

Приклад: Відкрийте адаптивний сайт www.fpl.com з робочого столу; клацніть правою кнопкою миші на зображенні на домашня сторінка -> виберіть 'Перевірити' з меню. Перевірте роздільну здатність зображення (перевірте розширення імені файлу зображення .jpg) із коду. Дивіться знімок екрана нижче:

Тепер змініть розмір того самого вікна до розміру екрана планшета та перевірте роздільну здатність зображення. (Розширення імені зображення є середнім.jpg)

Нарешті, зменште розмір вікна до розміру екрана мобільного телефону та перевірте зображення. (Розширення імені зображення є невеликим.jpg)

# 7) Клацніть випадковим чином у будь-якому місці веб-сторінки та перевірте, чи не ініціюються та не перенаправляються будь-які дані чи текст, які не мають гіперпосилань, на будь-яку іншу сторінку чи вміст. Це перевіряє, чи позначено будь-яке слово чи текст гіперпосиланням у задній кінець .

Примітка : У кількох проектах вимоги говорять про розмір пікселів та роздільну здатність екрана для певних пристроїв. (Наприклад, вигляд планшета для їх RW повинен бути на 15:15 пікселів, а для мобільних - на 10:10 тощо).

Основним сценарієм є тестування динамічних змін, які мають відбутися для дисплея RW при зміні розміру пікселя.

# 8) Відкрийте наш тестовий RW у браузері та перегляньте вміст та відображення основних зображень. Тепер змініть розмір вікна до точки зупинки розміру планшета та перевірте зміни, які мають відбутися в роздільній здатності зображення та будь-якому іншому вмісті. У точках розриву зміни повинні відбуватися динамічно (іноді зміни не відбуваються в точках розриву і можуть змінюватися при інших розмірах пікселів, що є дефектом.)

Інструменти для перевірки адаптивного веб-сайту

Є небагато інструментів (веб-сайтів), які дозволять вам переглянути веб-сторінки нашого адаптивного веб-сайту.

Наприклад,ми можемо протестувати наш адаптивний сайт із різними заздалегідь визначеними роздільними здатностями екрана (смартфони, планшети тощо), а також налаштувати на будь-яку бажану роздільну здатність. Ці інструменти роблять тестування простішим та швидшим. Такі інструменти в браузері можна назвати як Відповідач .

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

Ці інструменти є чудовою альтернативою, коли фактичні пристрої недоступні або готові.

Ось короткий список інструментів:

# 1) Чуйний дизайн перевірки

Введіть URL-адресу адаптивного веб-сайту, який потрібно протестувати, у вищевказаному полі «Введіть тут свою URL-адресу» та натисніть «ПЕРЕЙТИ». Ви навіть можете вибрати пристрій та роздільну здатність, з якою ви хочете переглянути адаптивний сайт.

Тепер увійдіть www.fpl.com у полі виберіть макет “Nexus 7 PORTRAIT” і натисніть GO. Сайт відображається у роздільній здатності обраного формату.

# два) Екран

Зайдіть на сайт тестування www.fpl.com і натисніть GO.

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

Наприклад, встановіть роздільну здатність екрана на 512 x 256 і протестуйте сайт.

Примітка : За допомогою цього інструменту ви навіть можете протестувати сценарій 6 легко змінюючи роздільну здатність та перевіряючи імена зображень.

# 3) Designmodo

Введіть будь-яку URL-адресу, www.makemytrip.com і натисніть Enter.

У правій верхній частині браузера ви можете змінити макет веб-сайту на будь-яку конкретну мобільну модель чи пристрій тощо.

Примітка : Цей інструмент має ще одну функцію, як перетягування екрана та зміна роздільної здатності до бажаної роздільної здатності.

# 4) isBesponsive

Введіть тестувальну URL-адресу, www.fpl.com у полі та натисніть кнопку “Тест”.

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

# 5) Меткерслі

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

Тепер введіть URL-адресу для тестування в адресному рядку та натисніть Enter. Ви можете одночасно переглядати RW на різних розмірах екрана.

# 6) За замовчуванням, У chrome небагато засобів розробки за допомогою якого ми можемо імітувати режим пристрою та їх можливості.

Щоб використовувати цю функцію chrome, відкрийте будь-який веб-сайт, що відповідає тестуванню, наприклад www.fpl.com у chrome та клацніть правою кнопкою миші на веб-сторінці та виберіть у меню опцію “Перевірити” або натисніть Ctrl + Shift + I. У нижній частині веб-сторінки відкриється вікно нижче.

Тепер натисніть на піктограму, як показано на знімку екрана нижче.

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

Примітка: Ми також можемо змінити веб-сторінку на книжкову або альбомну.

Інші хороші інструменти для тестування адаптивного дизайну:

7) ResponsiveDesign
8) BrowserStack
9) Троя
10) AmIResponsiveDesign
одинадцять) Відповідач
12) Studiopress
13) ResponsiveTest
14) Для машин MAC ми маємо окремий додаток, який називається “ ФІТ ”Для тестування RW. Ця програма дозволяє встановлювати різні точки зупинки на різних пристроях для тестування. APTUS - це не безкоштовна програма, і ми маємо придбати її в магазині Mac App Store.

Проблеми тестування адаптивного дизайну та можливі рішення

Стратегія динамічного тестування

Перехід від 320 × 480 (роздільна здатність iPhone4) до 2048 × 2048 (великий монітор) залишає понад 4 мільйони можливих розмірів браузера. Більшість тестових груп звузить перелік тестових пристроїв до декількох. Навіть тоді проблему ручного тестування важко або неможливо підійти.

Розробники не можуть передбачити всі проблеми платформи, і тестери не можуть їх зловити до випуску. Через це ми періодично виявляємо проблему з користувальницьким інтерфейсом у виробництві.

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

Давайте подивимось нареалістичний прикладдля ілюстрації проблеми.

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

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

Стандартні дані гарантують, що вміст сторінки буде виглядати однаково кожного разу, коли ми завантажуємо тестове середовище. Ця стратегія поєднується з чимось на зразок Sauce Labs, що дає людям доступ до багатьох платформ, і ви отримуєте досить далеко.

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

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

Давайте розглянемо приклад.

Розглянемо мобільний додаток Twitter.

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

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

Наприклад, ви могли бачити, що поля для твітів існують, що кожен твіт має елемент імені та елемент дати / часу, не турбуючись про те, що в елементах.

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

Адаптивне тестування на чуйний дизайн:

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

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

Збільшення кількості середовищ лише за допомогою механізму автоматизації створює кошмар технічного обслуговування та потенційно додає нерозв'язну проблему тестування.

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

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

Поради щодо адаптивного веб-тестування

# 1) Під час тестування RW ви повинні пам’ятати про узгодженість дизайну, наприклад, вирівнювання зображень, текстів, відступів по краях тощо у всіх браузерах та операційних системах.

# два) Під час тестування РАВ тестувальник повинен знати, що тестувати та як тестувати на декількох пристроях у різних точках зупинки. Інакше це може бути досить вичерпним та дезорієнтуючим.

# 3) Для ретельного тестування адаптивного веб-сайту необхідна координація тестувальника та розробника. Розробник повинен допомогти тестувальникам у створенні умов, зазначених у передумовах тестових кейсів.

# 4) Перевірте, чи доступні для читання веб-сторінки з будь-якою роздільною здатністю, тобто вміст повинен бути читабельним, навіть якщо розмір браузера змінюється до розміру екрана для мобільних пристроїв.

перетворити символ у рядок c ++

# 5) Важливий вміст RW повинен бути видимим для всіх точок зупинки, тобто якщо ми змінимо розмір браузера з екрану робочого столу на екран мобільного, то основні зображення, основний текст, меню тощо повинні залишатися незмінними.

# 6) Якщо розмір браузера змінено для тестування, будь-яка область клацання (наприклад, кнопки, меню, підсилки тощо) RW повинна бути придатною для клацання.

# 7) Змінення розміру браузера та тестування адаптивного веб-сайту може виявити лише декілька основних проблем, тоді як на мобільних пристроях може бути кілька інших проблем, пов’язаних з пальцями, натисканням тощо. Тестування цих особливостей на власних пристроях може призвести до кращого виявлення та усунення дефектів.

Висновок

Коли ми тестуємо, адаптивний дизайн матиме багато проблем. Ви повинні ефективно думати, щоб подолати виклики.

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

Впровадження та ретельне тестування RWD - це чудовий спосіб налаштувати свій сайт відповідно до очікувань.

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

Про автора: Це гостьовий допис Лакшмі. Вона має 7+ років досвіду тестування програмного забезпечення і зараз працює старшим інженером з тестування програмного забезпечення.

Спробуйте всі приклади, наведені в цій статті, і повідомте нам, якщо у вас є запитання / коментарі до них.

Рекомендована література

• Альфа-тестування та бета-тестування (повний посібник)
• Повне керівництво з тестування перевірки складання (тестування BVT)
• Функціональне тестування проти нефункціонального тестування
• Типи тестування програмного забезпечення: різні типи тестування з деталями
• Найкращі засоби тестування програмного забезпечення 2021 р. (Інструменти автоматизації тестування якості)
• Підручник з тестування сховища даних ETL (повний посібник)
• Посібник із тестування безпеки веб-додатків
• Найкращі послуги з контролю якості програмного забезпечення від SoftwareTestingHelp