Home > Элегантные решения > О, хитрая дрянь! Клик по кнопке JQuery

О, хитрая дрянь! Клик по кнопке JQuery

В мире все ещё много дряни. Вот, например, кнопки, реализованные с помощью jQuery: курсором по ней кликать можно, а через Selenium – увы.

Кнопка, расположенная под текстовым полем, представляет из себя нечто вот такое:

<div  class=”judge”>
<button class=”win-button disabled“>
……….<span class=”out”><span class=”button”>Поделиться</span></span>
</button>

После того, как в текстовое поле комментария будет вписан какой-нибудь текст, локатор кнопки изменится:

<div  class=”judge”>
<button class=”win-button“>
……….<span><span>Поделиться</span></span>
</button>

В момент нажатия на кнопку локатор снова меняется:

<div  class=”judge”>
<button class=”win-button pushed“>
……….<span><span>Поделиться</span></span>
</button>

А когда кнопка будет “освобождена”, локатор вообще невообразимо превращается в

<div  class=”judge disabled“></div>

То есть, кнопка вообще исчезает. Коммент сделан, Рубикон брошен на игральный стол (все же знают, что такое кубик Рубикона, не так ли?!)

В общем, не в локаторах проблема. Проблема в том, что Selenium IDE для клика на такие нестандартные кнопки требуется нестандартный подход.

Секрет Дело в том, что эта кнопка реагирует на событие mouseUp и mouseDown.

Рассмотрим работу подобных неурядиц на живом примере: сегодня DOU.ua будет нашей подопытной крыской.

Ммм…

На форуме DOU.ua есть много мнений. Если мне не нравится чье-то мнение, я должен сказать об этом не открыто, а скрытно, посредством отправки администрации сайта сообщения-жалобы на конкретную реплику.

Сценарий:

  1. навести курсор на реплику, с чьим содержимым я не согласен.
  2. найти всплывающую круглую кнопку серого цвета. При наведении курсора на нее кнопка становится красной.
  3. клик по кнопке – откроется форма для добавления сообщения.
  4. вписать в текстовое поле сообщение, засабмитить его администрации рынка по кнопке “Поделиться”

Хм…

Усложним сценарий:

5. мне не нравятся все мнения какого-нибудь автора, поэтому я хочу “пожаловаться” абсолютно на каждую реплику выбранного мною автора на странице форума.

Приступ

.

Ну, предположим, что мне не нравятся абсолютно ВСЕ реплики юзера ‘Alexander Kuznyak’ на странице http://dou.ua/forums/topic/5688/ (тема о продаже машины).

label oVenitKonetsul
storeExpression Alexander Kuznyak userName
Вызываем окно диалога “жалобы”
click //div[@class=’l-avatar’]/a/span[contains(text(), ‘${userName}’)]/../../../../div[@class=’bottom-line’]/div[@class=’edit-tool b-buttons’]/div[@class=’judge’]
Пишем текст “жалобы”
type name=complain ${userName} отлично продает машины, взлелеянные твердым воском! Он крут!
Начинаем пляски над кнопкой “Поделиться”
mouseOver css=button.win-button
mouseDown css=button.win-button
mouseUp css=button.win-button
“Жалоба” добавлена. Переходим к началу, ищем реплику, на которую еще “не было жалоб”, снова “жалуемся”…
gotolabel oVenitKonetsul

Что следует учесть:

  1. если я “пожаловался” на какой-нибудь комментарий, то отныне и впредь для моего аккаунта кнопка “пожаловаться” под упомянутым комментарием становится недоступной. Следовательно, отпадает морочная задача “проверять, если для этого комментария уже была сделана жалоба”. Восславим верстальщика DOU – он все сделал грамотно.
  2. xPath на ресурсе местами получается весьма громоздким. Обращение к кнопке “жалобы” происходит через “css=button.win-button” – просто для краткости. Обращение же к реплики за авторством определенного аккаунта прописано более точно, чтобы не ошибиться.
  3. многие комментарии скрываются за кнопкой “Развернуть”. Это не проблема, они в коде все равно присутствуют 🙂
  4. когда на странице исчезнут элементы, достойные кликов, скрипт запорется на шаге вызова окна диалога “Жалобы”. Можно заморочиться тем, чтобы сделать проверку “if > else” для этого шага, чтобы по итогам выводился красивый поп-ап с умным сообщением.
  5. следует учесть скорость прогона этого скрипта. Или надо приписать проверку того, что вызванный элемент завершает свою работу, или же уменьшить скорость выполнения скрипта хотя бы на половинную скорость.
  1. Ulyana
    9 August 2012 at 17:35

    Очень полезная статья. Спасибо.

    Помогите мне справится со следующей задачей, думаю что похожей. На сайте http://www.e-kvytok.ua/wps/myportal/ если в поле “Станция отправления” ввести минимум 3 первых символа, то появляется поп-ап с вариантами для выбора. Так вот у меня не получается с помощью Selenium IDE вызвать этот поп-ап.
    Я посмотрела html код и сделала вывод, что когда поп-ап появляется, то в елемента ul style=”z-index: 1; top: 230px; left: 263px; display: block; width: 231px;”. А когда поп-апа нет, то ul style=”z-index: 1; top: 230px; left: 263px; display: none; width: 231px;”. Значит у меня задача сводится к:
    а) вызвать необходимое событие, которое изменит значение style для елемента ul (какое это событие?)
    или
    б) каким-то другим способом изменить значение style на нужное
    в) другой мне не известный вариант решения

    Подскажите.

    • Ulyana
      10 August 2012 at 14:43

      Ура, нашла решение. Сначало с помощью type вводм в input 3 символа, а тотом по этому же input делаю keyDown. В результате появляется нужный поп-ап.

      • 10 August 2012 at 15:29

        Отлично!

      • cugunder
        16 April 2013 at 12:54

        Сейчас это можно сделать одной командой: sendKeys

  2. Vlad
    3 February 2015 at 12:29

    Спасибо! Работает.

  3. 17 April 2017 at 18:01

    Долго искал информацию как через IDE дернуть JQuery. Эмуляция скопа событий mouseOver, mouseDown,mouseUp действительно сработала. Спасибо! Статья очень помогла!

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

<span>%d</span> bloggers like this: