Работа с Appium Inspector

UI Приложений на ОС Аврора построен с помощью QML страниц. Для просмотра структуры страниц с новыми версиями Appium можно использовать Appium Inspector.

Предварительные условия
Установка и запуск
Панель управления
Структура страницы
Работа с UI элементами

Предварительные условия

Для успешной работы с Appium Inspector требуется, чтобы на устройстве был установлен и активирован qtium-driver (через соответствующий пункт меню Режима разработчика в Настройках).

Установка и запуск

В данном руководстве рассматривается работа Appium Inspector на примере ОС Ubuntu 24.04.1.

При работе с другими операционными системами процесс установки и запуска необходимо адаптировать в соответствии с их особенностями.

Скачать подходящий релиз формата AppImage (версии <2025.7.3):

wget https://github.com/appium/appium-inspector/releases/download/v2025.7.3/Appium-Inspector-2025.7.3-linux-x86_64.AppImage

Выдать разрешение на запуск:

chmod +x Appium-Inspector-2025.7.3-linux-x86_64.AppImage

Запустить Appium Inspector:

./Appium-Inspector-2025.7.3-linux-x86_64.AppImage

Панель управления

Для начала работы с утилитой в поле Remote Host необходимо задать IP адрес контейнера appium (например, 127.0.0.1), в поле Remote Port задать порт контейнера Appium (по умолчанию — 4723):
Далее необходимо заполнить поля на вкладке Capability Builder. В полях необходимо указать правильные capabilities, аналогично созданию обьекта драйвера в автотестах.

Для упрощения заполнения можно использовать JSON Representation. Для этого необходимо нажать на кнопку Edit Raw JSON:

И затем вставить в текстовое поле JSON аналогичную конфигурацию:
```
{
    "automationName": "Aurora",
    "platformName": "Aurora",
    "platformVersion": "2.2",
    "newCommandTimeout": 86400,
    "appPackage": "ru.auroraos.ApplicationTemplate",
    "deviceName": "192.168.2.15",
    "autoLaunch": false,
    "appiumInspector": true
}
```
При необходимости можно изменить значение поля appPackage на имя желаемого приложения и значение поля deviceName на IP адрес устройства с запущенным qtium-driver.
Сохранить конфигурацию, нажав кнопку Save:
После сохранения конфигурации можно установить соединение с приложением, нажав кнопку Start Session в нижнем правом углу:

После успешной установки соединения с приложением появится интерфейс работы с ним, включающий различный функционал:

Структура страницы

Ниже приведены различные представления структуры одной и той же страницы.

Представление страницы в QML коде:

import QtQuick 2.5
import Sailfish.Silica 1.0
import org.nemomobile.calendar 1.0

Page {
	id: root

	property QtObject event
	property QtObject occurrence
	property var saveStartedCb

	property bool _smallLandscape: isLandscape && Screen.sizeCategory <= Screen.Medium

	Label {
		objectName: "recurringEvent"
		x: Theme.horizontalPageMargin
		y: _smallLandscape ? Theme.paddingLarge : Theme.itemSizeExtraLarge
		width: parent.width - Theme.horizontalPageMargin * 2
		color: Theme.highlightColor
		font.pixelSize: Theme.fontSizeExtraLarge
		wrapMode: Text.Wrap
		horizontalAlignment: Text.AlignHCenter
		//% "This is a recurring event"
		text: qsTrId("calendar-event-he-edit_recurring")
	}

	Column {
		anchors {
			bottom: parent.bottom
			bottomMargin: _smallLandscape ? Theme.itemSizeExtraSmall : Theme.itemSizeMedium
			horizontalCenter: parent.horizontalCenter
		}

		spacing: Theme.paddingMedium

		Button {
			id: editThisEvent

			objectName: "editThisEvent"
			width: editSeries.width
			//% "Change event"
			text: qsTrId("calendar-event-change_occurrence")
			onClicked: {
				if (isTablet) {
					root.pageContainer.animatorReplace(eventEditPageComponent,
													{ event: root.event,
														occurrence: root.occurrence,
														saveStartedCb: root.saveStartedCb })
				} else {
					root.pageContainer.animatorReplace("EventEditPage.qml",
													{ event: root.event,
														occurrence: root.occurrence,
														saveStartedCb: root.saveStartedCb })
				}
			}
		}

		Label {
			objectName: "editThisEventDecription"
			width: editThisEvent.width
			color: Theme.highlightColor
			font.pixelSize: Theme.fontSizeSmall
			wrapMode: Text.Wrap
			//% "The changes will not affect other events in the series."
			text: qsTrId("calendar-event-change_occurrence_description")
		}

		Item {
			width: parent.width
			height: Theme.paddingLarge * 2
		}

		Button {
			id: editSeries

			objectName: "editSeries"
			preferredWidth: Theme.buttonWidthLarge
			//% "Change the series"
			text: qsTrId("calendar-event-change_all_occurrences")
			onClicked: {
				if (isTablet) {
					root.pageContainer.animatorReplace(eventEditPageComponent, { event: root.event })
				} else {
					root.pageContainer.animatorReplace("EventEditPage.qml", { event: root.event })
				}
			}
		}

		Label {
			objectName: "editSeriesDecription"
			width: editSeries.width
			color: Theme.highlightColor
			font.pixelSize: Theme.fontSizeSmall
			wrapMode: Text.Wrap
			//% "Changes will be made to all events in the series."
			text: qsTrId("calendar-event-change_all_occurrences_description")
		}
	}
}

UI представление страницы:
Представление страницы в Appium Inspector:

По нажатию ЛКМ на конкретном UI элементе откроется окно с его свойствами:

Работа с UI элементами

Для работы с определенным UI элементом необходимо его выделить из списка других в дереве страницы, используя отличие в его атрибутах от других элементов.

Appium Inspector позволяет осуществлять поиск элементов по следующим атрибутам:

ID;
XPath;
СlassName.

Чтобы осуществить поиск по атрибуту, необходимо:

Нажать на кнопку Search for element на верхней панели Appium Inspector:

При нажатии на неё откроется окно для поиска:
Выбрать нужный атрибут из списка выше для поиска, затем заполнить поле Selector соответствующим значением. Например, для атрибута XPath поле Selector можно заполнить значением//PageStack. При нажатии на кнопку поиска Search появляются элементы, подходящие под атрибуты поиска:

В дальнейшем при использовании селектора можно быть уверенным, что qtium-driver будет взаимодействовать именно с найденным элементом.

Поиск по ID

С помощью данного способа можно найти элемент по свойству objectName у обьектов. Это самый однозначный, оптимизированный и быстрый способ найти нужный элемент. Однако не стоит переусердствовать с добавлением objectName при разработке собственного приложения, так как чрезмерно большое количество таких атрибутов может привести к замедлению работы UI.

Поиск по XPath

В работе с приложениями далеко не всегда удается найти простой и уникальный селектор для элемента. Лучшим вариантом решения такой проблемы является добавление objectName, однако это не всегда возможно сделать быстро и удобно. В такой случаях рекомендуется использовать язык запросов XPath.

XPath (XML Path Language) — это язык запросов, который использует древовидную структуру документа. С синтаксисом языка можно ознакомиться здесь.

Существуют следующие базовые правила для работы с XPath:

XPath запрос всегда начинается с символа / или //. Они используются следующим образом:
- el1/el2 — выбирает элементы el2, являющиеся прямыми потомками el1;
- el1//el2 — выбирает элементы el2, являющиеся потомками el1 любой степени вложенности.
'[ ]' — команда фильтрации. Если по запросу найдено несколько элементов, то будет произведена фильтрация по правилу, указанному в скобках. Существует множество вариантов фильтрации, ниже приведены некоторые из них:
- по атрибуту — например, если нужно найти элемент с классом LabelBase, у которого атрибут text содержит определенное значение, то поиск осуществляется так: //LabelBase[text()='Изменить событие'];
- по индексу — при наличии нескольких элементов можно обратиться к определённому элементу в списке, например, //Button[2] найдет второй элемент на странице с классом Button;
- по частичному совпадению атрибута — например, //LabelBase[contains(text(), 'Сегодня')] найдет элементы, у которых класс LabelBase и текст содержит слово "Сегодня", например "Сегодня, 20 апреля".
Поиск по классу в XPath зависит от регистра.

Поиск по ClassName

У всех элементов на странице есть класс.

При открытии свойства элемента можно увидеть значение класса в поле ClassName. На странице из примера выше есть две кнопки с атрибутом ClassName: Button. При поиске по ClassName Appium Driver покажет все элементы, имеющие такой же ClassName.