Селектор существует, но не может получить информацию об узле, поскольку указанный селектор не соответствует ни одному узлу в дереве DOM

Я использую NodeJS и TestCafe для создания теста E2E.

Мы начали использовать BrowserStack для выполнения кросс-браузерных тестов, и я пытаюсь запустить скрипты для Windows7: firefox и Windows10: firefox.

Когда я запускаю TestCafe с этими параметрами, тогда и только тогда я получаю ошибку. Поэтому я не вижу этого сбоя при запуске на Samsung Galaxy S9: chrome или Samsung Galaxy S9: firefox или Windows 10: edge или Windows 7: chrome.

Наш сайт разработан с учетом размеров окна браузера. Итак, если окно маленькое, мы видим кнопку меню гамбургера, которая расширяется, чтобы предоставить такие параметры, как «Вход», «Выход», «Проекты» и т. Д.. Если окно большое или (широкое), то все отображается в строке заголовка.

Как я уже сказал, все это отлично работает во многих разных браузерах, но не в Firefox в Windows 7 или 10. Я попытался адаптировать свой код сценария для работы с более сложным сценарием: перехватить кнопку меню гамбургера, если она есть, и игнорировать ее. если его нет в DOM. Я НЕ хочу иметь в своем решении какой-либо код, который проверял бы параметры / свойства высокодинамичного сценария тестирования, такие как разрешение экрана или конкретный браузер или версия браузера, версия ОС или ОС, и т. д. Итак, НИЧЕГО вроде:

if (OperatingSystem === 'Windows' && Browser === 'firefox')

- Ой, больно даже писать эту строку кода выше.

Так что это вполне может быть специфическим для браузера сценарием, но опять же, он отлично работал с Samsung Galaxy Tab 4: firefox и Samsung Galaxy S9: firefox.

Вот что происходит: поскольку я запускаю сценарий на рабочем столе Windows 7 и 10 с помощью firefox, меню hambuger не отображается на экране. Однако условие:

if (await navbar.hamburgerMenu.exists === true) {
    // Execution gets here, even though there is NO hamburgerMenu button.
    // The next line triggers an error that kills the script.
    if (await navbar.hamburgerMenu.visible) {
        // The above line of code returns an error:
// Cannot obtain information about the node because the specified selector does not match any node in the DOM tree.
// Then how come it passed the hamburgerMenu.exists === true condition?!

Я также должен добавить, что селектор hamburgerMenu определяется с помощью visibilityCheck: true

Хотя знаю, что в данном случае на результат это не влияет, потому что

if (Selector('blablabla', {( visibilityCheck: true )})

отличается тогда

if (Selector('blablabla').visible === true)

Я уже знаю, что первое не разрешается в условии filter-if, как оно используется выше, а рекомендуемое условие filter-if - второе, поэтому я его использовал.

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

Единственное, о чем я могу думать, это то, что, возможно, опция .visible для веб-элементов в Windows Desktop: Firefox каким-то образом возвращает другой результат или поведение, чем если бы это был Android: firefox или Desktop: chrome или Android: chrome.

Я не хочу использовать метод document.getElementByID, поскольку это технически не является селектором CSS, и все наше предприятие стандартизировано на селекторе CSS, поэтому все, что идет по DOM, кроме селектора CSS, не пройдет мимо нашего процесса проверки кода. в любом случае.

Итак, я снова ищу решение общего назначения, которое будет работать во всех этих сценариях / ситуациях. Есть мысли или идеи? Заранее спасибо!!

Связанный (но другой) вопрос: TestCafe - Как проверить, существует ли веб-элемент или нет, не провалив тест? TestCafe - Как проверить, существует ли веб-элемент или нет, не провалив тест?


node.js ecmascript-6 testcafe cross-browser browserstack
person Seth Eden    schedule 16.07.2018    source источник
comment
Вы не можете использовать документ. getElementByID, однако, можете ли вы рассмотреть возможность использования document.querySelector ('your_css')? Вы можете выполнить необходимую проверку видимости возвращаемого элемента   -  person BountyHunter    schedule 16.07.2018
comment
Вы пытались извлечь из условия await navbar.hamburgerMenu.exists, сохранить его значение в переменной и зарегистрировать его?   -  person Andrey Belym    schedule 17.07.2018
comment
Я глубоко и долго изучал DOM и обнаружил НУЛЕВУ (0) разницу между тем, когда он виден, и когда он не виден. Один из членов нашей команды считает, что он обнаружил атрибут, который изменяется во внутреннем Javascript, поэтому у нас может быть способ обойти эту проблему. Я буду обновлять соответственно по мере нашего прогресса.   -  person Seth Eden    schedule 17.07.2018
comment
Чтобы проверить, существует ли веб-элемент или нет, не провалив тест, может быть полезна эта статья: Оценка селектора свойства и немедленная проверка его значения   -  person hdorgeval    schedule 12.01.2019
comment
Отлично! Спасибо, что поделились!! :-D   -  person Seth Eden    schedule 12.01.2019

Ответы (1)


arrow_upward
2
arrow_downward

В итоге нам пришлось написать клиентскую функцию, которая запрашивала бы вычисляемый стиль с помощью querySelector и получала значение его свойства.

Код решения в итоге выглядел так:

const getHamburgerDisplayValue = ClientFunction(() => {
     var hamburgerDisplayValue;

     hamburgerDisplayValue = window.getComputedStyle(document.querySelector('span.navbar-burger')).getPropertyValue('display');

     return hamburgerDisplayValue;
 });

Тогда код вызывающего абонента выглядел так:

 var hamburgerDisplayValue = await Common.getHamburgerDisplayValue();

 // Act
 if (hamburgerDisplayValue === 'block') {
      await t.click(navbar.hamburgerMenu);
 }
 await t.click(navbar.login);
person Seth Eden    schedule 11.01.2019