Как мы сделали скриншот без скриншотов
Иногда отзыв проще показать, чем описать. Включите выбор элемента для опроса — и посетитель сможет указать на конкретную часть страницы: кнопку, заголовок, поле формы — вместо того чтобы писать «синяя кнопка где-то сверху». В деталях отклика вы получаете чистое, полностью стилизованное изображение именно этого элемента, рядом с полностраничным снимком, где он подсвечен.
Чтобы это заработало, пришлось рендерить страницы, которые нам не принадлежат, на доменах, которые мы не контролируем, внутри настоящего браузерного движка — и возвращать корректно оформленный фрагмент с одним элементом из этих страниц. Первая версия пошла очевидным путём: захватить разметку кликнутого элемента и отрендерить только её, отдельно. В каждом нашем тесте это выглядело правильно — потому что в каждом тесте элемент был стилизован инлайновыми стилями. Но стоило кнопке на реальной странице получить свой вид из класса во внешней таблице стилей, как вырезанный фрагмент возвращался плоским, без стилей. У изолированного фрагмента нет head страницы, к которому можно подключить таблицу стилей, нет блока style, нет CSS-переменных, на которые мог бы опираться этот класс — ничего не сломалось, просто применять стили было не к чему.
Исправление свелось к тому, чтобы рендерить всю страницу целиком, а не элемент отдельно. Пикер уже помечает кликнутый элемент в момент выбора, поэтому мы рендерим всю захваченную страницу посетителя целиком, с её настоящими стилями и настоящей вёрсткой, и делаем два снимка с одной и той же загруженной страницы: страницу целиком и плотно обрезанный помеченный элемент. Теперь одна загрузка страницы в браузере даёт оба изображения — это ещё и меньше работы, чем два отдельных рендера, которые требовались раньше.
Ничего из этого не изменило то, что видит посетитель — он по-прежнему просто кликает на нужную часть страницы. Изменилось то, что происходит после: реальная, корректно стилизованная картинка именно этой части, а не догадка, собранная по текстовому описанию.