java - org.openqa.selenium.NoSuchElementException : Returned node (null) was not a DOM element when trying to locate card-fields-iframe by CssSelector

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:返回的节点(null)不是 DOM 元素

我发现当我为 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-driver 团队合作。

但是，您需要注意以下事项:

• 首先，所有现代浏览器都内置了对 JavaScript 的支持。
• HtmlUnitDriver是 HtmlUnit 的 WebDriver 兼容驱动程序 headless 浏览器。它具有相当好的 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: