Инструменты позиционирования элементов

В этой главе объясняется Android / IOSОбычно используется Инструменты позиционирования элементы, включая нативные (APP), веб- (WEBVIEW) и гибридные (APP и WEBVIEW).

Глава 1 Android

1.1APP

1.1.1uiautomatorviewer

uiautomatorviewer — это инструмент в Android SDK. Этот инструмент находится в папке инструментов в каталоге Android SDK. uiautomatorviewer прост в использовании и относительно быстр.

Операции в основном такие же в средах Windows/Mac и объясняются здесь с использованием Windows. Используйте команду adb devices, чтобы проверить, подключен ли эмулятор или реальное устройство. Устройство подключается, как показано на рисунке.

В симуляторе или реальном устройстве откройте приложение приложения, в котором вы хотите разместить элемент, и перейдите на страницу, которую вы хотите разместить. Затем дважды щелкните, чтобы открыть файл uiautomatorviewer.

После того, как откроется инструмент uiautomatorviewer, нажмите кнопку фотографии в верхнем левом углу.

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

Если вам нужно продолжить поиск элементов на других страницах, переместите устройство на страницу, на которой вы хотите найти элемент, и снова нажмите кнопку фотографии в верхнем левом углу инструмента, чтобы получить последнюю информацию об элементе страницы.

Нажмите кнопку «Сохранить», чтобы сохранить снимок экрана страницы и файл .uix (исходный код страницы).

После сохранения создаются 2 файла (скриншот страницы и файл .uix).

Нажмите «Открыть файл», чтобы импортировать ранее сохраненные снимки экрана и файлы .uix.

Операции позиционирования элемента можно выполнять после импорта.

1.1.2Appium Inspector

Appium Inspector — это инспектор позиционирования элементов, входящий в состав Appium Desktop, который очень удобен для отладки приложений позиционирования.

Операции в основном такие же в средах Windows/Mac и объясняются здесь с использованием Windows. Используйте команду adb devices, чтобы проверить, подключен ли эмулятор или реальное устройство. Устройство подключается, как показано на рисунке.

Запустите Appium Desktop.

В простом режиме можно установить IP-адрес и порт службы.

Расширенный режим позволяет вам установить больше настроек (например: разрешить перезапись сеанса), и этот пресет можно сохранить позже. Например: Демо.

В режиме пресетов можно активировать или удалить ранее сохраненные пресеты. Например: активируйте или удалите ранее сохраненные демо-пресеты.

Как правило, вы можете выбрать простой режим. Если IP-адрес и порт службы указаны по умолчанию, нажмите «Запустить сервер v1.8.0», чтобы запустить службу Appium.

Нажмите на увеличительное стекло (Начать сеанс инспектора).

Выберите «Автоматический сервер», чтобы настроить информацию о желаемых возможностях.

Вы можете напрямую щелкнуть «Желаемые возможности» слева, чтобы добавить или удалить, чтобы заполнить информацию о желаемых возможностях. Вы также можете напрямую скопировать JSON, созданный с помощью Desired Capabilities, в поле «Представление JSON» справа и сохранить его. Эффект от обоих методов одинаков.

Например, информация JSON:

{
  "platformName": "Android",
  "platformVersion": "6.0",
  "deviceName": "Galaxy C7",
  "udid": "MYV0215825000026",
  "automationName": "Appium",
  "appPackage": "com.xiaoV.BWalletBeta",
  "appActivity": "com.xiaoV.BWallet.yklogin.YkSplashActivity"
}

Затем нажмите «Начать сеанс».

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

Appium Inspector также поддерживает функцию записи. Нажмите кнопку записи, чтобы выполнить операции (например: входные данные), после чего будет сгенерирован код операции (поддерживает Java, Python).

1.2WEBVIEW

1.2.1Chrome Inspect

Chrome Inspect — это инструмент мобильной веб-разработки и отладки, предоставляемый Chrome. С его помощью мы можем отлаживать мобильную страницу и просматривать исходный код страницы для поиска элементов.

в Windows / В среде Mac операция в основном такая же, и здесь она объясняется с использованием Windows. Прежде всего, вам понадобится компьютер с установленным браузером Chrome или реальный компьютер; Подключите устройство к компьютеру через USB-кабель для передачи данных и включите режим отладки USB, используйте adb. Команда devices проверяет, подключен ли эмулятор или реальное устройство. Устройство подключается, как показано на рисунке.

Откройте страницу с Webview в приложении устройства, затем откройте браузер Chrome на ПК и введите адрес доступа chrome://inspect/.

Как показано на рисунке, можно определить, что текущий интерфейс приложения — Webview.

Нажмите ссылку «Проверить» на странице, и появится новое окно с информацией об элементе Webview текущей страницы (из-за проблем с внутренней сетью для первой загрузки страницы может потребоваться FANQIANG). Метод позиционирования элемента соответствует Selenium WebDriver.

Однако отладка и позиционирование в Chrome, как правило, не так удобны, как в Firefox, поэтому автор обычно создает новый .html-файл и копирует в него исходный код этой страницы. Как показано на рисунке: Скопируйте исходный код страницы в файл .html.

Затем откройте Firefox и перетащите в него этот .html-файл. Если символы отображаются искаженно, вы можете изменить формат кодировки текста Firefox на китайский. Хотя стиль отображения страницы в Firefox потерян, основные элементы видны в сочетании с позиционированием. Инструменты отладки и позиционирования Firebug и FirePath по-прежнему очень удобны.

Примечание. Если подключенное устройство является реальным, почему Chrome Inspect не может обнаружить страницу Webview?

Начиная с Android 4.4, webkit поддерживает удаленную отладку, но вам необходимо включить режим отладки приложения. Вы можете использовать следующий код: WebView.setWebContentsDebuggingEnabled(true);

На самом деле режим отладки у большинства приложений отключен, и найти версию с включенным режимом отладки довольно проблематично. Поэтому вам необходимо использовать сторонний инструмент, чтобы принудительно открыть режим отладки веб-просмотра Android любого приложения, чтобы оно могло использовать Chrome Inspect. И этот инструмент — Xposed.

Решение:

1. Рутируйте устройство

Поскольку требуются root-права, устройство должно быть рутировано. Есть много инструментов для рутирования, например KingRoot и т.п.

2. Установите платформу Xposed.

Откройте de.robv.android.xpose.installer_v33_36570c.apk в файле Xposed и установите его на устройство.

или:

Откройте адрес официального сайта для загрузки и установки: http://repo.xposed.info/module/de.robv.android.xposed.installer.

3. Установите модуль отладки Xposed WebView.

Откройте WebViewDebugHook.apk в файле Xposed и установите его на устройство.

4. Активируйте Экспоузд

После установки двух вышеуказанных программ на устройстве появится значок Xpose Installer. Щелкнув его, вы увидите сообщение о том, что Xpose не активирован. Нажмите, чтобы войти на страницу платформы, и нажмите «Установить/Обновить». кнопка. После завершения установки перезапустите и откройте его, нажмите, чтобы войти на страницу модуля, отметьте «привязку отладки webView», после чего после перезапуска будет активирован перезапуск. Затем вы можете использовать Chrome Inspect для просмотра элементов страницы веб-просмотра приложения.

Глава 2 IOS

2.1APP

2.1.1Appium Inspector

Appium Inspector — это инспектор позиционирования элементов, входящий в состав Appium Desktop, который очень удобен для отладки приложений позиционирования.

В среде Mac введите idevice_id -l в терминале, чтобы проверить, подключено ли устройство.

Как показано на рисунке: отобразите информацию о реальной машине.

Запустите Appium Desktop.

В простом режиме можно установить IP-адрес и порт службы.

Расширенный режим позволяет вам установить больше настроек (например: разрешить перезапись сеанса), и этот пресет можно сохранить позже. Например: Демо.

В режиме пресетов можно активировать или удалить ранее сохраненные пресеты. Например: активируйте или удалите ранее сохраненные демо-пресеты.

Как правило, вы можете выбрать простой режим. Если IP-адрес и порт службы указаны по умолчанию, нажмите «Запустить сервер v1.8.0», чтобы запустить службу Appium.

Нажмите на увеличительное стекло (Начать сеанс инспектора).

Выберите «Автоматический сервер», чтобы настроить информацию о желаемых возможностях.

Вы можете напрямую щелкнуть «Желаемые возможности» слева, чтобы добавить или удалить, чтобы заполнить информацию о желаемых возможностях. Вы также можете напрямую скопировать JSON, созданный с помощью Desired Capabilities, в поле «Представление JSON» справа и сохранить его. Эффект от обоих методов одинаков.

Например, информация JSON:

{
  "platformName": "iOS",
  "platformVersion": "11.1",
  "deviceName": "test",
  "automationName": "XCUITest",
  "bundleId": "com.xiaoV.BangWalletBeta",
  "udid": "c5dc675bddf7d1ac6d91783d5224d72b427f8d04",
  "xcodeOrgId": "69XXXXXXXX",
  "xcodeSigningId": "iPhone Developer"
}

Затем нажмите «Начать сеанс».

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

Appium Inspector также поддерживает функцию записи. Нажмите кнопку записи, чтобы выполнить операцию (например, нажмите кнопку), после чего будет сгенерирован код операции (поддерживает Java и Python).

2.2WEBVIEW

2.2.1Safari

1. Настройте симулятор или настоящую машину. Откройте настройки эмулятора или реального устройства. --> Safari --> Продвинутый, поместите Интернет внутрь Инспектор открывает.

2. Настройте Safari на своем компьютере Mac. Открыть Сафари --> Нажмите «Safari» в строке меню. --> Preferences... --> Advanced --> Выберите Показать Develop menu in menu bar。

3. Откройте приложение, которому необходимо просмотреть веб-просмотр на симуляторе или реальном компьютере, и перейдите к веб-просмотру.

4. Откройте Safari на Mac.,Выберите разработку--->оборудование（Как показано на картинке：оборудованиеназванныйtest）,В это время вы можете увидеть страницу веб-просмотра, открытую на реальном устройстве.,Например: Страница справочного центра приложения Bangbang.

Щелкните ссылку на страницу справочного центра, и появится новое окно, в котором отобразится информация об исходном коде HTML страницы справочного центра, и вы сможете получить соответствующую информацию об элементе Webview.

2.2.2ios_webkit_debug_proxy

Сначала откройте приложение на реальном устройстве, а затем откройте страницу веб-просмотра, отображаемую приложением;

Затем откройте терминал на своем Mac и введите команду запуска агента.

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

Откройте браузер Chrome на своем Mac и введите http://localhost:9221/ в адресной строке. Появится список всех подключенных устройств. Выберите устройство и нажмите «Открыть». Например: реальное устройство (тестовое)

В это время обнаруживается страница веб-просмотра, открытая на реальном устройстве, например страница справочного центра.

После выбора щелкните правой кнопкой мыши и перейдите к...

Откройте выбранную страницу, откройте инструменты разработчика Chrome и отобразите информацию об исходном коде HTML. Вы можете получить соответствующую информацию об элементе Webview.

Или после выбора щелкните правой кнопкой мыши, чтобы скопировать адрес ссылки.

Например:

chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9223/devtools/page/1

Откройте новое окно Chrome, вставьте скопированный адрес и посетите

Отображая информацию об исходном коде HTML, вы можете получить соответствующую информацию об элементе Webview.

2.2.3RemoteDebug iOS WebKit Adapter

Этот инструмент позволяет отлаживать страницы веб-просмотра IOS так же, как и отладку веб-просмотров Android, что очень удобно.

RemoteDebug iOS Webkit Адаптер (позволяет В Windows и Mac используйте VS Code、Chrome DevTools、Firefox debugger.html и другие инструменты для отладки Safari, IOS WebViews）。

Адаптер RemoteDebug iOS Webkit использует:

1. Это позволяет некоторым инструментам, реализованным на основе протокола отладки Chrome (CDP), также иметь возможность отлаживать IOS Safari/Webkit.

2. Возможность предоставить адаптер протокола, который в основном используется для различий API между протоколом отладки Chrome и протоколом удаленной отладки Webkit.

3. Вторичную разработку можно выполнить на ios-webkit-debug-proxy. Это связано с тем, что проект адаптера RemoteDebug iOS Webkit построен на основе проекта ios-webkit-debug-proxy. Проект адаптера RemoteDebug iOS Webkit также можно рассматривать. как ios-расширение проекта webkit-debug-proxy.

RemoteDebug iOS WebKit Адаптер может работать На платформах Windows и Mac. Установить адаптер можно через установочный пакет NPM.

Установить:

Убедитесь, что Homebrew установлен, и выполните следующие команды для установки ios-webkit-debug-proxy и libimobiledevice.

brew update

brew unlink libimobiledevice ios-webkit-debug-proxy

brew uninstall --force libimobiledevice ios-webkit-debug-proxy

brew install --HEAD libimobiledevice

brew install --HEAD ios-webkit-debug-proxy

Установите адаптер RemoteDebug iOS Webkit:

npm install remotedebug-ios-webkit-adapter -g

Открытьоборудованиенастраивать--> SafariПредпочтения-->давать возможность“Web Inspector”。

Откройте терминал на Mac и введите команду запуска (ios-webkit-debug-proxy запустится автоматически, отдельно запускать его не нужно):

remotedebug_ios_webkit_adapter --port=9000

Откройте браузер Chrome на своем Mac и введите chrome://inspect в адресной строке.

Затем настройте «Обнаружение сетевых целей» и добавьте localhost:9000.

В это время обнаруживается страница Webview, открытая на симуляторе или реальном устройстве.

Нажмите ссылку «Проверить» на странице, и появится новое окно с информацией об элементе Webview текущей страницы (из-за проблем с внутренней сетью для первой загрузки страницы может потребоваться FANQIANG). Метод позиционирования элемента соответствует Selenium WebDriver.