Привет!

На дворе 6 декабря, мы продолжаем рождественский календарь Selenide.
И сегодня я покажу один простой способ поймать некоторые нестабильные тесты.

Что не так с кликами?

Вечная проблема - флейки тесты (моргающие, нестабильные).
Одна из типичных причин - клик не срабатывает.
Как я подробно рассказывал в этом видео на DelEx 2019, клик в селениуме часто не срабатывает потому, что элемент в этот момент двигался, растягивался, сжимался, или внезапно появился какой-то другой элемент и перекрыл наш. И клик попал в него.

Почему селенид это уже не решил?

Глобальное решение могло бы быть такое: метод $.click(), перед тем, как кликнуть, сначала ждёт окончания любых движений и анимаций. Но пока в селениде такого нет: я боюсь, что сделать абсолютно универсальную “ожидалку” на все случаи жизни просто невозможно. Проекты разные, UI разный, фреймворки разные, анимации разные. Если у вас есть идеи, как это можно было бы реализовать - обращайтесь, запилим.

А пока нам остаётся делать какие-то свои “ожидалки” в каждом конкретном проекте.

А я хочу показать способ, как узнать, куда клик попал на самом деле. Это не решит проблему полностью, но хотя бы поможет её локализовать.

Как визулизировать клик?

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

#{if test}
    <script>
      function onClick(event) {
        var e = event || window.event;
        var target = e.target || e.srcElement;
        target.style['box-sizing'] = 'border-box';
        target.style['border'] = '2px solid green';
      }
    
      document.addEventListener('click', onClick);
    </script>
#{/if}

Естественно, приведённый код зависит от вашего фреймворка, приложения, проекта и т.д.
Цвет и толщина рамки - от вашего дизайна. Возможно даже, это должна быть не рамка, а что-то другое.
Главное, чтобы было видно, какой элемент был реально кликнут.

Здесь можно посмотреть один из примеров реализации: Highlighter.

Что теперь?

Если у вас есть мигающие тесты (а они есть у всех) - начните с этого шага, и вы хотя бы увидите, куда попал клик. А дальше уже будем разбираться.

Андрей Солнцев

ru.selenide.org

06.12.19