org.openqa.selenium.NoSuchElementException:尝试通过 CssSe

时间：2023-01-13

本文介绍了org.openqa.selenium.NoSuchElementException:尝试通过 CssSelector 定位 card-fields-iframe 时返回的节点(null)不是 DOM 元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试通过部分 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 class='language-java'> 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 class='language-java'>&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><strong>Update</strong>
The iFrame is inside of the parent frame. 
Parent Frame: </p><pre><code class='language-java'>&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><div class="h2_lin"> 解决方案 </div><p>This error message...</p><pre><code class='language-java'>org.openqa.selenium.NoSuchElementException: Returned node (null) was not a DOM element
</code></pre><p>...implies that there was <em>no such element</em> found as the returned node was <strong>null</strong> or was not a DOM element.</p>

<p>This is still a open issue with <em>htmlunit-driver</em> 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 <em>WebDriver</em> compatible driver for HtmlUnit headless browser. It has fairly good <em>JavaScript</em> support (which is constantly improving) and is able to work even with quite complex AJAX libraries, simulating <em>Chrome</em>, <em>Firefox</em> or <em>Internet Explorer</em> depending on the configuration used. So ideally while working with <em>HtmlUnitDriver</em>, <em>JavaScript</em> must be enabled, else <em>HtmlUnitDriver</em> may not ne able to detect the <em>JavaScript</em> 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 <em>credit card field</em> and historically <em>Credit Card Number</em>, 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 <strong><code>src</code></strong> 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 <em>WebDriverWait</em> 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><em>cssSelector</em>:</p><pre><code class='language-java'>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><em>xpath</em>:</p><pre><code class='language-java'>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>

                        <p>这篇关于org.openqa.selenium.NoSuchElementException:尝试通过 CssSelector 定位 card-fields-iframe 时返回的节点(null)不是 DOM 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！</p></div>
</div><div class="spage"></div>
<div class="pre_nex">
<em class="pre"><a href='/asklib/java/17543.html'>上一篇：如何在使用 cssSelector 清除 Chrome 浏览器的浏览数</a> </em>
<em class="nex"><a href='/asklib/java/17545.html' class='text-muted pull-right'>下一篇：如何使用 Selenium 和 Java 提取表格元素的 id 属性的</a> </em>
</div>
<div class="b-box"> 
<h4>相关文章</h4>
<ul class="l_pic_m clear"><li><a title="如何在 JTextPane 中的组件周围环绕文本?" target="_blank" href="/asklib/java/17896.html"><img alt="如何在 JTextPane 中的组件周围环绕文本?" src="http://pic.html5code.net/nopic.gif"><strong>如何在 JTextPane 中的组件周围环绕文本?</strong>How to wrap text around components in a JTextPane?(如何在 JTextPane 中的组件周围环绕文本?)</a></li>
<li><a title="MyBatis，如何获取插入的自动生成密钥?[MySql]" target="_blank" href="/asklib/java/17895.html"><img alt="MyBatis，如何获取插入的自动生成密钥?[MySql]" src="http://pic.html5code.net/nopic.gif"><strong>MyBatis，如何获取插入的自动生成密钥?[MySql]</strong>MyBatis, how to get the auto generated key of an insert? [MySql](MyBatis，如何获取插入的自动生成密钥?[MySql])</a></li>
<li><a title="在 Java 中插入 Oracle 嵌套表" target="_blank" href="/asklib/java/17894.html"><img alt="在 Java 中插入 Oracle 嵌套表" src="http://pic.html5code.net/nopic.gif"><strong>在 Java 中插入 Oracle 嵌套表</strong>Inserting to Oracle Nested Table in Java(在 Java 中插入 Oracle 嵌套表)</a></li>
<li><a title="Java:如何将 CLOB 插入 oracle 数据库" target="_blank" href="/asklib/java/17893.html"><img alt="Java:如何将 CLOB 插入 oracle 数据库" src="http://pic.html5code.net/nopic.gif"><strong>Java:如何将 CLOB 插入 oracle 数据库</strong>Java: How to insert CLOB into oracle database(Java:如何将 CLOB 插入 oracle 数据库)</a></li>
<li><a title="为什么 Spring-data-jdbc 不保存我的 Car 对象?" target="_blank" href="/asklib/java/17892.html"><img alt="为什么 Spring-data-jdbc 不保存我的 Car 对象?" src="http://pic.html5code.net/nopic.gif"><strong>为什么 Spring-data-jdbc 不保存我的 Car 对象?</strong>Why does Spring-data-jdbc not save my Car object?(为什么 Spring-data-jdbc 不保存我的 Car 对象?)</a></li>
<li><a title="使用线程逐块处理文件" target="_blank" href="/asklib/java/17891.html"><img alt="使用线程逐块处理文件" src="http://pic.html5code.net/nopic.gif"><strong>使用线程逐块处理文件</strong>Use threading to process file chunk by chunk(使用线程逐块处理文件)</a></li>
</ul>
</div>
<div class="b-box">
<h4>最新文章</h4>
<ul class="l_pic_m clear"></ul>
<ul class="l_text clear"><li><a title="在 Java Servlet 中上传文件" target="_blank" href="/asklib/java/17542.html">在 Java Servlet 中上传文件</a></li>
<li><a title="Android发布高分辨率图像内存不足" target="_blank" href="/asklib/java/17541.html">Android发布高分辨率图像内存不足</a></li>
<li><a title="上传时EPIPE(断管)?" target="_blank" href="/asklib/java/17540.html">上传时EPIPE(断管)?</a></li>
<li><a title="Android，以编程方式将照片上传到 imgur 上" target="_blank" href="/asklib/java/17539.html">Android，以编程方式将照片上传到 imgur 上</a></li>
<li><a title="根据控制器更改文件大小限制 (maxUploadSize)" target="_blank" href="/asklib/java/17538.html">根据控制器更改文件大小限制 (maxUploadSize)</a></li>
<li><a title="Java Servlet/Jsp 图像与表单值一起上传" target="_blank" href="/asklib/java/17537.html">Java Servlet/Jsp 图像与表单值一起上传</a></li>
<li><a title="BitmapFactory:无法解码流 - null" target="_blank" href="/asklib/java/17536.html">BitmapFactory:无法解码流 - null</a></li>
<li><a title="Apache Commons 文件上传 - 流意外结束" target="_blank" href="/asklib/java/17535.html">Apache Commons 文件上传 - 流意外结束</a></li>
<li><a title="在分段上传请求中实现 ProgressDialog" target="_blank" href="/asklib/java/17534.html">在分段上传请求中实现 ProgressDialog</a></li>
<li><a title="Spring WebFlux:设置上传文件的最大文件大小" target="_blank" href="/asklib/java/17533.html">Spring WebFlux:设置上传文件的最大文件大小</a></li>
</ul>
</div>
</div>
<div class="footer"><p>Copyright &copy; 2022-2023 HTML5模板网 版权所有并保留所有权 </p><span style="display:none"><script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?aed1e1f83680bb8703974a28a5341c50";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script></span></div>
<a href="#top"><div id="goto_top" class="goto_top"></div></a>
<script type="text/javascript" src="/assets/js/highlight.min.js"></script>
<script src="/assets/js/prism.min.js?v=1" charset="UTF-8"></script>
</body>
</html>