0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<h2>E2E Тестирование</h2>
1
<h2>E2E Тестирование</h2>
2
<p>jest-puppeteer - библиотека для тестирования с открытым исходным кодом</p>
2
<p>jest-puppeteer - библиотека для тестирования с открытым исходным кодом</p>
3
<p>Пример конфига для jest:</p>
3
<p>Пример конфига для jest:</p>
4
<p>Пример конфига для jest-puppeteer:</p>
4
<p>Пример конфига для jest-puppeteer:</p>
5
<p>Пример теста:</p>
5
<p>Пример теста:</p>
6
<p>Метод evaluate() позволяет выполнить переданную фукнкцию, как если бы она была выполнена на странице. Первым параметром принимает функцию, которую нужно выполнить, а остальные параметры передаются в качестве аргументов в выполняемую функцию:</p>
6
<p>Метод evaluate() позволяет выполнить переданную фукнкцию, как если бы она была выполнена на странице. Первым параметром принимает функцию, которую нужно выполнить, а остальные параметры передаются в качестве аргументов в выполняемую функцию:</p>
7
<p>Пример теста для формы регистрации:</p>
7
<p>Пример теста для формы регистрации:</p>
8
<p>Пример создания скриншотов и изменение размера страницы:</p>
8
<p>Пример создания скриншотов и изменение размера страницы:</p>
9
<p>Для проверки разных размеров страницы, удобно использовать test.each:</p>
9
<p>Для проверки разных размеров страницы, удобно использовать test.each:</p>
10
<p>Пример эмуляции другого устройства:</p>
10
<p>Пример эмуляции другого устройства:</p>
11
<p>Пример прерывания запроса:</p>
11
<p>Пример прерывания запроса:</p>
12
<h3>Puppeteer</h3>
12
<h3>Puppeteer</h3>
13
<p>Тесты и браузер имеют разную среду. Чтобы запустить код в контексте браузера, нужно использовать evaluate():</p>
13
<p>Тесты и браузер имеют разную среду. Чтобы запустить код в контексте браузера, нужно использовать evaluate():</p>
14
<p>Пример извлечения элементов:</p>
14
<p>Пример извлечения элементов:</p>
15
<p>Тоже самое, но с передачей селектора в переменной:</p>
15
<p>Тоже самое, но с передачей селектора в переменной:</p>
16
<p>Еще один пример:</p>
16
<p>Еще один пример:</p>
17
<p>Playwright также имеет метод evaluate():</p>
17
<p>Playwright также имеет метод evaluate():</p>
18
<p>Как не надо делать:</p>
18
<p>Как не надо делать:</p>
19
<p>Правильный способ:</p>
19
<p>Правильный способ:</p>
20
<h2>Работа с асинхронностью</h2>
20
<h2>Работа с асинхронностью</h2>
21
<p>Есть несколько событий, которые мы ожидаем:</p>
21
<p>Есть несколько событий, которые мы ожидаем:</p>
22
<ul><li>загрузка страницы</li>
22
<ul><li>загрузка страницы</li>
23
<li>изменения на странице (изменения в DOM-дереве)</li>
23
<li>изменения на странице (изменения в DOM-дереве)</li>
24
<li>запросы</li>
24
<li>запросы</li>
25
<li>кастомные ожидания</li>
25
<li>кастомные ожидания</li>
26
</ul><h2>Ожидание загрузки страницы</h2>
26
</ul><h2>Ожидание загрузки страницы</h2>
27
<h3>Selenium</h3>
27
<h3>Selenium</h3>
28
<h3>Cypress</h3>
28
<h3>Cypress</h3>
29
<h3>Playwright and Puppeteer</h3>
29
<h3>Playwright and Puppeteer</h3>
30
<h2>Ожидания изменений на странице</h2>
30
<h2>Ожидания изменений на странице</h2>
31
<h3>Selenium</h3>
31
<h3>Selenium</h3>
32
<h3>Cypress</h3>
32
<h3>Cypress</h3>
33
<h3>Playwright и Puppeteer</h3>
33
<h3>Playwright и Puppeteer</h3>
34
<h2>Ожидание запросов</h2>
34
<h2>Ожидание запросов</h2>
35
<h3>Selenium</h3>
35
<h3>Selenium</h3>
36
<h3>Cypress</h3>
36
<h3>Cypress</h3>
37
<h3>Playwright and Puppeteer</h3>
37
<h3>Playwright and Puppeteer</h3>
38
<h2>Ожидание кастомных изменений</h2>
38
<h2>Ожидание кастомных изменений</h2>
39
<p>Мы хотим дождаться, пока глобальной переменной user не будет присвоено значение Ivan</p>
39
<p>Мы хотим дождаться, пока глобальной переменной user не будет присвоено значение Ivan</p>
40
<h3>Selenium</h3>
40
<h3>Selenium</h3>
41
<h3>Cypress</h3>
41
<h3>Cypress</h3>
42
<h3>Playwright и Puppeteer</h3>
42
<h3>Playwright и Puppeteer</h3>
43
<h2>Итог</h2>
43
<h2>Итог</h2>
44
<p>Ниже плохой пример, в нем используется магическое число и код останавливается на какое-то время. Не факт, что обработка события успеет завершиться к этому времени</p>
44
<p>Ниже плохой пример, в нем используется магическое число и код останавливается на какое-то время. Не факт, что обработка события успеет завершиться к этому времени</p>
45
<p>Ниже правильный пример. Указываем какие элементы ожидать:</p>
45
<p>Ниже правильный пример. Указываем какие элементы ожидать:</p>
46
46