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

Question

I am trying to locate an iframe by partial id. For this method, I used: driver.switchTo().frame(driver.findElement(By.cssSelector(\"iframe[id*=\'card-fields-number\']

Answer 1

This error message...

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

...implies that there was no such element found as the returned node was null or was not a DOM element.

This is still a open issue with htmlunit-driver team.

However there are certain things which you need to take care as follows:

• First and foremost, all the modern browsers come with built-in support for JavaScript.
• 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.
  • You can find a detailed discussion in HtmlUnitDriver does not load javascript when navigating a page from an url
• The element seems to be a credit card field and historically Credit Card Number, etc resides within <iframes>.
  • You can find a detailed discussion in Unable to locate element of credit card number using selenium python
• Whenever an <iframe> is in play src attribute of the <iframe> tag plays a vital role.
  • You can find a detailed discussion in Ways to deal with #document under iframe
• As per best practices while switching <iframe> you need to induce WebDriverWait for the desired frame to be available and switch to it.
  • We have discussed this aspect in your previous question Selenium can't locate iframe

So you can use either of the following solutions:

• 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')]")));
  

Update

See the snapshot of the CssSelector which identifies the element perfecto as per the HTML you have provided:

Answer 2

Just try with frame indexing "//iframe[index]", where index integer.

e.g. xpath : //iframe[1]

Frame id may change dynamically but in a few application structure remains same so indexing solves the problem.

Please let me know if it solves the issue.

Answer 3

As the iframe has tag iframe, you can switch to the iframe using the tagname like:
driver.switchTo().frame(driver.findElement(By.tagName("iframe")));
And if you want to again switch to the default content, then you can use driver.switchTo().defaultContent();