org.openqa.selenium.NoSuchElementException:尝试通过 CssSelector 定位 card-fields-iframe 时返回的节点(null)不是 DOM 元素

2022-01-10 00:00:00 selenium xpath css-selectors webdriverwait java

我正在尝试通过部分 id 定位 iframe.对于这种方法，我使用了:driver.switchTo().frame(driver.findElement(By.cssSelector("iframe[id*='card-fields-number']"))); 我也试过xpath.

 driver.switchTo().frame(driver.findElement(By.xpath("//iframe[contains(@id,'card-fields-number')]")));

但是，我仍然收到此异常:

org.openqa.selenium.NoSuchElementException: 返回的节点(null)不是 DOM 元素

我发现当我为 HtmlUnit 启用 javascript 时，它能够找到框架并切换到它.我宁愿不启用 javascript，因为它对我来说运行速度非常慢，并增加了不必要的延迟.

iFrame HTML 代码:

</pre><p>iFrame ID 是动态的，所以我使用部分 ID.</p><p>网站链接:</p><p>I am trying to locate an iframe by partial id. For this method, I used:
 <code>driver.switchTo().frame(driver.findElement(By.cssSelector("iframe[id*='card-fields-number']")));</code> I have also tried xpath. </p><pre><code> driver.switchTo().frame(driver.findElement(By.xpath("//iframe[contains(@id,'card-fields-number')]")));
</code></pre><p>However, I still receive this exception: </p>

<p><code>org.openqa.selenium.NoSuchElementException: Returned node (null) was not a DOM element</code></p>

<p>I found out that when I enable javascript for HtmlUnit, it is able to locate the frame, and switch to it. I would rather not enable javascript as it runs very slow for me, and adds unneeded delay. </p>

<p>iFrame HTML code:</p><pre><code>&lt;iframe class="card-fields-iframe" frameborder="0" id="card-fields-number-7pbvqg7azsf00000" name="card-fields-number-7pbvqg7azsf00000" scrolling="no" src="https://checkout.shopifycs.com/number?identifier=438599641d0ed8fe61c161d72e62b5f8&amp;amp;location=https%3A%2F%2Fshopnicekicks.com%2F2192362%2Fcheckouts%2F438599641d0ed8fe61c161d72e62b5f8&amp;amp;dir=ltr&amp;amp;fonts[]=Lato" title="Field container for: Card number" style="height: 43px;"&gt;&lt;/iframe&gt;
</code></pre><p>iFrame ID is dynamic, so that is why I resort to using partial ID.</p>

<p>Website link: https://shopnicekicks.com/checkout
You must fill everything out until you reach the last page, which is the credit card information page.</p>

<p>Update
The iFrame is inside of the parent frame. 
Parent Frame: </p><pre><code>&lt;iframe srcdoc="&lt;script&gt;!function(){var e=function(e){var t={exports:{}};return e.call(t.exports,t,t.exports),t.exports},t=function(){function e(e,t){for(var n=0;n&lt;t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,&amp;quot;value&amp;quot;in i&amp;amp;&amp;amp;(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&amp;amp;&amp;amp;e(t.prototype,n),i&amp;amp;&amp;amp;e(t,i),t}}(),n=function(e,t){if(!(e instanceof t))throw new TypeError(&amp;quot;Cannot call a class as a function&amp;quot;)},i=function(e){return e&amp;amp;&amp;amp;e.__esModule?e:{&amp;quot;default&amp;quot;:e}},o=e(function(e,i){&amp;quot;use strict&amp;quot;;Object.defineProperty(i,&amp;quot;__esModule&amp;quot;,{value:!0});var o=function(){function e(){var t=this;n(this,e),this.calls=[],window.ga=function(){for(var e=arguments.length,n=Array(e),i=0;i&lt;e;i++)n[i]=arguments[i];return t.gaCall(n)}}return t(e,[{key:&amp;quot;gaCall&amp;quot;,value:function(e){var t=this;this.calls.push(e),clearTimeout(this.timeout),this.timeout=setTimeout(function(){t.calls.length&gt;0&amp;amp;&amp;amp;t.sendMessage()},0)}},{key:&amp;quot;listen&amp;quot;,value:function(){var e=this;window.addEventListener(&amp;quot;message&amp;quot;,function(t){return e.receiveMessage(t)},!1)}},{key:&amp;quot;sendMessage&amp;quot;,value:function(){window.parent.postMessage({type:&amp;quot;analytics&amp;quot;,calls:this.calls},this.origin),this.calls=[]}},{key:&amp;quot;receiveMessage&amp;quot;,value:function(e){if(e.source===window.parent&amp;amp;&amp;amp;&amp;quot;checkout_context&amp;quot;===e.data.type){this.origin=e.origin,window.Shopify=e.data.Shopify,window.__st=e.data.__st;try{window.additionalScripts()}catch(e){console.error(&amp;quot;User script error: &amp;quot;,e)}}}}]),e}();i[&amp;quot;default&amp;quot;]=o});e(function(){&amp;quot;use strict&amp;quot;;var e=i(o);!function(){(new e[&amp;quot;default&amp;quot;]).listen()}()})}(&amp;quot;undefined&amp;quot;!=typeof global?global:&amp;quot;undefined&amp;quot;!=typeof window&amp;amp;&amp;amp;window); window.additionalScripts = function () {};&lt;/script&gt;" src="https://checkout.shopify.com/2192362/sandbox/google_analytics_iframe" onload="this.setAttribute('data-loaded', true)" sandbox="allow-scripts" id="google-analytics-sandbox" tabindex="-1" class="visually-hidden" style="display:none" aria-hidden="true" data-loaded="true"&gt;&lt;/iframe&gt;
</code></pre><p>
</p> 解决方案 <p>This error message...</p><pre><code>org.openqa.selenium.NoSuchElementException: Returned node (null) was not a DOM element
</code></pre><p>...implies that there was no such element found as the returned node was null or was not a DOM element.</p>

<p>This is still a open issue with htmlunit-driver team.</p>

<p>However there are certain things which you need to take care as follows:</p>

<ul>
<li>First and foremost, all the modern browsers come with built-in support for JavaScript.</li>
<li>HtmlUnitDriver is a WebDriver compatible driver for HtmlUnit headless browser. It has fairly good JavaScript support (which is constantly improving) and is able to work even with quite complex AJAX libraries, simulating Chrome, Firefox or Internet Explorer depending on the configuration used. So ideally while working with HtmlUnitDriver, JavaScript must be enabled, else HtmlUnitDriver may not ne able to detect the JavaScript based elements.

<ul>
<li>You can find a detailed discussion in HtmlUnitDriver does not load javascript when navigating a page from an url</li>
</ul></li>
<li>The element seems to be a credit card field and historically Credit Card Number, etc resides within <code>&lt;iframes&gt;</code>.

<ul>
<li>You can find a detailed discussion in Unable to locate element of credit card number using selenium python</li>
</ul></li>
<li>Whenever an <code>&lt;iframe&gt;</code> is in play <code>src</code> attribute of the <code>&lt;iframe&gt;</code> tag plays a vital role.

<ul>
<li>You can find a detailed discussion in Ways to deal with #document under iframe</li>
</ul></li>
<li>As per best practices while switching <code>&lt;iframe&gt;</code> you need to induce WebDriverWait for the desired frame to be available and switch to it.

<ul>
<li>We have discussed this aspect in your previous question Selenium can't locate iframe</li>
</ul></li>
</ul>

<p>So you can use either of the following solutions:</p>

<ul>
<li><p>cssSelector:</p><pre><code>new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector("iframe.card-fields-iframe[id^='card-fields-number-'][src*='shopifycs']")));
</code></pre><p></li>
<li><p>xpath:</p><pre><code>new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.xpath("//iframe[@class='card-fields-iframe' and starts-with(@id,'card-fields-number-')][contains(@src, 'shopifycs')]")));
</code></pre><p></li>
</ul>

<h2>Update</h2>

<p>See the snapshot of the <code>CssSelector</code> which identifies the element perfecto as per the HTML you have provided:</p>

<p></p>

                        				
	</div>
	<div class="">
		<p><strong>相关文章</strong></p>
			</div>
</article>		</div>
	</main>
	<footer>
		<div class="container">
			<p>
				<span>友情链接：</span>
				<a href="https://www.688576.com" target="_blank">雨伦博客</a>&nbsp;&nbsp;
				<a href="https://www.yaanbbs.net" target="_blank">雅安论坛</a>
			</p>
			<a href="https://beian.miit.gov.cn" target="_blank">京ICP备15023317号-6</a>
		</div>
	</footer>
	<script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "https://hm.baidu.com/hm.js?30b42218aa13759c43de5f1971d0a93b";
	  var s = document.getElementsByTagName("script")[0]; 
	  s.parentNode.insertBefore(hm, s);
	})();
	</script>
</body>
</html>