reliable dom testing with browser-monkey
TRANSCRIPT
![Page 1: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/1.jpg)
browser-monkeyБыстрые и удобные тесты в DOMе
1
Artem Avetisyan
[email protected] https://github.com/artemave
![Page 2: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/2.jpg)
2
Зачем тестировать в браузере?
- в случае SPA, браузер код сложный и его много
- облегчает разработку
![Page 3: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/3.jpg)
3
Да, но это же медленно?
- в full stack интеграционных тестах медленно
- в изолированных тестах совсем наоборот
![Page 4: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/4.jpg)
4
thin client - fat server
Server-side MVC
- в UI нет функционального кода
- UI сложно изолировать
![Page 5: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/5.jpg)
5
- тестировать только UI код имеет смысл
- UI код просто изолировать
Client-side SPAfat client - thin server
![Page 6: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/6.jpg)
6
Существующие решения?
- WebDriverIO
![Page 7: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/7.jpg)
7
Чем нам не угодил Webdriver?
- тест исполняется в NodeJs, код - в браузере
- WebDriver стартует браузер и предоставляет DOM interaction API
![Page 8: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/8.jpg)
8
browser-monkey
- ничего лишнего: только DOM interaction API
- все исполняется в браузере
![Page 9: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/9.jpg)
9
![Page 10: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/10.jpg)
10
![Page 11: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/11.jpg)
11
Не плохо
- тест изобилует css селекторами
- плохо читается без комментариев
Но…
![Page 12: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/12.jpg)
12
![Page 13: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/13.jpg)
13
Component API
DSL для описания структуры страницы
![Page 14: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/14.jpg)
14
![Page 15: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/15.jpg)
15
Красота
![Page 16: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/16.jpg)
16
“Run it anywhere”
- не запускает браузер
- можем гонять тесты в разных окружениях
16
![Page 17: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/17.jpg)
17
В командной строке
- VDOM
![Page 18: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/18.jpg)
18
![Page 19: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/19.jpg)
19
В командной строке
- electron
19
![Page 20: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/20.jpg)
20
![Page 21: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/21.jpg)
21
В Хроме
- для разработки
![Page 22: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/22.jpg)
22
![Page 23: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/23.jpg)
23
Debug лог
![Page 24: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/24.jpg)
![Page 25: Reliable DOM testing with browser-monkey](https://reader034.vdocuments.mx/reader034/viewer/2022042723/586f8fdc1a28ab54768b778f/html5/thumbnails/25.jpg)
Вопросы?
25
Artem Avetisyan
[email protected] https://github.com/artemave
Demo project: https://github.com/artemave/browser-monkey-example
browser-monkey: https://github.com/featurist/browser-monkey