Получение цвета элемента возвращает неправильный цвет в селен JavaScript

Question

Цвет элемента изменяется в зависимости от того, что является одним из значений, и мне нужно проверить этот цвет.Я присвоил идентификатор нужному элементу?

Есть еще один элемент, к которому я могу добавить идентификатор:

, но, похоже, возникла та же проблема.

    const elmRating = await driver.wait(until.elementLocated(By.id("overallRating-20002")),4000).getText()
    const elmColor = await driver.wait(until.elementLocated(By.id('colorOf-20002'))).getCssValue("color")
    console.log(elmColor)

распечатывает: rgba(60, 72, 88, 1), который не является правильным (зеленым) цветом

Я пытался изменить его на (возвращает rgba(0, 0, 0, 0))

    const elmColor = await driver.wait(until.elementLocated(By.id('colorOf-20002'))).getCssValue("background-color")

, и это возвращает NULL

    const elmColor = await driver.wait(until.elementLocated(By.id('colorOf-20002'))).getAttribute("background-color")

Answer 1

У меня нет большого опыта работы с Selenium, но давайте попробуем.

Во-первых, getCssValue, я считаю, правильный метод для использования; он вернет значение свойства CSS, тогда как getAttribute вернет значение атрибута HTML (например, "foo" in <div id="foo">); getAttribute возвращает null, поскольку нет такого атрибута для возврата.

Теперь. С одной стороны, вы пытаетесь получить цвет фона элемента в этой строке:

const elmColor = await driver
  .wait(until.elementLocated(By.id('colorOf-20002')))
  .getCssValue("color")

Но свойство color определяет цвет текста, а не фона. (Интересно отметить, что цвет, который он возвращает, соответствует цвету круглого элемента с символом больше, чем).

Мне кажется, что эта строка должна работать, когда вы нацеливаетесь на div (маловероятно, что тег h5 является правильным элементом для нацеливания):

const elmColor = await driver
  .wait(until.elementLocated(By.id('colorOf-20002')))
  .getCssValue("background-color")

Тот факт, что сделанный вами вызов вернул значение RGBA с обнуленным альфа-каналом, означает, что он нацелен на элемент с прозрачным фоном, поэтому я предполагаю, что эта конкретная строка была вызвана после того, как вы прикрепили свой идентификатор к h5 element.

tl; dr: Я думаю, это сработает, если вы вернете ID на div и используете background-color вместо color. (Примечание по этому идентификатору: для целей тестирования обычно более целесообразно использовать атрибут данных для целевых элементов.)