Click with react modal styled component not working

I have a modal in a react app that has two button-like styled components (shown below) that changes color when clicked.
image

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?

Katalon version-6.3.3, browser -chrome 78.0

One thing at a time. Tell me which of those you want to treat as the problem.

Plenty. First I need to know what you want to focus on.

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.

String js = 'document.querySelector("#option1-div").click();'
WebUI.executeJavaScript(js, null)

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:

<StyledOptionButton backgroundColor={backgroundColor} {...rest}>
            <StyledOption
                id="option1-div"
                side={'left'}
                disabled={disabled}
                selected={selectedOption === option1Key}
                backgroundColor={backgroundColor}
                foregroundColor={color}
                onClick={() => props.onSelected && props.onSelected({ key: option1Key, text: option1Text })}>
                {option1Text}
            </StyledOption>
            <StyledOption
                id="option2-div"
                side={'right'}
                disabled={disabled}
                selected={selectedOption === option2Key}
                backgroundColor={backgroundColor}
                foregroundColor={color}
                onClick={() => props.onSelected && props.onSelected({ key: option2Key, text: option2Text })}>
                {option2Text}
            </StyledOption>
        </StyledOptionButton>

Unfortunately, I don’t think that’s useful. Can you post the rendered HTML?

Bring up the page and Inspect the problem button using the DevTools. Send me a screenshot of the HTML.

If this helps…

Sorry. I had to do somethign else for a while.

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.

1 Like

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…

Yes.

Did I mix them up? :blush: I’m sure you can figure out the intent.

Because it’s JS.

Because it’s using WebUI. Well, I’d stick to the JS stuff.

Let’s do some deeper investigation. Bring up the page in Firefox and paste this code into the console:

document.querySelector("#option1-div").click();

Or this:

document.querySelector("#option2-div").click();

Let me know what happens. Screenshots get you bonus points :wink:

lol…

it shows “undefined” and no change in the UI.

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.

Disappointing that you saw no change in the UI.

Let’s try triggering the handler directly…

document.querySelector("#option2-div").onClick();

“onClick not a function…” which is strange cause onClick is there inside the component…

Is this modal a popup? Is there a webpage document behind this modal? Are we looking at an iframe?

Better yet, is this website public?

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. :confused:

Put this in the console. When the result appears, click the little arrow so we can see the content:

document.querySelector("#option2-div").attributes

And this - hopefully we get a red button:

document.querySelector("#option2-div").style.backgroundColor = "red"

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 :open_mouth: …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.