Создайте решение для отладки внешнего интерфейса на основе симулятора iOS.

автор:imyzf

В этой статье будет представлен принцип автоматического управления симулятором iOS и предоставлена ​​помощь в разработке решений для отладки внешнего интерфейса на основе симулятора iOS.

Когда мы разрабатываем интерфейсные страницы в приложениях для iOS, у нас есть большая проблема: страницы нельзя отлаживать с помощью таких инструментов, как Safari Inspector. Когда мы сталкиваемся с проблемами, мы можем только найти способ добавить vConsole, внедрить Weinre или внести слепые изменения. Если мы не можем, мы можем найти студентов-клиентов, чтобы вручную упаковать и отладить. Короче говоря, путь к устранению неполадок очень трудный.

После обращения к инструментам разработки кроссплатформенных фреймворков, таких как RN и Weex, мы обнаружили, что использование симулятора для отладки — хороший способ решить эту проблему.Ограничения, которые позволяют нам отлаживать с помощью Safari Inspector.

Safari Inspector — это инструмент отладки, похожий на Chrome Devtools, который поставляется с браузером Safari и поддерживает следующие функции:

• Проверить элементы страницы
• Просмотр сетевых запросов
• отладка точки останова
• Управление хранилищем (локальное хранилище, файлы cookie и т. д.)
• ...

Эти функции не имеют себе равных в таких инструментах, как vConsole и Weinre, и могут помочь нам быстро обнаружить проблемы.

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

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

Прежде чем представить эту программу, нам нужно понять предварительные условия программы:

• Компьютер с macOS и Xcode: из-за ограничений Apple симулятор и Xcode могут работать только на macOS. Xcode можно установить прямо в App Store, это очень просто, никаких других операций не требуется.
• Пакет приложения, созданный для симулятора: Поскольку симулятор основан на архитектуре x86, разработчики клиентов должны предоставить пакет, созданный для симулятора, который будет отличаться от пакета, установленного на мобильном телефоне.
• Приложение, поддерживающее вызов схемы URL-адресов: приложение, в котором размещается интерфейсная страница, должно поддерживать вызов и открытие страницы с помощью протокола, чтобы реализовать автоматизацию с помощью инструмента, в противном случае страницу можно будет открыть только вручную, щелкнув соответствующий значок. ссылка в приложении.

Общий процесс

Общий процесс отладки нашего симулятора показан на рисунке выше:

1. Получить список устройств для выбора пользователем
2. Проверьте статус эмулятора, если нет, запустите эмулятор
3. Проверьте, установлено ли соответствующее приложение, если нет, загрузите установочный пакет и установите его.
4. Запустите приложение и откройте страницу, которую необходимо отладить.
5. В зависимости от типа страницы используйте соответствующий инструмент для отладки (например, Safari Inspector).

основные инструменты

Когда мы реализуем это решение, мы в основном опираемся на следующие инструменты:

• xcrun: Xcode предоставляет инструмент командной строкиxcrunЭто набор инструментов для управления функциями, связанными с разработкой.
• simctl:xcrunпредоставляет подкомандуsimctlОн используется для управления симулятором и предоставляет такие функции, как запуск, завершение работы, установка приложений и открытие URL-адреса симулятора. может быть запущен непосредственно с помощьюxcrun simctlОзнакомьтесь со справочной документацией.
• node-simctl: предоставлено AppiumsimctlJS-оболочка для инструмента. Поскольку интерфейсные решения обычно разрабатываются на основе node.js, для более удобного управления симулятором можно использовать пакет node-simctl. Однако из-заnode-simctlОн обеспечивает только инкапсуляцию некоторых функций, нам все равно нужно вызывать его вручнуюxcrunкоманда для достижения большего количества функций.

Симулятор управления

В этом решении самой важной частью является управление симулятором.

Предварительная подготовка

После того, как пользователи установят Xcode через App Store, им необходимо согласиться с лицензионным соглашением Apple для первого запуска, а затем автоматически установить некоторые компоненты, прежде чем их можно будет использовать в обычном режиме. Чтобы упростить использование, мы хотим автоматизировать этот процесс, а не предлагать пользователю предпринять какие-либо действия после установки Xcode.

Сначала мы можем попробовать запустить его один разxcrun simctlкоманда, если пользователь запускает ее в первый раз, сообщение об ошибке напомнит пользователю запустить ее вручнуюxcodebuild -licenseПримите лицензию, чтобы мы могли искать в сообщении об ошибкеxcodebuild -licenseСтрока, если она найдена, она запустится автоматическиxcodebuild -license acceptчтобы помочь пользователю автоматически принять лицензию. Здесь следует отметить, что для запуска этой команды требуются привилегии root, вы можете использоватьsudo-promptДождитесь эскалации пакета и запустите команду.

получить список устройств

Мы можем напрямую использовать node-simctlgetDevices()Функция получает список всех устройств, установленных локально, что удобнее, чем вызов командной строки.Вы можете напрямую получить объект, не разбирая его самостоятельно.Структура объектной части следующая:

{
    '13.4': [
        {
            sdk: '13.4',
            dataPath: '/Users/xx/Library/Developer/CoreSimulator/Devices/xxx/data',
            logPath: '/Users/xx/Library/Logs/xxx',
            udid: 'C1AA9736-XXX-YYY-ZZZ-2A4A674B6B21',
            isAvailable: true,
            deviceTypeIdentifier: 'com.apple.CoreSimulator.SimDeviceType.iPhone-11-Pro-Max',
            state: 'Shutdown',
            name: 'iPhone 11 Pro Max',
            platform: 'iOS'
        }
    ]
]

Сюда входят не только iPhone, но и такие устройства, как Apple Watch и Apple TV. Мы можем просмотреть возвращенные результаты и передатьnameполе для фильтрации, потому что обычно нам нужно отлаживать только в iPhone.

загрузочное устройство

Сначала нам нужно определить, было ли запущено устройство, мы можем пройтиxcrun simctl bootstatus ${deviceId}Команда для получения статуса устройства (deviceId здесь получен из списка устройств, полученного вышеudid), но если устройство не запущено, эта команда будет ждать и не завершится, поэтому мы можем использовать эту функцию, чтобы определить, запущено ли устройство на основе времени ожидания команды (например, 1000 мс не возвращает результат) .

Далее вы можете напрямую использоватьxcrun instruments -w ${deviceId}команда для запуска соответствующего устройства.

Пример кода:

let status = '';
try {
    status = execSync(
        `xcrun simctl bootstatus ${deviceId}`,
        { timeout: 1000 }
    );
} catch (error) {
    // 如果模拟器未启动，会一直等待，然后超时 kill，抛出一个 ETIMEDOUT 异常
    if (error.code !== 'ETIMEDOUT') {
        throw error
    }
}
// 检查是否启动
if (status.indexOf('Device already booted') < 0) {
    console.log('正在启动模拟器……')
    execSync(`xcrun instruments -w ${deviceId}`)
}

Установите приложение

Установочный пакет эмулятора представляет собой.appПапка с именем в конце, похожая на приложение macOS, а не на то, что установлено на настоящем iPhone..ipaМешок. Поэтому сначала необходимо использовать установочный пакет.zipУпакуйте и загрузите другие инструменты на сервер, загрузите в локальную распаковку перед установкой, используйте node-simctlinstallApp()метод установки.

Проверка приложения и запуск

О том, действительно ли пользователь установил приложение, судят, анализируя сообщение об ошибке, которое вызывает приложение. Если приложение не установлено, оно сообщит об ошибке при пробуждении, а сообщение об ошибке содержитdomain=NSOSStatusErrorDomainСтрока, указывающая, что приложение не установлено. В это время мы можем вызвать описанный выше процесс установки.

Самый важный шаг во всем процессе — это открыть нашу страницу в приложении, что на самом деле очень просто, если само приложение поддерживает аналогичныеcloudmusic://open?url=xxxТакая схема URL подойдет. Мы передаем node-simctlopenUrl()Метод напрямую вызывает схему, и симулятор поможет нам запустить соответствующее приложение, а затем приложение должно помочь нам открыть страницу, которую необходимо отладить в соответствии с полученным параметром схемы.

Пример кода:

try {
    await simctl.openUrl(deviceId, url)
} catch (error) {
    // 没有安装 App，打开协议会报 NSOSStatusErrorDomain
    if (error.message.indexOf('domain=NSOSStatusErrorDomain') >= 0) {
        await simctl.installApp(deviceId, appPath)
        await simctl.openUrl(deviceId, url)
    } else {
        throw error
    }
}

запустить отладчик

После открытия страницы отладки в симуляторе мы можем отладить страницу RN с помощью таких инструментов, как React Native Debugger. Для страниц H5 мы можем включить отладку Inspector из меню Safari (если нет меню «Разработка», в настройках Safari — «Дополнительно» — отметьте在菜单栏中线显示“开发”菜单).

Конечно, этот шаг также можно автоматизировать. Вам нужно использовать Apple Script для поиска ключевых слов в меню Safari и имитации кликов. Это немного сложно и может дать сбой при обновлении системы. Вы можете обратиться кНекоторые обсуждения в Интернете.

Расширение схемы

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

Доступ к службе CI

Клиент будет регулярно выпускать новые версии и добавлять новые функции, поэтому нам также необходимо сохранять отладочные пакеты как более новые версии. Как правило, клиентские группы создают свои собственные службы CI (например, Jenkins) для упаковки, чтобы мы могли получить доступ, автоматически загружать и устанавливать последние пакеты. Даже мы можем вытащить список пакетов на сервере CI, установить исторические версии и вернуться для отладки некоторых функций.

Следует отметить, что клиентская команда обычно упаковывает пакеты только для архитектуры ARM, поэтому цель сборки x86 должна быть добавлена ​​в CI, чтобы продукт сборки мог успешно работать на симуляторе.

Поддержка нескольких приложений

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

1. Схема URL: при указании разных схем страницы можно открывать в разных приложениях.
2. Идентификатор пакета: аналогичныйcom.netease.cloudmusicТакая строка является уникальным идентификатором Приложения, который можно использовать для запуска, завершения и удаления Приложения.

Суммировать

До сих пор мы представили основные принципы построения набора интерфейсных отладочных решений на основе симуляторов iOS.Основываясь на приведенном выше содержании, мы можем разработать набор инструментов CLI, объединив командира и опросника, а также можем разработать набор GUI-инструментов за счет объединения Electron.Эффективность разработки. Если у вас есть дополнительные идеи или соответствующий опыт, вы также можете связаться с нами в области комментариев~

Эта статья была опубликована сКоманда внешнего интерфейса NetEase Cloud Music, Любое несанкционированное воспроизведение статьи запрещено. Мы всегда нанимаем, если вы готовы сменить работу и вам нравится облачная музыка, тоПрисоединяйтесь к нам!