Javascript NightwatchJS无法使用CSS选择器定位元素
我目前在一个网站上看到了这样一个部分:Javascript NightwatchJS无法使用CSS选择器定位元素,javascript,css,testing,nightwatch.js,Javascript,Css,Testing,Nightwatch.js,我目前在一个网站上看到了这样一个部分: <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/pro
<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>
这一行是click命令。我不断发现脚本在给定css选择器的情况下无法找到元素的错误。我已经在浏览器本身的控制台中使用
document.querySelector('#product\u form>div>div:nth child(2)>input[type=radio]')对其进行了测试。单击()
,然后单击单选按钮。我可能会想一些我可能做错了的事情,因为我已经做了几个小时了,并且尝试了各种不同的事情。如果nightwatch.js
的行为类似于jQuery,然后您的.click
正在对.elements
函数调用返回的元素子集进行操作-这意味着选择器不会返回与文档相同的结果。i、 它不是在做document.querySelector
,而是在做someElement.querySelector
。(因为#product_form
不是#inline reco div ul
的后代,所以这里没有什么奇怪的)来自:“定位的元素将作为WebElement JSON对象返回”。听起来上述评论很有可能成为事实。尝试在调用.elements()
后结束您的链,并使用浏览器启动新链。单击(…
我已尝试使用输入[type=radio]:first child
也是为了确保只有一个元素,但是抛出了一个错误,表示它正在尝试在空列表中查找第一个子元素。当然是的。您只搜索li
项的直接后代,这些项是的后代。因为\product\u form
是不是#季风内联记录div ul
的后代。您的列表将始终为空。事实上,我在您的HTML中根本看不到季风内联记录div ul
'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();
}