Расскажу про мотивацию и трудности создания сервиса скриншотов веб-страниц на базе headless chrome и puppeteer. Наличие готовых инструментов еще не означает наличие готового сервиса.

1. Скриншоты
как сервис
1

2. Обо мне
@smelukov
Работаю в Avito
Делаю платформу
Преподаю JS
Учу создавать веб-приложения
Люблю JS и жену
Но больше жену
Все еще верю,
что basis.js захватит мир
Сергей Мелюков
2

3. О чем доклад
3
Это история разработки сервиса скриншотов
и хождения по граблям с целью поделиться опытом

4. Зачем
4

5. Тестирование скриншотами
5
<Button design="primary" size="xl">
Button
</Button>
<Button design="primary" size="xl">
Button
</Button>

6. Почему бы не взять готовый
внешний сервис?
6

7. Хотелось простой, быстрый и
контролируемый сервис
7

8. Ну и конечно, хотелось
разобраться в хайповой теме
☺
8

9. Существующие решения
• PhantomJS - заброшен
• Gemini - сложно
• WebdriverIO - громоздко
• SlimerJS - не развивается
• Headless
• BackstopJS - грамоздко
• Puppeteer
9

10. Headless Chromium
10
Chrome Dev Tools
chromium --headless
DOM Network etc…
WS

11. Puppeteer
11
Организует обмен с Dev Tools за нас

12. Всё просто!
12
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'example.png' });
await browser.close();
})();

13. Как бы не так!
13

14. Это всего лишь инструмент
для общения с Dev Tools
14

15. Открытые вопросы
15
• Скриншоты react-компонентов
• Одинаковый результат рендеринга
• Эмуляций мобильного viewport
• Параметризация
• Быстрый доступ и кэш

16. Шаг 1:
создаем Docker-контейнер
с единой версией ОС и Chromium
16

17. Поднимаем контейнер по
постоянному адресу
17

18. Решили вопросы идентичности
и быстрого доступа
✅
18

19. Шаг 2:
сделать всё остальное
😟
19

20. Общий принцип
20
Запустить Chromium
• Ждать запросов
• Открыть страницу
• Сделать скриншот
• Закрыть страницу

21. Добавили несколько параметров
21
• source < url | html >
• viewport < { width, height, … } >
• device < preset name >
• cookie < cookies >

22. Пример запроса
22
{
source: "https://avito.ru",
device: "iPhone 6",
cookie: {
session: "ghjyu532trghyj4456"
}
}

23. Пример запроса
23
{
source: ReactDOMServer.renderToStaticMarkup(jsx)
}

24. 24

25. Puppeteer очень
чувствительный
🤷
25

26. Скрипт нормализации занял
≈223 LOC
26

27. Казалось, что битва за
стабильность закончена
27

28. Всё просто!
28
const params = normalize(req.body);
const page = await browser.createPage(params);
const image = await browser.screenshot(page, params);

29. 29

30. 30
• Dev Tools может крашнуться в
любой момент
• Страница может крашнуться в
любой момент
• Браузер может не запуститься
🤷

31. 31
Запуск Chromium
1. Запускаем до победного
chromium --incognito
--no-sandbox
--disable-setuid-sandbox
2. Если крашнулся (событие diconnected), то
смотри п1

32. Создание скриншота
32
const params = normalize(postBody);
let page;
try {
page = await browser.createPage(params);
page.on('error', () => {
page.close();
page = null;
});
... // сделать скриншот
} catch (e) {
if (page) {
page.close();
}
} * псевдокод

33. Теперь-то всё?
🤷
33

34. 34

35. Chromium внутри docker отказывается
делать скриншоты больших страниц
%
35

36. 36
Запуск Chromium
1. Запускаем до победного
chromium --incognito
--no-sandbox
--disable-setuid-sandbox
--disable-dev-shm-usage
2. Если крашнулся (событие diconnected), то
смотри п1

37. Теперь всё стабильно!
🙋
37

38. «One more thing…»
38

39. ≈450 тестов скриншотами
39

40. 40
У нас уже есть созданные скриншоты страниц/HTML
Мы не хотим делать их заново

41. Серверное кэширование
41
const hash = hashParams(params);
if (cacheExists(hash)) {
sendImageFromCache(hash);
} else {
const image = createScreenshot(params);
saveToCache(hash, image);
sendImageFromCache(hash);
}
* псевдокод

42. Клиентское кэширование
42
Cache-Control: public, must-revalidate, max-age=…

43. 43

44. 44
Без expires по-разному работает в
разных браузерах!
🤷

45. Клиентское кэширование
45
Для URL: Cache-control + Expires (1 час)
Для HTML: Cache-control + Expires (1 час) + ETag

46. Теперь точно всё!
🙋
46

47. «Живые» скриншоты
47
/?source=https://www.avito.ru/profile/login

48. Доклад Романа Дворнова про
ускорение тестирования
48
Видео
Слайды

49. Open Source?
49
Следите за нашим GitHub

50. Что в итоге сделали
50
• Написали сервис над puppeteer
• Подняли docker-контейнер
• Добавили параметризацию + нормализацию
• Обработали ошибки браузера и страницы
• Добавили двухуровневое кэширование

51. Вывод
51
Инструмент != готовый сервис

52. Спасибо за внимание
@smelukov
Сергей Мелюков
52
Задавайте вопросы
❓