org.openqa.selenium.NoSuchElementException：当尝试通过CssSelector定位card-fields-iframe时，返回的节点（null）不是DOM元素

Question

我试图通过部分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: Returned node (null) was not a DOM element

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

iFrame HTML代码：

<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;location=https%3A%2F%2Fshopnicekicks.com%2F2192362%2Fcheckouts%2F438599641d0ed8fe61c161d72e62b5f8&amp;dir=ltr&amp;fonts[]=Lato" title="Field container for: Card number" style="height: 43px;"></iframe>

iFrame ID是动态的，因此我采用部分ID。

网站链接：https://shopnicekicks.com/checkout您必须填写所有内容，直至到达最后一页，即信用卡信息页面。

更新iFrame位于父框架内。父框架：

<iframe srcdoc="<script>!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<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,&quot;value&quot;in i&amp;&amp;(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&amp;&amp;e(t.prototype,n),i&amp;&amp;e(t,i),t}}(),n=function(e,t){if(!(e instanceof t))throw new TypeError(&quot;Cannot call a class as a function&quot;)},i=function(e){return e&amp;&amp;e.__esModule?e:{&quot;default&quot;:e}},o=e(function(e,i){&quot;use strict&quot;;Object.defineProperty(i,&quot;__esModule&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<e;i++)n[i]=arguments[i];return t.gaCall(n)}}return t(e,[{key:&quot;gaCall&quot;,value:function(e){var t=this;this.calls.push(e),clearTimeout(this.timeout),this.timeout=setTimeout(function(){t.calls.length>0&amp;&amp;t.sendMessage()},0)}},{key:&quot;listen&quot;,value:function(){var e=this;window.addEventListener(&quot;message&quot;,function(t){return e.receiveMessage(t)},!1)}},{key:&quot;sendMessage&quot;,value:function(){window.parent.postMessage({type:&quot;analytics&quot;,calls:this.calls},this.origin),this.calls=[]}},{key:&quot;receiveMessage&quot;,value:function(e){if(e.source===window.parent&amp;&amp;&quot;checkout_context&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(&quot;User script error: &quot;,e)}}}}]),e}();i[&quot;default&quot;]=o});e(function(){&quot;use strict&quot;;var e=i(o);!function(){(new e[&quot;default&quot;]).listen()}()})}(&quot;undefined&quot;!=typeof global?global:&quot;undefined&quot;!=typeof window&amp;&amp;window); window.additionalScripts = function () {};</script>" 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"></iframe>

Answer 1

此错误消息...

org.openqa.selenium.NoSuchElementException: Returned node (null) was not a DOM element

...意味着没有找到这样的元素，因为返回的节点为null或不是DOM元素。

这仍然是一个开放的issue与htmlunit驱动团队。

但是，您需要注意以下某些事项：

• 首先，所有现代浏览器都内置了对JavaScript的支持。
• HtmlUnitDriver是HtmlUnit无头浏览器的WebDriver兼容驱动程序。它具有相当好的JavaScript支持（不断改进），甚至能够使用相当复杂的AJAX库，根据所使用的配置模拟Chrome，Firefox或Internet Explorer。理想情况下，在使用HtmlUnitDriver时，必须启用JavaScript，否则HtmlUnitDriver可能无法检测基于JavaScript的元素。 你可以在HtmlUnitDriver does not load javascript when navigating a page from an url找到详细的讨论
• 该元素似乎是一个信用卡领域，历史上信用卡号码等位于<iframes>内。 你可以在Unable to locate element of credit card number using selenium python找到详细的讨论
• 每当<iframe>发挥作用时，src标签的<iframe>属性起着至关重要的作用。 你可以在Ways to deal with #document under iframe找到详细的讨论
• 根据切换<iframe>时的最佳实践，您需要引导WebDriverWait以使所需的帧可用并切换到它。 我们在您之前的问题Selenium can't locate iframe中讨论了这个方面

因此，您可以使用以下任一解决方案：

• cssSelector： new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector("iframe.card-fields-iframe[id^='card-fields-number-'][src*='shopifycs']")));
• XPath的： new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.xpath("//iframe[@class='card-fields-iframe' and starts-with(@id,'card-fields-number-')][contains(@src, 'shopifycs')]")));

更新

请参阅CssSelector的快照，该快照根据您提供的HTML标识元素perfecto：

Answer 2

只需尝试使用帧索引“// iframe [index]”，其中索引整数。

例如xpath：// iframe [1]

帧ID可以动态改变，但是在一些应用程序结构中保持相同，因此索引解决了问题。

如果它解决了这个问题，请告诉我。

Answer 3

由于iframe有标记iframe，您可以使用标记名切换到iframe，如： driver.switchTo().frame(driver.findElement(By.tagName("iframe"))); 如果你想再次切换到默认内容，那么你可以使用driver.switchTo().defaultContent();