Congratulation from Internet Conference!
Hello
ТЕСТУВАННЯ КОРИСТУВАЛЬНИЦЬКОГО ІНТЕРФЕЙСУ МОБІЛЬНОГО ДОДАТКУ
04.11.2022 02:07
[1. Information systems and technologies]
Author: Шклярський Сергій Михайлович, кандидат економічних наук, доцент, Державний торговельно-економічний університет, м. Київ
Незважаючи на потужні середовища та фреймворки, процеси створення, підтримки та реінжинірингу кодової бази мобільних додатків є доволі трудомісткими та витратними. Тому в індустрії програмного забезпечення багато уваги приділяється побудові інструментів та технологій, що забезпечують розробників засобами швидкого створення надійної кодової бази, тестування та впровадження додатків.
Як правило, розробники додатків в React Native, Flutter чи Ionic використовують фреймворки та бібліотеки Karma, Jest, Jasmine та тому подібні, як середовище для апостеріорного тестування мобільних додатків. Це пов’язано з тим, що дані засоби ефективні для тестування логіки бізнес-компонент, але мало підходять для написання UI/UX тестів.
Нами запропоновано, розроблено та апробовано архітектурне рішення для підтримки процесів тестування користувальницьких інтерфейсів в мобільній розробці, схема якого наведена на рисунку 1.
Рис. 1. Схема тестування UI/UX для мобільної розробки
Елементом, що виповідає за інтерпретацію UI-компонент є браузер (Chrome, FireFox, Safari) або відповідна компонента WebView у випадку незалежного додатка. Браузер обробляє UI-компоненту, що тестується за допомогою серверу розробки devserver, який є присутнім у більшості сучасних фреймворків. Наприклад, у фреймворку Ionic/Cordova [1, 2] цей сервер завантажується на localhost:8100 та взаємодіє з браузером (крок 2).
На третьому кроці, під управлінням WebDriver пакету Selenium підключаються заздалегідь написані тести, що містять алгоритми перевірки функціоналу відповідної UI-компоненти. Ці тестові сценарії готуються за допомогою спеціальних бібліотек, у нашому випадку — це PyTest [3], але може бути використаний будь-який інструмент тестування: UnitTest, Jest, Jasmine та інші.
На передостанньому четвертому кроці, результати прогону тестів через браузер порівнюються з очікуваною поведінкою UI-компоненти, та у разі появи “червоних” тестів, процес повторюється (крок 5) до тих пір, поки функціонал компоненти, що розробляється, не буде відповідати очікуваному, тобто на виході п’ятого кроку ми не отримаємо “зелені” тести.
В якості успішного використання вищенаведеної методики можна навести приклад розробки та відлагодження UI-інтерфейсу мобільного додатку “Розклад КНТЕУ” [4].
Користувальницький інтерфейс додатку розроблявся на фреймворку Ionic, який базується на технологіях AngularJS, що використовують механізм управління UI на основі тіньового DOM. Тому в проекті додатково було використано можливості бібліотеки pyshadow, яка розширює можливості Selenium по доступу до динамічних dom-об’єктів, що створюються на етапі компіляції angular-компонент.
На рисунку 2 наведено фрагмент тестового сценарію, який призначено для тестування компоненти головного меню додатку.
Рис 2. Фрагмент коду тестового сценарію для головного меню
Функція test_home_page_button запускає вікно браузера Chrome в середовищі серверу розробки на локальному порту 8100 та перевіряє, чи активується веб-елемент sidebar після події ‘натискання’ на кнопці головного меню. Якщо компонента головного меню ще не створена, або працює з помилками, тест буде відпрацьовуватись с помилкою AssertionError до тих пір, поки розробник не доведе кодову базу UI компоненти до стану, що заздалегідь покладено у тестовий сценарій. Подальша поведінка компоненти перевіряється наступними тестами.
Таким чином, вищенаведений підхід, дає розробникам наступні можливості та переваги перед традиційним технологіями тестування:
• швидке створення прототипів для перевірки UI/UX функціоналу;
• можливості проєктування “зверху-вниз”, моделюючи в тестах абстрактні сутності окремих компонент;
• всебічне охоплення кодової бази додатка тестами, які в подальшому можна використовувати в неперервної інтеграції — неперервному розгортанні CI/CD, а також в підготовці супроводжувальної документації.
Література
1. The mobile SDK for the Web. URL: https://ionicframework.com
2. Apache Cordova. URL: https://cordova.apache.org
3. Pytest. URL: https://docs.pytest.org/en/7.2.x/contents.html
4. Розклад КНТЕУ.
URL: https://play.google.com/store/apps/details?id=ek.knteu.timetable
Ця робота ліцензується відповідно до Creative Commons Attribution 4.0 International License
Знайшли помилку? Виділіть помилковий текст мишкою і натисніть Ctrl + Enter
Another articles in this section
-
МЕТОД СТВОРЕННЯ ВІДМОВОСТІЙКИХ БАЗДРОТОВИХ СИСТЕМ У СУЧАСНИХ ВИРОБНИЦТВАХ
31.10.2022 17:13 -
PROJECT MODELS OF DEVELOPING THE DISTRIBUTIVE CHANNELS AND NETWORKS
16.11.2022 23:23 -
ЗАСТОСУВАННЯ АПАРАТУ НЕЧІТКОЇ ЛОГІКИ ПРИ СТВОРЕННІ АПАРАТНО-ПРОГРАМНИХ ЗАСОБІВ ВИЯВЛЕННЯ КОМП’ЮТЕРНИХ АТАК
16.11.2022 16:31 -
СУЧАСНІ ПРИСТРОЇ ТА ТЕХНОЛОГІЇ ІДЕНТИФІКАЦІЇ ОСОБИ
16.11.2022 13:33 -
РОЗПІЗНАВАННЯ ЗОБРАЖЕНЬ ОСНОВІ МЕТОДІВ ОБЧИСЛЮВАЛЬНОГО ІНТЕЛЕКТУ
16.11.2022 13:29
Сonferences
Conference 2024
Conference 2023
Conference 2022
Conference 2021
