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.
Now other elements in the modal which includes two buttons and a input text bar seems to have no problem when interacted with or clicked. I tried things like focusing on the modal, mouse hover, delays, wait for element clickable/visible before the click, and javascript execute click on the element but same issue occurs in all cases when the element is clicked on. Any clue to why or how I can avoid this issue and make the click work?
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.
That will click on the element that your error report is complaining about. I donât know if thatâs the correct element, Iâm relying on your error.
Put that in your Test Case script. Make sure the element is ready for the click.
I donât get the error using this, the click step seems to pass but the click is supposed to trigger background color change but that did not happen. The component looks like this:
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")
WebUI.click(btnEnabled)
// or do it one line...
WebUI.click(makeTO("#option2-div"))
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âŚ
undefined is correct - itâs the result of calling the click() method. Since it returns ânothingâ in JS that is âundefinedâ. Weird? Thatâs how it is.
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.