NightwatchJS Невозможно найти элемент с помощью селектора CSS

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

<form id = "product_form" method = "POST" action = "/cart/add" role = "form">
  <div class = "row">
    <div class = "col-md-6 col-md-offset-3">
      <div>
        <img class = "product-image" src = "/static/images/products/4388801543.jpg" width = "500px" alt = "">
      </div>
    </div>
    <div class = "col-md-3 product-variants other_options">
      <h1 itemprop = "name" class = "product-single__title h3 uppercase">Samburu Shorts - Mens</h1>
      <p class = "product-single__price product-single__price-product-template">
        <span id = "ProductPrice" itemprop = "price" content = "$55.95">$55.95</span>
      </p>
      <input type = "radio" name = "variant_id" class = "hidden" id = "14903870471" value = "14903870471" onclick = "enableSubmit()"><label for = "14903870471" class = "option text-center  selector size-value">29x11 Sand-Grey</label>
      <input type = "radio" name = "variant_id" class = "hidden" id = "16304664135" value = "16304664135" onclick = "enableSubmit()"><label for = "16304664135" class = "option text-center  selector size-value">29x11 Aubergine-Grey</label>
      <input type = "radio" name = "variant_id" class = "hidden" id = "16304665799" value = "16304665799" onclick = "enableSubmit()"><label for = "16304665799" class = "option text-center  selector size-value">34x7-5 Sand-Grey</label>
      <div class = "product-add">
        <button id = "add-to-cart" class = "addItemToCart btn addToCart-btn product-form__cart-submit" disabled = "" type = "submit">Add to Cart</button>
      </div>
      <div class = "social-sharing">
        <a target = "_blank" href = "#" class = "btn clear btn--share share-facebook" title = "Share on Facebook">
        <img src = "//cdn.shopify.com/s/files/1/0281/7544/t/59/assets/img_share_fb.png?3517946130637841476">
        <span class = "visually-hidden">Share on Facebook</span>
        </a>
        <a target = "_blank" href = "#" class = "btn clear btn--share share-twitter" title = "Tweet on Twitter">
        <img src = "//cdn.shopify.com/s/files/1/0281/7544/t/59/assets/img_share_twitter.png?3517946130637841476">
        <span class = "visually-hidden">Tweet on Twitter</span>
        </a>
        <a target = "_blank" href = "#" class = "btn clear btn--share share-pinterest" title = "Pin on Pinterest">
        <img src = "//cdn.shopify.com/s/files/1/0281/7544/t/59/assets/img_share_pin.png?3517946130637841476">
        <span class = "visually-hidden">Pin on Pinterest</span>
        </a>
      </div>
    </div>
  </div>
</form>

Я пишу сценарий теста через NightwatchJS, где я пытаюсь выбрать один из переключателей, чтобы автоматизировать взаимодействие с пользователем. Блок тестирования кода, который я выписал, выглядит следующим образом:

'Check that widget loaded on new product page' : function(browser) {
   browser
      .waitForElementVisible('#monsoon-inline-reco-div-ul', longWait, () => {
      })
      .elements('css selector', '#monsoon-inline-reco-div-ul li', (results) => {
         browser.assert.equal(results.value.length, 4);
      })
      .click('#product_form > div > div:nth-child(2) > input[type=radio]')
      .pause(longWait)
      .end();
  }

Рассматриваемая строка - это команда щелчка. Я все время получаю ошибки о том, что скрипт не может найти элемент с помощью селектора css. Я протестировал это на консоли в самом браузере, используя document.querySelector('#product_form > div > div:nth-child(2) > input[type=radio]').click(), и был выбран переключатель. Не могли бы вы подумать о том, что я делаю неправильно, потому что я работаю над этим уже пару часов и пробовал множество разных вещей.

Если nightwatch.js ведет себя как jQuery, значит, ваш .click работает с подмножеством элементов, возвращаемых вызовом функции .elements - это означает, что селектор не вернет те же результаты, что и документ. т.е. он не выполняет document.querySelector, он выполняет someElement.querySelector. (поскольку #product_form не является потомком #monsoon-inline-reco-div-ul, здесь нет ничего удивительного)

Tibrogargan 25.06.2018 20:06

Из Справочник по API: «Найденные элементы будут возвращены как объекты WebElement JSON». Похоже, что у приведенного выше комментария есть хорошие шансы на то, что это так. Попробуйте просто завершить цепочку после вызова .elements() и начать новую цепочку с помощью browser.click(....

Tibrogargan 25.06.2018 20:12

Я также пробовал использовать input[type=radio]:first-child, чтобы убедиться, что есть только один элемент, но возникает ошибка, в которой говорится, что в значительной степени он пытается найти первого ребенка в пустом списке.

Michael Platt 25.06.2018 20:13

Да, конечно. Вы ищите только прямых потомков элементов li, которые являются потомками #monsoon-inline-reco-div-ul. Поскольку #product_form не является потомком #monsoon-inline-reco-div-ul, ваш список всегда будет нулевым.

Tibrogargan 25.06.2018 20:14

На самом деле, я вообще не вижу monsoon-inline-reco-div-ul в вашем HTML

Tibrogargan 25.06.2018 20:16

@Tibrogargan Я использую идентификатор div в качестве отправной точки для поиска. Щелчок должен начаться с этого места и начать переходить дальше по странице.

Michael Platt 25.06.2018 20:17

Не в твоем вопросе ты не

Tibrogargan 25.06.2018 20:17

Что ты имеешь в виду? Я не в своем вопросе. Начну с .click(#product_form.... Это селектор div, использующий знак фунта. Я также попытался закончить свою цепочку и начать новую, но ничего не произошло. Хотя ошибок нет

Michael Platt 25.06.2018 20:24

Селектор CSS #monsoon-inline-reco-div-ul буквально ищет элемент с идентификатором "monsoon-inline-reco-div-ul". В вашем HTML нет такого элемента

Tibrogargan 25.06.2018 20:31

Эта линия проходит нормально. Это необходимо для того, чтобы элемент появился на странице. Я не загружал HTML для всей страницы для краткости кода. Ошибка на вызове click. Все остальное в этом фрагменте работает.

Michael Platt 25.06.2018 20:33

Ваша цепочка вызовов неявно также объединяет селекторы CSS. Поскольку вы не включили соответствующий HTML-код, невозможно сказать, верна ли ваша цепочка селекторов. То, что делает селектор CSS в вашем вызове .click, - это не то же самое как document.querySelector

Tibrogargan 25.06.2018 20:38

Вопросы, требующие помощи по отладке («почему этот код не работает?»), Должны включать в себя желаемое поведение, конкретную проблему или ошибку и кратчайший код, необходимый для их воспроизведения в самом вопросе. Вопросы без четкой постановки проблемы не будут полезны другим читателям. См .: Как создать минимальный воспроизводимый пример.

Tibrogargan 25.06.2018 20:39

Позвольте нам продолжить обсуждение в чате.

Michael Platt 25.06.2018 20:41
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
13
380
0

Другие вопросы по теме