Проверка изменений состояния наведения с помощью транспортира

Независимо от того, что я делаю, я не могу получить состояние зависания с испытаниями транспортира. Следующий код является полуфункциональным.

  • Хорошо работает в Firefox
  • Работает только при прокрутке области в Chrome.
  • Сбой в Phantom JS
obj
  .getCssValue('color')
  .then(function (color1) {
    browser
      .actions()
      .mouseMove(obj)
      .perform()
      .then(function () {
        obj
          .getCssValue('color')
          .then(function (color2) {
            expect(color1)
              .not
              .toEqual(color2);
          });
      });

Ответы

Ответ 1

Недавно мы столкнулись с чем-то подобным.

Что помогло нам подождать, пока элемент будет иметь определенное значение CSS, используя browser.wait():

function waitForCssValue (elementFinder, cssProperty, cssValue) {
    return function () {
        return elementFinder.getCssValue(cssProperty).then(function (actualValue) {
            return actualValue === cssValue;
        });
    };
};

Использование:

browser.wait(waitForCssValue(obj, 'color', color2), 5000);

Здесь мы в основном ожидаем до 5 секунд, чтобы значение CSS color было равно color2. Примените вызов ожидания сразу после наведения элемента.

Кроме того, я помню, что просмотр этой прокрутки помог решить подобные проблемы в SO:

browser.executeScript("arguments[0].scrollIntoView();", obj);

Максимальное окно браузера также может помочь, мы обычно делаем это в onPrepare():

onPrepare: function () {
    browser.driver.manage().window().maximize();
},

Дополнительная заметка о PhantomJS:

Прежде всего, разработчики транспортиров рекомендуют не тестировать сквозные тесты protrator с помощью PhantomJS:

Примечание. Мы рекомендуем использовать PhantomJS для испытаний с помощью Protractor. Есть много сообщений о проблемах при сбое и приведении в действие PhantomJS в отличие от реальных браузеров.

Кроме того, см.

Здесь я пытаюсь понять, что вы должны пожертвовать аргументом "Fails in Phantom JS".

Ответ 2

Решение 1:

Просто используйте функцию простого наведения для вашего объекта

<!DOCTYPE html>
<html>
<body>

<p onmouseover="colorin(this)" onmouseout="colorout(this)">
Testing colorin and colorout function for mouse hover
</p>


<script>
function colorout(x) {
    x.style.color = "#000000";
}

function colorin(x) {
    x.style.color = "#7FAF00";
}
</script>

</body>
</html>