I have a modal in a react app that has two button-like styled components (shown below) that changes color when clicked.
The click works fine when testing manually, but when i use katalon click, it errors with error:
_`Caused by: org.openqa.selenium.ElementClickInterceptedException: element click intercepted:
Element <div class="optionButton__StyledOption-cePEkJ gDZLaL" id="option1-div">...</div>
is not clickable at point (1281, 233). Other element would receive the click:
<div class="ReactModal__Overlay ReactModal__Overlay--after-open"
style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(255, 255, 255, 0.75);">...</div>`_
The ReactModal__Overlay ReactModal__Overlay–after-open element when inspected points to the whole screen. The element to be clicked is under that overlay element.
i tried adding those different steps before the click hoping may be one of those is what’s needed before the click to make the click work (none helped). Inability to click the element (with the error i posted) is my issue.
Perfect. Now we know that both the buttons (disabled and enabled) have click handlers attached to them. This means you should target the correct one depending on which state you want to test.
Because they each have a unique id attribute, you can target them easily using either CSS or XPath. I prefer CSS. The code I gave you works for the Disabled button. Repeat the code for the Enabled button and change the selector to "#option2-div".
If you prefer to use TestObjects, you can either build them in the Object Repository or you can make them in code using makeTO.
TestObject btnDisabled = makeTO("#option1-div")
// or do it one line...
You MUST ensure the page is ready. Part of your original problem is caused by some kind of overlay getting in the way. When a human uses the page, the overlay is removed. That is likely to be a matter of timing. Make sure you have waited for the page to load completely.
So, its either this code snippet above or the code you provided before that? (is the btnEnabled above supposed to be btnDisabled?)
In the first code snippet the click event passes but the color does not change which happens when manually clicked. This second snippet you provided fails with the error of overlay.
I don’t think its page loading issue 'cause the test can click other button elements on the modal and i also have added many seconds delays before clicking.
Idk, may be I have to just change the UI code somehow to make this interactable like the other elements on the modal…
Yeah, its a modal pop up. It pops on top of existing page so there is a page behind it, if that’s what you were referring to. Its not an iframe, the html you see above is all there is when the modal is open. Unfortunately the page is not public and I’m not able to share it.
heres’ a discovery, these two elements are in the page behind the modal (just for show) with the same id as the ones in the modal itself, so when i run that it changes the color in the webpage behind the modal. So i guess we figured out what was actually happening …but visually i didn’t detect it before cause click does nothing on the other elements.
I tried changing ids in the inspect and triggered click, and it changed color.