Як ми зробили скриншот без скриншотів
Іноді відгук простіше показати, ніж описати. Увімкніть вибір елемента для опитування — і відвідувач зможе вказати на конкретну частину сторінки: кнопку, заголовок, поле форми — замість того щоб писати «синя кнопка десь зверху». У деталях відповіді ви отримуєте чисте, повністю стилізоване зображення саме цього елемента, поруч із повносторінковим знімком, де його підсвічено.
Щоб це запрацювало, довелося рендерити сторінки, які нам не належать, на доменах, які ми не контролюємо, усередині справжнього браузерного рушія — і повертати коректно оформлений фрагмент з одним елементом із цих сторінок. Перша версія пішла очевидним шляхом: захопити розмітку клікнутого елемента і відрендерити лише її, окремо. У кожному нашому тесті це виглядало правильно — бо в кожному тесті елемент був стилізований інлайновими стилями. Але щойно кнопка на реальній сторінці отримувала свій вигляд із класу в зовнішній таблиці стилів, вирізаний фрагмент повертався плоским, без стилів. В ізольованого фрагмента немає head сторінки, до якого можна підключити таблицю стилів, немає блоку style, немає CSS-змінних, на які міг би спиратися цей клас — нічого не зламалося, просто застосовувати стилі не було до чого.
Виправлення звелося до того, щоб рендерити всю сторінку цілком, а не елемент окремо. Пікер уже позначає клікнутий елемент у момент вибору, тож ми рендеримо всю захоплену сторінку відвідувача цілком, з її справжніми стилями і справжньою версткою, і робимо два знімки з однієї й тієї ж завантаженої сторінки: сторінку цілком і щільно обрізаний позначений елемент. Тепер одне завантаження сторінки в браузері дає обидва зображення — це ще й менше роботи, ніж два окремі рендери, які були потрібні раніше.
Ніщо з цього не змінило те, що бачить відвідувач — він і далі просто клікає на потрібну частину сторінки. Змінилося те, що відбувається після: справжня, коректно стилізована картинка саме цієї частини, а не здогад, зібраний із текстового опису.