Колонка «Беседа с тестером» создана Youce,Сбор лучших технических экспертов из звездной продуктовой команды Tencent.,Научим вас всем знаниям, навыкам и практикам в области тестирования!

Ирис Ду — инженер по исследованиям и разработкам в бизнес-группе Tencent WeChat. Она отвечает за разработку торговых продуктов WeChat и участвовала во многих технологических инновационных проектах, таких как интеллектуальная служба поддержки клиентов WeChat AI и биометрические аппаратные продукты.

Резюме: Пока,Доля рынка мобильных терминалов по сравнению с настольными компьютерами и планшетами достигла 52,92%. существует Вичат экологический проект,большинствоH5Все страницы работаютсуществовать Вичат Внутри（Прямо сейчас Встроенный браузер WeChat), пользователи используют самые разные мобильные устройства, версии и версии системы. В этой статье будет подробно представлено Вичат H5Тестирование совместимоститеория、метод и Реальные случаи。

Текущая ситуация и проблемы

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

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

Почему тестирование совместимости WeChat H5 затруднено?

① Мобильные устройства сложны

Статус Android-устройства:

Базовая статистика, опубликованная OpenSignal в августе 2015 года, показывает сложность устройства Android. К 2024 году сложность сегодняшних устройств будет только возрастать.

Фрагментация Android-устройства

Androidразмер фрагментация экрана (картинка из OpenSignal "Android Fragmentation отчет за 2015 год).

Статус iOS-устройства:

По данным Википедии, по состоянию на сентябрь 2024 года Apple выпустила 46 моделей iPhone.

(Источник изображения, запись в Википедии для iPhone)

②Существует множество мобильных браузеров

Распространенные браузеры включают Chrome, Firefox, Firefox Focus, Opera, Microsoft Edge, Яндекс-браузер, Safari, QQ Browser, Baidu Browser, UC Browser, World Window Browser, Quark, Via и т. д.

③Тестирование WeChat H5 сложное

На данный момент WeChat достиг версии 8.0. Если вы хотите протестировать версию 7.0 на мобильном телефоне с версией 8.0, вам придется удалить WeChat и переустановить его.

Если используетсяОблачная настоящая машинатестировать ВичатH5,Проблема в том, что требуется ряд сложных операций входа в систему.,а потом протестируй,Вичатовать Весь процесс входа на новом мобильном телефоне достаточно сложен.

С чего начать тестирование WeChat H5? Сложность заключается в том, что мы не можем протестировать каждую модель, браузер и версию WeChat. В большинстве случаев мы тестируем только 5-10 мобильных телефонов, каждый из которых находится в составе собственной группы. Есть ли способ завершить тестирование CSS и JS API на более чем 99% устройств с помощью минимального тестирования?

Методы и практика тестирования

сделать перед тестированием

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

Веб-сайты, на которых можно проверить совместимость, включают:

• Can I use (https://caniuse.com)
• MDN Web Docs (https://developer.mozilla.org/zh-CN)

В то же время вы также можете использовать некоторые инструменты для достижения совместимости:

• AutoPrefixer
• Babel
• Браузеры (здесь можно просмотреть распределение использования каждого браузера)

https://browsersl.ist/#q=cover+99%25®ion=alt-as

Управляйте ожиданиями от тестов

Коллега однажды спросил меня, что недавно у них был проект H5, который мог бы восстановить пользовательский интерфейс на Mac и iOS, но на Android шрифты были другими. (Причина в том, что в дизайне указан шрифт Pingfang, который не встроен в Android. Правильное решение — использовать разные встроенные шрифты в разных системах)

Можно ли сказать, что эта ситуация требует низкого восстановления пользовательского интерфейса? Должны ли мы сосредоточиться на 100% восстановлении?

Здесь мы сначала разъясняем понятие — кроссбраузерность. Мы должны гарантировать, что веб-сайт или веб-приложение можно нормально использовать в приемлемом количестве браузеров и обеспечить приемлемый пользовательский интерфейс в различных браузерах.

Объяснение концепции: кроссбраузерное использование (работает). cross браузер) относится к веб-сайту или Веб-приложения могут работать в приемлемом количестве браузеров (по всему миру). an acceptable number of web браузеры), чтобы обеспечить приемлемый пользовательский опыт. - Цитата: МДН

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

Мы управляем ожиданиями каждого от тестирования (обеспечивая приемлемый пользовательский опыт в разных браузерах), а покрытие тестирования зависит от бизнеса.

Распространенные методы тестирования совместимости с мобильными устройствами

① Тест совместимости размеров экрана

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

② Испытание на реальной машине или на симуляторе

Этот тип тестирования находится в центре внимания тестирования совместимости CSS и JS API.

• Используйте реальные устройства: загрузите веб-страницу для тестирования на различных типах устройств, таких как настольные компьютеры, ноутбуки, планшеты, смартфоны и т. д.
• Используйте эмуляторы и эмуляторы. Используйте эмуляторы или эмуляторы для моделирования среды различных устройств и проведения тестирования. Обычно используемые симуляторы включают симулятор, поставляемый с Android Studio, и симулятор iOS в Xcode.

проходитьОблачная настоящая машинаМожет выполняться с использованием различных типов оборудования.Тестирование совместимость, это обычный тест CSS, JS Подход совместимости API.

③ Инструменты автоматического тестирования

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

Selenium: Selenium — это популярная среда автоматического тестирования, используемая для моделирования взаимодействия пользователей в разных браузерах. Он поддерживает несколько языков программирования и предоставляет богатый API и инструменты, которые позволяют разработчикам писать функциональные тесты, регрессионные тесты и тесты кроссбраузерной совместимости.

TestCafe: TestCafe — это инструмент автоматического тестирования на основе JavaScript для кроссбраузерного тестирования. Он не требует дополнительных плагинов или драйверов, может запускать тесты в реальном браузере и поддерживает несколько браузеров и платформ.

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

BrowserStack: BrowserStack — это облачная платформа кроссбраузерного тестирования, которая предоставляет для тестирования большое количество реальных браузеров и мобильных устройств. Это позволяет разработчикам одновременно запускать тесты в разных браузерах для выявления проблем совместимости веб-страниц в разных средах.

Платформа облачных сервисов Utest：Utest WebUI АвтоматизацияЭто инструмент тестирования собственной разработки, принадлежащий Tencent.,Вы можете записывать и генерировать автоматические тестовые примеры, осуществляя операции со страницами.,существовать Во время прохождения самотестирования,Синхронная полная запись вариантов использования,Сгенерируйте код тестового сценария.

Проблема здесь в том, что использование вышеупомянутого автоматического тестирования может потребовать написания различных тестовых примеров, а сложность тестовых примеров положительно коррелирует со сложностью страницы. Ручное тестирование на реальной машине сложнее. Как протестировать такое количество устройств и версий WeChat. ?

Если мы используем автоматическое тестирование для WeChat H5, как мы сможем войти в WeChat на таком количестве устройств? Какова стратегия тестирования?

Основные факторы, влияющие на совместимость

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

• размер экрана
• разрешение экрана
• Ядро браузера

Размер и разрешение экрана будут влиять на стиль макета страницы, но ядро ​​браузера будет влиять на совместимость CSS и JS API.

Из совместимости браузеров CSS и JS API также видно, что совместимость атрибута связана только с браузером и версией браузера. Основная причина заключается в том, что ядра браузера разные.

(Изображение из веб-документов MDN)

Встроенное ядро ​​браузера WeChat и методы тестирования

Ядро браузера включает в себя механизм рендеринга браузера и механизм JS. Механизм рендеринга определяет, как браузер отображает содержимое веб-страницы и информацию о формате страницы. Различные ядра браузера также по-разному интерпретируют синтаксис написания веб-страниц.

Следовательно, эффект рендеринга (отображения) одной и той же веб-страницы в браузерах с разными ядрами также может быть разным. Именно поэтому авторам веб-страниц необходимо тестировать эффект отображения веб-страниц в браузерах с разными ядрами.

Итак, если мы хотим проверить совместимость CSS и JS API, нам нужно знать ядро ​​браузера WeChat. К счастью, ядро ​​рендеринга встроенного браузера WeChat относительно унифицировано и не так разнообразно, как ядро ​​браузера Android.

Наша цель тестирования — выполнить 95 % тестирования совместимости CSS и JS API мобильных устройств с помощью минимальной комбинации тестов.

Встроенный браузер WeChat для iOS

①Фон ядра

iOSВстроенный браузер Существует всего два типа WeChat: UIWebView и WKWebView. ВКВебвиев (WeChat постепенно обновится до WKWebView до 1 марта 2017 г.) Apple на iOS? Новые компоненты, представленные в версии 8, предназначены для обеспечения современного управления просмотром веб-страниц, поддерживающего новейшие функции Webkit и избавляющегося от прошлого. UIWebView старый, устаревший и глупый, особенно из-за проблемы огромного использования памяти. Он использует тот же Nitro, что и в Safari. Движок JavaScript значительно повышает скорость выполнения JS страницы.

После перехода на WKWebview поведение Webview в WeChat остается во многом схожим с поведением Safari. Единственная разница состоит в том, что в WeChat Webview внедряются сценарии, связанные с WeChat JSBridge.

В iOS 13 Apple требует от разработчиков использовать WKWebView вместо UIWebView. Согласно документу Apple «Обновление приложений, использующих WebView» от 13 декабря 2019 г., требования по времени следующие:

• В апреле 2020 года новые приложения должны использовать WKWebView вместо UIWebView.
• В декабре 2020 года обновления приложений должны использовать WKWebView вместо UIWebView.

Таким образом, версии после WeChat 6.5.8 (17 мая 2017 г.) поддерживаются WKWebView, а все приложения Apple после iOS 13 поддерживают только WKWebView.

Ссылка: Руководство по адаптации разработки веб-страниц iOS WKWebview.

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/iOS_WKWebview.html

② Метод испытания

потому что Встроенный браузер WeChat использует Apple UIWebView и WKWebView, поэтому Ядро браузера относится только к версии iOS.

Ниже приведены 20 наиболее часто используемых на рынке устройств iOS (данные Statecounter) с общей долей 97,26 %. Все версии > iOS 13, поэтому используется WKWebview. Если мы тестируем только небольшие версии, нам нужно протестировать только 6 версий iOS для завершения iOS. Вичат 97,26% CSS, JS Тестирование совместимости API.

Если есть другая статистика,Например, доля пользователей iOS в Вичате,Тот же метод анализа можно использовать и для расчета.,Рассчитайте версию iOS с наибольшей долей.

Встроенный браузер Android

①Фон ядра

Существующий Хороший Вичат Встроенный браузер Android с самого начала не полностью перенял метод рендеринга с использованием системного ядра, а выбрал ядро ​​X5 от TBS. После 2020Года стало использоваться ядро ​​ВичатXWEB.

Ядро X5 также используется в мобильных браузерах QQ и QQ. UserAgent выглядит следующим образом:

Mozilla/5.0 (Linux; Android 12; OXF-AN10 Build/HUAWEIOXF-AN10; wv) AppleWebKit/537.36 (KHTML,like Gecko) Version/4.0 Chrome/89.0.4389.72 MQQBrowser/6.2 TBS/046247 Mobile Safari/537.36 MOA/6.1.0(133) HarmonyOS 3.0.0 Language/zh_CN

Пользовательский агент ядра XWEB, разработанный Вичатом, выглядит следующим образом:

Mozilla/5.0 (Linux; Android 11; PCAM10 Build/RP1A.200720.011; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/111.0.5563.116 Mobile Safari/537.36 XWEB/5279 MMWEBSDK/20230805 MMWEBID/7778 MicroMessenger/8.0.42.2460(0x28002A3B) WeChat/arm64 Weixin NetType/WIFI Language/zh_CN ABI/arm64

В существующем бизнесе мы фактически извлекали отчетные данные UserAgent и составляли статистику.,С 8 октября 2023 г. по 14 октября 2023 г. (то же устройство/пользователь не дедуплицируется),На странице VichatH5 XWEB опубликовано 12 387 фрагментов данных.,ВичатH5 предоставил 9 фрагментов данных с использованием ядра X5.,Так существуют в реальной среде,Большинство пользователей Android уже используют ядро ​​XWEB.

② Метод испытания

существоватьдействительный бизнес,Практически нет отзывов пользователей о проблемах совместимости встроенного браузера Android с WeChat.,Многие API, которые плохо работают на iOS.,существования работает очень хорошо и нормально на Android,Но нам еще предстоит провести соответствующие тесты.

от Ядро С точки зрения браузера, Android Ядробраузера и версия Вичата, связанная,Поэтому его следует тестировать по версии Android Вичат.

Но на самом деле механизмы обновления ядра рендеринга XWeb и iOS различны.,XWeb динамически обновляется. Есть две возможности для недавно загруженного клиента Вичат: существует: первая заключается в том, что XWeb еще не загружен.,Так что используйте систему Внутринабор Ядро браузера Второе — скачать последнюю версию XWeb;

Старый клиент Вичат также имеет две возможности существования: первая – он недавно обновился.,Использовалась новая версия XWeb; вторая в последнее время не обновлялась.,Используется старая версия XWeb. Но клиенту Вичат сложно обновить всех пользователей до последней версии.,Статус обновления версии можно увидеть в распределении данных на рисунке ниже.

Быстрое воспроизведение/проверка при возникновении проблем

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

• iOS Воспроизводится в соответствии с версией системы iOS пользователя.
• Android По словам пользователя Ядро снова появляется версия клиента браузера/Вичат

Версия системыи Вичатклиентская версия（MicroMessenger）существоватьUserAgentВсе в,Как показано ниже:

Mozilla/5.0 (iPhone; CPU iPhone OS 17_0_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.42(0x18002a2a) NetType/WIFI Language/zh_CN

Тестирование совместимости с более высоким охватом

Цель, которую мы поставили ранее, — выполнить 95 % тестов совместимости CSS и JS для мобильных устройств с помощью минимальной комбинации тестов. Можно ли достичь большего или даже 100 %? Ниже приведены две идеи.

Первое: поставить все Ядро браузера все перечислены, но стоимость будет очень высокой. В настоящее время можно найти данные Вичат Android. 7.0.15 Пропорция 0.01%, Успенский ВичатAndroid 5.4 - Доля 6,1 также составляет 0,01%, 5.4 - 6.1 содержит 4 версии Вичата и нуждается в тестировании. 4 * Android положить конец всему Ядро браузера,Ручное тестирование очень дорогое,Если это автоматизированный тест, помимо написания тестовых сценариев вам также необходимо подумать о том, как смоделировать такую ​​​​среду устройства.

два：Если вы можете четко идентифицировать своих бизнес-пользователей,Вичат Версия/iOSВерсия, Тогда добиться 100% становится легко. Вам нужно лишь статистически отсортировать пользовательское оборудование в известном диапазоне, а затем решить, сколько вы хотите протестировать.

Если вы не можете определить объем оборудования вашего бизнес-пользователя на раннем этапе, вы можете обратиться к стратегии тестирования, приведенной в этой статье.

Реальные случаи

Случай 1. Использование памяти в iOS слишком велико.

Проблема с производительностью:

Страница автоматически обновляется после открытия

Проблемная версия:

iOSВстроенный браузер WeChat、iOSВичат Мини программаweb-view

Причина проблемы:

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

Подведите итог:

Последующие модификации решили проблему с памятью в новой версии Tencent Maps.,Обычно все веб-просмотры в iOS должны вести себя одинаково.,Но этот случай вырывается из этих рамок,Обратите внимание, что будут некоторые различия в использовании памяти.,Но вы все равно можете поверить, что поведение ВичатWebview в iOS во многом соответствует поведению в Safari.

Случай 2: аудио не может быть успешно воспроизведено в iOS

Проблема с производительностью:

Каждый раз, когда вы отпускаете и посылаете голос, должен воспроизводиться звуковой эффект, но он не воспроизводится.

Версии проблемы (включая, помимо прочего):

Встроенный браузер WeChat и другие браузеры под iOS 15.4.1, iOS 14.3.

Причина проблемы:

Здесь используется компонент «Видео». На мобильном терминале необходимо активировать сенсорный запуск и щелчок перед воспроизведением звука. В противном случае будет сообщено о следующей ошибке: Необработанное отклонение обещания: NotAllowedError, поэтому video.play() не может быть вызван напрямую. когда выпущено здесь (touchend).

Мы позволяем видео воспроизводиться в циклическом режиме при запуске касания. При касании завершения мы устанавливаем время воспроизведения звука на 0 и отменяем цикл отключения звука, добиваясь эффекта прекращения воспроизведения. Однако эта «альтернативная» операция может не гарантировать совместимость. .

Подведите итог:

Найдя версию iOS, проблема была быстро воспроизведена. Хотя ее не удалось решить, метод обнаружения проблемы оказался эффективным.

Подводя итог, перед нами стоит комплекс Тестирование мобильных терминалов, особенно Вичат H5. Задача совместимости: команде разработчиков необходимо полностью понять каждое устройство, версию системы, версию Вичата и Ядро. Разнообразие браузера.

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