Element not interactable for a button to click

[anuradha]

Hi i am trying to click on a button but everytime i click it it is saying element not interactable.

This is the button DOM:

A visual rep of the button"

This is part of the script

The waitforelementpresent and waitforelementclickable is passing but when clicking on the button it is saying element not interactable.

What am i missing? can someone please have a look?

Thanks

[ThanhTo]

@Russ_Thomas is this javascript magic ?

[Russ_Thomas]

I’m concerned about two things:

1. line 10 seems to be sending the scroller (wherever that is) to the bottom of the body’s content (even if it’s not visible due to overflow). From MDN:

The Element.scrollHeight read-only property is a measurement of the height of an element’s content, including content not visible on the screen due to overflow.

2. The element that is failing (Facturation) is not identified. The HTML snippet contains two button elements - an HTML button and an HTML input type=submit and no evidence of CSS to help determine if either of them are visible (or if either of them is the correct element).

@anuradha please provide more info!

[anuradha]

Hi @Russ_Thomas , the scroller will scroll down the page to click on the CliqueSurBoutonValiderDefinitivement button. After doing this step the page will open a small modal where the button “Valider” is.
The xpath is: //input[@class=‘btn btn-primary submit-form-sentat’]
This is the code from the start of the modal:

Please do let me know if more info is needed.
thanks

[Russ_Thomas]

Try this:

String js = "document.querySelector('.modal-footer input.submit-form-sentat').click();"
WebUI.executeJavaScript(js, null)

If there is another modal dialog on the page, that may fail. Let me know.

[anuradha]

Thanks @Russ_Thomas this seems to have worked.

I have a similar case and this time the button is “Enregistrer” [ the button is in a modal]

I used the same code as yours but getting Cannot read property ‘click’ of null

String js1= “document.querySelector(‘.modal-footer input.submit-form-sentat’).click();”
WebUI.executeJavaScript(js1, null)

What will be the correct selector in this case, seems like the selector is not correct.

Thanks

[Russ_Thomas]

I was in fear of clash if there were more than one (although, the error doesn’t imply there is a clash).

Please provide more context - I need to see more HTML ABOVE. Make sure both dialogs’ HTML is the same so I can see identical context for each of them.

[Russ_Thomas]

I need to see this for BOTH dialogs…

and then the rest down to the buttons.

[anuradha]

@Russ_Thomas:

This is the DOM for the “Enregistrer” button

This one for “Valider” button

Thanks

[Russ_Thomas]

Near the top of your steps:

String js;

(EDIT) Enregistrer:

js = "document.querySelector('#twittcompta-creditnote-sentat-modal input[type=submit]').click();"
WebUI.executeJavaScript(js, null);

(EDIT) Valider:

js = "document.querySelector('#twittcompta-invoice-sentat-modal input[type=submit]').click();"
WebUI.executeJavaScript(js, null);

When you have it working, you should investigate WebUI.enhancedClick() which will fall back to trying JavaScript without you needing to write the JavaScript yourself.

[WebUI] Enhanced Click

[anuradha]

I used the enhancedClick but the test was failing too

[anuradha]

Hi @Russ_Thomas just to add to this i noticed that when i used this:
String js = “document.querySelector(’.modal-footer input.submit-form-sentat’).click();”
WebUI.executeJavaScript(js, null)
I did not get any error in the terminal . I thought it worked because i did not get any error but the action was not performed as well.
I checked on the web and saw that the action the click was supposed to do did not happen.

[Russ_Thomas]

We have moved on to new code. Does the new code work?

[anuradha]

Hi @Russ_Thomas sorry for the late response.
It did not work for both “Enregistrer” and “Valider”

Is there anything else i can try please?

Thanks

[Russ_Thomas]

Strange - I don’t see any typos in those selectors.

Try this…

open the page in the browser, open the DevTools and bring up each dialog - then try these in the console. Let me know what they produce (take screenshots)

document.querySelector('.twittcompta-creditnote-sentat-modal input[type=submit]')

document.querySelector('.twittcompta-invoice-sentat-modal input[type=submit]')

[anuradha]

@Russ_Thomas
both are null

[Russ_Thomas]

Were the dialogs open and present on screen when you tried the code in the console?

[anuradha]

Yes they were open. I have tried to run the code in katalon UI as well. The modal is opening but the button is not being clicked.

[Russ_Thomas]

Are there iframes in the page?

[Russ_Thomas]

Oh wait… my bad - they’re IDs not classes - I’ll go back and edit my original answer here Element not interactable for a button to click