Движки браузеров и их влияние на проведение тестирования

Привет, Хабр!

Меня зовут Харитон. Я специализируюсь на функциональном и нефункциональном мануальном тестировании. За время работы над проектами я заметил, что часто при локализации бага начинающие тестировщики игнорируют необходимость проверок на браузерах с разными движками. Хочу обратить внимание стажёров и джунов на эту ошибку и рассказать, почему знать про движки браузеров обязательно. Моя статья будет полезна и, надеюсь, интересна начинающим специалистам. Но, возможно, и более опытные коллеги что-то почерпнут для себя или дополнят в комментариях своими наблюдениями и примерами. Начнём с простого…

Что такое движок браузера

Зачем это знать тестировщику?

Что такое движок браузера? Давайте разберёмся вместе.

Движок – это ядро любого браузера. Он представлен в виде скрипта и отвечает за преобразование кода Web-продукта в динамическое изображение, которое отображается на экране устройства пользователя. Различия в движках базируются на том, что они имеют разные алгоритмы обработки кода. А ещё в них использованы отличные друг от друга принципы реализации стандартов web’а. 

Сейчас актуальны движки Blink, WebKit и Quantum (Gecko), а такие как Trident, EdgeHTML и Presto уже ушли в прошлое. Ниже мы рассмотрим основные движки и разберём, как их особенности влияют на тестирование.

Blink

Современный движок, созданный в 2013 году на основе WebKit. Считается достаточно быстрым и высокопроизводительным для работы именно с web-приложениями. Применяется в Google Chrome, Opera и новых версиях Microsoft Edge, а также в других браузерах на базе Chromium, например, Yandex Browser.

WebKit

Оптимизирован под устройства компании Apple. Как и Blink, обладает высокой производительностью и поддерживает все основные web-стандарты. Ещё одним из его достоинств является энергоэффективность и высокое качество рендеринга текста и графики, что особенно важно для дисплеев с высоким разрешением. Применяется в Safari.

Gecko

Довольно-таки старый движок – был разработан аж в 1997 году. Его неоспоримые преимущества – кроссплатформенность и гибкость, т.к. Gecko поддерживает множество операционных систем, в том числе Windows, macOS, Linux и Android. Как и Blink и WebKit, поддерживает все основные web-стандарты. Хотя может быть и не такой шустрый, как WebKit, но у него своя фишечка – расширяемость, т.е. может поддерживать множество уникальных расширений и плагинов (например Selenium). Применяется в Firefox (до версии 57) и других продуктах Mozilla (например, почтовый клиент Thunderbird), SeaMonkey.

Quantum (Gecko). 

Это крупное обновление движка Gecko, выпущенное в 2017 году, которое значительно улучшило качество браузера Firefox. Благодаря поддержке современных web-стандартов Firefox сейчас один из самых совместимых браузеров. Применяется в Firefox (с версии 57), Tor Browser и Waterfox. 

Trident и EdgeHTML

Trident использовался в Internet Explorer (начиная с v4.0). EdgeHTML – это ответвление от него, созданное специально для Microsoft Edge. EdgeHTML был заменен на Blink в его новых версиях. Главный минус этих движков – проблемы с совместимостью и безопасностью.

Presto

Основным применением Presto был браузер Opera, который до 2013 года использовал этот движок. Также Presto использовался в некоторых мобильных браузерах и устройствах, таких как Opera Mini и Opera Mobile. Как и EdgeHTML, был заменен на Blink.

Presto, Trident и Gecko – уже по большей части история. А вот триумвират Quantum (Gecko), Blink и WebKit очень хорош. Эти движки являются самыми современными движками на сегодняшний день. 

Итак, зачем это знать тестировщику?

Знание особенностей работы браузерных движков важно для QA-специалистов по нескольким причинам.

1. Производительность движков может существенно отличаться. Например, однажды на проекте у нас возникла ситуация: приложение с интерактивными элементами и динамической загрузкой контента прекрасно работало в Chrome (Blink), но в Firefox (Gecko) мы заметили явные задержки в рендеринге. В итоге пришлось проводить дополнительную оптимизацию, чтобы приложение работало плавно во всех целевых браузерах.

2. Кросс-браузерная совместимость и обработка HTML/CSS/JavaScript. Движки обрабатывают HTML, CSS и JavaScript по-разному. Это может привести к тому, что одно и то же web-приложение будет работать иначе в разных браузерах. Например, анимации, макеты или скрипты могут отображаться корректно в Chrome, но возникнут проблемы в Safari или Firefox. Знание особенностей каждого движка позволяет выявить такие различия на ранних этапах тестирования.

По статистике, в Российской Федерации распределение среди пользователей предпочтений в использовании браузеров за последний год следующее:

• Chrome — 50%

• Yandex Browser — 23%

• Safari — 11%

• Opera — 6%

• Microsoft Edge и Firefox — 3% 

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

Около 80-85% пользователей используют браузеры с движком Blink. Так что при тестировании мы смело можем выбрать один из них (Google Chrome, Yandex Browser, Opera или Microsoft Edge) и примерно с 99,9(9)% вероятностью web-продукт в них будет работать и отображаться одинаково. А вот чтобы быть полностью уверенным в том, что web-продукт подходит остальным 15-20% пользователей, которые используют браузеры на основе иных движков, необходимо дополнительно проверить его в браузере Safari и Firefox. 

В одном из проектов мы работали с макетами, построенными на CSS Flexbox и Grid. В Chrome и Safari (на WebKit) вёрстка выглядела идеально, но как только мы проверили в старом Internet Explorer 11 (на Trident), макет полностью поехал. Пришлось внедрять различные CSS-хаки, чтобы обеспечить корректное отображение в старых браузерах. В другой раз возникли проблемы работы сервис-воркеров (service workers), которые позволяют реализовать оффлайн-режим: с одной стороны всё ок в Chrome и Firefox, а с другой проблемы в старых версиях Safari. В итоге использовали фолбэки и альтернативные методы для того, чтобы обеспечить работу приложения на всех платформах. Эти случаи научили нас всегда помнить про поддержку кросс-браузерности и старых движков.

3. Движки браузеров влияют на то, как web-приложение будет работать на различных платформах (десктоп, мобильные устройства, планшеты). Например, WebKit, который используется в Safari на устройствах Apple, обладает лучшей энергоэффективностью и рендерингом для экранов с высоким разрешением. 

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

5. Важно понимать, какой движок лучше поддерживает инструменты для автоматизации, чтобы выбрать наиболее подходящий подход к тестированию. Движки могут иметь разную степень поддержки инструментов для автоматизации, таких как Selenium или Puppeteer. Вот Gecko поддерживает множество уникальных расширений и плагинов для тестирования. Это знание помогает выбрать правильный подход для автоматизации тестирования… Как-то в ходе работы с Selenium мой коллега обнаружил, что движок Gecko (в Firefox) позволяет лучше интегрировать уникальные расширения и плагины для автоматизированного тестирования. Мы использовали это преимущество для создания сложных сценариев тестирования.

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

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

Ну разве не стоит знать заранее, что Blink и WebKit активно поддерживают API для работы с аппаратным обеспечением устройства, таким как доступ к камере через WebRTC, а Gecko может иметь особенности в реализации этого API? Такое поведение легко заметить при тестировании видео-конференц-приложений или приложений, использующих запись с камеры – в Firefox возникают проблемы с разрешением камеры или звуком, в то время как в Chrome или Safari эти функции работают корректно. 

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

Харитон Дунько, специалист по тестированию «Лаборатории качества»