ТЕСТУВАННЯ КОРИСТУВАЛЬНИЦЬКОГО ІНТЕРФЕЙСУ МОБІЛЬНОГО ДОДАТКУ - Наукові конференції

Вас вітає Інтернет конференція!

Вітаємо на нашому сайті

Рік заснування видання - 2011

ТЕСТУВАННЯ КОРИСТУВАЛЬНИЦЬКОГО ІНТЕРФЕЙСУ МОБІЛЬНОГО ДОДАТКУ

04.11.2022 02:07

[1. Інформаційні системи і технології]

Автор: Шклярський Сергій Михайлович, кандидат економічних наук, доцент, Державний торговельно-економічний університет, м. Київ


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

Як правило, розробники додатків в 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 Ця робота ліцензується відповідно до Creative Commons Attribution 4.0 International License
допомога Знайшли помилку? Виділіть помилковий текст мишкою і натисніть Ctrl + Enter
Конференції

Конференції 2024

Конференції 2023

Конференції 2022

Конференції 2021



Міжнародна інтернет-конференція з економіки, інформаційних систем і технологій, психології та педагогіки

Наукова спільнота - інтернет конференції

:: LEX-LINE :: Юридична лінія

Інформаційне суспільство: технологічні, економічні та технічні аспекти становлення