Unable to click button inside iframe with selenium webdriver (javascript)

Question

I have a page that loads an iframe, but I get NoSuchElementError error messages. My code:

driver.wait(until.ableToSwitchToFrame(0)).then((d) => {
  //*** SLEEP HERE
  const button = By.css(".button");
  driver.wait(until.elementLocated(dropdownElem)).then((btn) => {
    btn.click();
  });
});

First I switch to the correct iframe, then I try to wait for the element to load inside the iframe. If I insert a driver.sleep(1000); to the line //*** SLEEP HERE it works, otherwise it fails with:

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":".button"
}

Why doesn't the driver.wait line waits for the element to become available?

have you tried [`waitUntil`](http://webdriver.io/api/utility/waitUntil.html) ? — user1207289, Oct 29 '17 at 21:23
I'm using selenium-webdriver nodejs bindings, the official maintained by selenium. The one you linked is webdriverIO, a different library. — marchello, Oct 30 '17 at 09:58
@marchello, why did you tag the question as `webdriverio`-related? — iamdanchiv, Oct 30 '17 at 12:51
@iamdanchiv, I wanted the `webdriver` tag. my mistake. corrected now. — marchello, Oct 30 '17 at 16:08

user1207289 · Answer 1 · 2017-11-05T22:16:46.833

I tested this on my local and it seems to have worked fine for a button within Iframe. Here is the code

var webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder().usingServer().withCapabilities({'browserName': 'chrome' }).build();
 driver.get('file:///Users/../sampleFiles/sample-iframe.html');
driver.wait(webdriver.until.ableToSwitchToFrame(0)).then((d) => {
  //*** SLEEP HERE
  const button = webdriver.By.css(".Button");
  driver.wait(webdriver.until.elementLocated(button)).then((btn) => {
    btn.click();
   btn.getTagName().then((tag) => { 
      console.log(tag);
    });
  });


});

I get button on console

and Iframe HTML this is tested on is

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>Example of HTML Iframe</title>
</head>
<body>
    <iframe src="file:///Users/../sampleFiles/sample.html" width="300" height="200">
        <html><head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<button id="ButtonID" class="Button">Click Me!</button>


</body></html>
    </iframe>

  </body></html>

Check your driver.wait(until.elementLocated(dropdownElem)) line , seems theres a typo , change it to

driver.wait(until.elementLocated(button )) and try again

Unable to click button inside iframe with selenium webdriver (javascript)

1 Answers1