Клики: click, tap

Операции клика и тапания являются важнейшими элементами автоматизированных тестов в браузере, особенно при тестировании веб-приложений с динамическими интерфейсами. Puppeteer предоставляет два основных метода для выполнения кликов: click и tap. Оба эти метода играют важную роль в имитации взаимодействия пользователя с элементами страницы, но их поведение и область применения могут отличаться.

Метод click

Метод click используется для имитации клика по элементу на веб-странице. Он наиболее часто применяется при тестировании кнопок, ссылок, чекбоксов и других интерактивных элементов интерфейса.

Пример использования: 

await page.click(&


Здесь мы имитируем клик по элементу с идентификатором
submit-button.




Основные характеристики метода:



    

  1. 
Позиционирование на элементе: Puppeteer автоматически
определяет положение элемента на экране и выполняет клик в его центре. В
случае, если элемент скрыт или находится за другим элементом, клик может
не произойти.

    2. 

  2. 
Тип события: Клик имитирует событие мыши
click, что означает, что будет вызвано событие
mousedown, mouseup и, наконец,
click. Это важно, когда требуется тестировать обработчики
событий, связанные с кликами.

    3. 

  3. 
Параметры времени ожидания: Puppeteer ждет, пока
элемент не станет видимым и доступным для взаимодействия, но также можно
установить кастомное время ожидания через параметр timeout.

    4. 




Пример с дополнительными параметрами:



await page.click('#submit-button', {timeout: 5000, delay: 100});



Здесь timeout указывает время ожидания перед ошибкой, а
delay добавляет задержку перед кликом, что может быть
полезно для имитации реального пользовательского поведения.




Метод tap




Метод tap является альтернативой методу click
и используется для мобильных устройств. Он был введен для улучшения
поддержки взаимодействий в мобильных приложениях, где часто встречаются
события касания, а не клика мышью. Метод tap выполняет
виртуальное касание экрана.




Пример использования:



await page.tap('#submit-button');



Особенности метода tap:



    

  1. 
Эмуляция касания: Этот метод больше подходит для
тестирования мобильных интерфейсов или для случаев, когда необходимо
эмулировать работу сенсорных экранов. tap создает одно
касание экрана, аналогичное тому, как это происходит при нажатии пальцем
на экран мобильного устройства.

    2. 

  2. 
Сценарии использования: Хотя метод click
можно использовать в обоих случаях (и для настольных, и для мобильных
версий сайтов), tap больше подходит для мобильных устройств
и часто используется в тестах, направленных на проверку мобильных версий
сайтов или приложений.

    3. 

  3. 
Сравнение с click: Несмотря на схожесть с
click, tap не имитирует полное поведение клика
мыши, а только одно касание с элементом. Это может влиять на поведение
событий в зависимости от того, какой тип устройства моделируется.

    4. 




Взаимодействие с элементами




Для корректного использования обоих методов важно заранее
удостовериться, что элемент доступен для взаимодействия. Puppeteer
предоставляет методы для проверки видимости и кликабельности элемента,
например, waitForSelector, waitForFunction,
waitForXPath.




Пример с использованием waitForSelector перед кликом:



await page.waitForSelector('#submit-button', {visible: true});
await page.click('#submit-button');



Здесь мы ждем, пока элемент станет видимым, перед тем как совершить
клик.




Разница в использовании click и tap




Хотя оба метода выполняют схожие действия, между ними есть несколько
отличий, которые важно учитывать:



    

  • 
Платформа: click используется на
десктопных платформах, а tap — на мобильных устройствах.

    • 

  • 
Процесс события: click имитирует полный
цикл событий (mousedown, mouseup, click), тогда как tap
просто создает касание.

    • 

  • 
Надежность: Для тестирования мобильных версий
приложений метод tap будет предпочтительнее, так как он
точнее имитирует действия пользователя на сенсорных экранах.

    • 




Особенности работы с динамическими элементами




Одной из распространенных задач является клик по элементам, которые
появляются или изменяются динамически на странице. В этом случае важно
использовать дополнительные механизмы ожидания, чтобы удостовериться,
что элемент полностью загружен и доступен для взаимодействия.




Пример:



await page.waitForSelector('.dynamic-element', {visible: true});
await page.click('.dynamic-element');



Этот код ждет, пока элемент с классом .dynamic-element
станет видимым, после чего выполняет клик.




Важные моменты для правильной работы методов



    

  1. 
Неактивные элементы: Если элемент перекрыт другим
элементом или находится за пределами видимой области экрана, то клик не
будет выполнен. В таких случаях важно использовать методы прокрутки
страницы или видимости элементов.

    2. 

  2. 
Всплывающие окна и модальные окна: При работе с
всплывающими окнами или модальными окнами важно сначала убедиться, что
они открыты и видимы, иначе попытка клика может завершиться ошибкой.

    3. 

  3. 
Использование координат: Для более точного контроля над
действиями можно указывать координаты клика. Например, можно кликнуть не
по центру элемента, а в его левый верхний угол.

    4. 




Пример:



await page.click('#submit-button', { position: { x: 10, y: 20 } });



Этот код указывает координаты относительно верхнего левого угла
элемента, по которым будет произведен клик.




Влияние на тестируемые сценарии




Методы click и tap играют важную роль в
построении сценариев для тестирования различных пользовательских
действий. Важно учитывать, что при автоматизации тестов необходимо
учитывать реальное поведение пользователя на разных устройствах. Это
особенно важно в случае сложных интерфейсов и мобильных версий, где
сенсорное касание может значительно отличаться от работы с мышью.




С правильным выбором метода можно обеспечить более высокую точность
тестирования, а также ускорить процесс выполнения тестов, уменьшив
вероятность ошибок из-за некорректного взаимодействия с элементами
интерфейса.
Оглавление