0

In webdriver.io I am trying to focus on element then click another element

the code looks like this: 

browser.moveToObject(focusSelector)
                .click(clickSelector);

the issue is that the focus bring an loading overlay on the page and when I try to click some times the overlay is receiving the click, and the code fails with this exception:

unknown error: Element <div data-bo="UserMenu">...</div> is not clickable at point (1203, 28). 
Other element would receive the click: <div class="blockUI blockOverlay"></div>

so I need to wait when the overlay .blockUI will disappear and only then do the click....

I had tried to do:

browser.moveToObject(focusSelector);
browser.waitForExist('.blockUI', browser.options.waitforTimeout, true);
browser.click(clickSelector);

But this won't work cause after moveToObject ,the focus is lost and the click selector is not displayed.

while in:

browser.moveToObject(focusSelector)
                .click(clickSelector);

the focus is not lost... but then I have the overlay issue....

Any Ideas?

OBender
  • 2,492
  • 2
  • 20
  • 33
  • Don't use `block ui`. – evolutionxbox Jun 20 '17 at 13:34
  • for this scenario you can try with javascript executor. – Murthi Jun 20 '17 at 13:37
  • We need to use block ui cause it's E2E testing. Tried with java script executor.. Didn't worked for me, can you give an example ? – OBender Jun 20 '17 at 22:11
  • @Murthi is suggesting `JavaScriptExecutor`, the Java version of WebdriverIO's of `execute`. I don't recommend it... it's so hackish and dirty, but it might get the job done in your second scenario (where you're chaining the commands). So instead of `click`, you would `execute` your JavaScript snippet in which you're clicking the element. But, as it stands it's pretty hard to debug unless you give us the **URL** so we can get a crack at it. – iamdanchiv Jun 23 '17 at 11:48

2 Answers2

0

This question was answered in this SO post.

This worked for my Ajax Loader: "Loading image ID" (ID of the loading image) can be retrieved via Firebug.

By loadingImage = By.id("loading image ID");

WebDriverWait wait = new WebDriverWait(driver, timeOutInSeconds);

wait.until(ExpectedConditions.invisibilityOfElementLocated(loadingImage));
iamdanchiv
  • 4,052
  • 4
  • 37
  • 42
Adenaan Jacobs
  • 11
  • 4
  • This THE SAME THAT I DID AND IT'S NOT WORKING browser.waitForExist('.blockUI', browser.options.waitforTimeout, true); – OBender Jun 22 '17 at 10:42
  • Talk about `a shot in the dark`... Dude, did you read his question beforehand? First off, get that dirty Java out of here: OP is running WebdriverIO (Selenium JavaScript bindings). Secondly that question you linked is older than life & most answers there are irrelevant to his scenario. – iamdanchiv Jun 23 '17 at 12:00
0

I'd avoid using the moveToObject() because it will soon be deprecated. In the event that you absolutely can't do that, try using: 

browser.waitForVisible('.blockUI', null, true);

after the moveToObject() command. This waits until the element is no longer visible (the null means it'll wait for the default amount of milliseconds you set in your config file, and true means that the command is reversed - read more here: http://webdriver.io/api/utility/waitForVisible.html#Usage).

The execute option that was mentioned above would look like this:

browser.execute(() => {
   document.querySelector('[data-bo="UserMenu"]').click();
});

It is hacky but it gets the job done.

alkaia
  • 89
  • 1
  • 6