Unreliable click item Selenium WebdriverJS

Question

I'm trying to click on a dynamically loaded item from a React.js web app. The item opens a modal window with class name newItemView . I've tried quite a few things, but nothing is reliable. It'll work a few times, but then give me an error.

The goal is to click the dynamic item, then click a button in the modal window.

Attempt 1:

driver.wait(until.elementLocated(By.xpath(PATH_TO_DYNAMIC_ELEMENT)), MAX_WAIT_TIME,
      'Could not locate the element within the time specified')
      .then(function() {
          driver.findElement(By.xpath(PATH_TO_DYNAMIC_ELEMENT)).click();
      }); 

driver.wait(until.elementLocated(By.xpath(PATH_TO_MODAL_BUTTON)), MAX_WAIT_TIME,
      'Could not locate the modal element within the time specified')
      .then(function() {
          driver.findElement(By.xpath(PATH_TO_MODAL_BUTTON)).click();
      });

About once out of 5 trys, this throws the 'Could not locate the modal element within the time specified' because the modal didn't actually open.

Attempt 2 waits, then uses Actions to move over the button and click:

driver.wait(until.elementLocated(By.xpath(PATH_TO_DYNAMIC_ELEMENT)), MAX_WAIT_TIME,
      'Could not locate the dynamic element within the time specified')
      .then(function() {
          driver.findElement(By.xpath(PATH_TO_DYNAMIC_ELEMENT))
                .then(function(PATH_TO_DYNAMIC_ELEMENT_BUTTON) {
                    var actions = new webdriver.ActionSequence(driver);
                    actions.mouseMove(PATH_TO_DYNAMIC_ELEMENT_BUTTON).click().perform();
                });
      });

Then performs a check to see if the modal is open

driver.findElement(webdriver.By.className("newItemView"))
      .then(function() {
        driver.findElement(By.xpath(PATH_TO_MODAL_BUTTON)).click();
      }, function (err) {
          if (err.name === "NoSuchElementError")
              console.log("Element was missing!");
      });

This seems to work better, but still throws about 1 in 10 times. On the web page, the Actions seems to work because the item is revealed on hover , but it never got clicked.

Answer 1

I think you can try with the JavaScript executor... like

WebElement YourElement= driver.findElement(By.id("YourElement-ID"));
JavascriptExecutor ExeCutor = (JavascriptExecutor)driver;
ExeCutor.executeScript("arguments[0].click();", YourElement);

Answer 2

Your first problem is that you're not chaining your promises properly. It's easier to see the problems if you flatten your promises:

return driver.wait(until.elementLocated(By.xpath(PATH_TO_DYNAMIC_ELEMENT)), MAX_WAIT_TIME,
  'Could not locate the dynamic element within the time specified')
  .then(function() {
      return driver.findElement(By.xpath(PATH_TO_DYNAMIC_ELEMENT));
  })
  .then(function(button) {
      var actions = new webdriver.ActionSequence(driver);
      return actions.mouseMove(button).click().perform();
  });

That said, there is still some lag between when the click event is sent and when your browser reacts. You may need to add a wait for the new element to become visible, for instance.