Есть ли способ вывести по локатору информацию об элементе (чтобы различить два очень похожих элемента, отличающихся цветом)?

общие вопросы
#1

Ситуация следующая:
Есть форма и на форме некие поля ввода. В зависимости от действий, производимых над формой (варианты заполнения) на ней отображаются подсказки (tooltips) , которые в коде страницы имеют вид тегов, грубо говоря, <div class="class1 class2 class3" ><span>Please enter your name</span></div>

При первом клике по полю Name этот тултип “Please enter your name” выводится зелёного цвета. При втором - меняет цвет на красный. При этом в Firebug и красный и зелёный тултип по коду неотличимы. Одни и те же теги, одни и те же классы, один и тот же текст.

Вопросы:

  1. есть ли какие-то методы, позволяющие по локатору вывести “всё, что мы знаем об этом элементе”? (чтобы куда-то эту информацию сбросить и сравнить эти два разноцветных тултипа)
  2. каким образом вообще можно “зацепить” элемент по цвету (предположим, других элементов этого цвета на странице нет), если мы его возьмём, допустим, некоей “экранной пипеткой”?

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

  1. (вопрос, проистекающий из первых двух и связанный с ними) Какие самые подробные мануалы с локаторами с приведением многих и разных примеров вам, может, попадались? (ряд просмотренных таблиц / книг и руководств ограничиваются локаторами, условно говоря, второго-третьего уровня сложности (level 1: единичный элемент и его атрибуты, level 2: связка двух элементов, 3: связка двух элементов и путь от связки), а хотелось бы, так сказать, энциклопедию, включающую даже редкие и изысканные случаи вроде моего вопроса “поиск по цвету”)
#2

По поводу цвета ответ однозначен - нужно получать css проперти элемента. Как это сделать - другой вопрос. Нужно смотреть в код страницы, а именно - на вкладку стилей. Проследите, какое свойство изменяется у элемента при клике. Его значение вам и нужно будет вытягивать. Если стандартный getCssValue не помогает, можно JS’ом это сделать. Результат скорее всего будет возвращаться в RGB формате, который вам еще придется сконвертировать в удобоваримый вид для сравнения. Тултип элемента тоже можно JS’ом вытянуть. В общем, нужно более детально смотреть в код.

Update: касательно мануалов, летом постили хороший гайд по XPath.

#3

Код показать не могу (не моя и проприетарная разработка), поэтому интересует именно принцип работы, чтобы самому разобраться и сделать.

Не подбросите ли мануалов/примеров по работе с этими CSS Property (допустим, я нашёл этот атрибут цвета на указанной Вами вкладке), и, особо желательно какой-нибудь практический CSS селектор на основе цвета.

Гайд хороший, да, просматривал.

#4

На вскидку, можете почитать гайд по работе jQuery с css.

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


    @Test
    public void checkElementColor() {
        final Color color = convertRGBToColor(getDriver()
                        .findElement(By.cssSelector("#ember925>a"))
                        .getCssValue("color"));

        assertTrue(color != null && color.equals(Color.WHITE));
    }

    @Test
    public void checkElementBgColor() {
        final Color color = convertRGBToColor(getDriver()
                .findElement(By.cssSelector("#ember925>a"))
                .getCssValue("background-color"));

        assertTrue(color != null && color.equals(new Color(228, 87, 53)));
    }

    public Color convertRGBToColor(final String rgba) {
        final Pattern pattern = Pattern.compile("rgba *\\( *([0-9]+), *([0-9]+), *([0-9]+), *([0-9]+) *\\)");
        final Matcher matcher = pattern.matcher(rgba);

        if (matcher.matches()) {
            return new Color(Integer.valueOf(matcher.group(1)), // r
                    Integer.valueOf(matcher.group(2)),          // g
                    Integer.valueOf(matcher.group(3)));         // b
        }

        return null;
    }

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

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

Пробуйте. :wink: