Clicking on a hint in game doesn't activate the hint

Hi all :slight_smile:
I’m creating auto testing for our website, and we have games with hints. For example, a spelling game, and the hints are used to reveal a letter or reduce the number of possible letters, in exchange for coins.

When I’m trying to create a test that will use the hints, they are clicked but the actual action of the hint doesn’t happen.

That’s what I tried to do - use “click” and define the object by the onclick (I also tried the text, the class, the xpath):

When I run the test I get this error in the log, but after a few seconds it passes to the next row in the test and marks it as pass, though nothing happens in the browser in terms of coins reduction or the letter revealed:

javascript error: Failed to execute ‘elementsFromPoint’ on ‘Document’: The provided double value is non-finite.

That’s the html for the hint button:

Does anyone know how I can actually use the hint through Katalon? Maybe not to use “click”?

Thanks in advance!

I’m not sure why you get that particular error - you should always post the line(s) of code that are failing then it’s easier to diagnose the problem.

Let’s see if we can click the button from the DevTools console. Open the browser to the page, then put this code in the console:

document.querySelector("#imgGame_revealLetter").click()

Post back with a screenshot of the result.

1 Like

Hi, thanks!
I’m not quite sure where to put this code - it’s in the browser or in Katalon?
I’m not a programmer so if you can please write me more detailed steps :slight_smile:

I gave you a link. Read it. Then all will be revealed:

1 Like

Thanks! I pasted the code you wrote in the console and the hint was used (I got a letter revealed in the game).
This is what appears in the console after the hint was clicked - same as it was, only the “undefined” at the bottom was added:

Cool. So the basic premise is, a click on that button will work. (The undefined in the console is expected - the click() method does not return a value so it’s result is “undefined” - that’s how JavaScript “works”.)

Now you can adjust your Test Object in Katalon to use the button and its id:

1 Like

Hi, I’m not much into CSS selectors so what I would do is use Xpath only (not attributes like you did) and different approach with same output to verify if that element is clickable.

To create Xpath only test object, create new test object in Object repository and click on Xpath checkbox then paste Xpath expression: //button[@id='imgGame_revealLetter']

To verify if Xpath expression is clickable use Developer tools:

  1. Hit F12 key to open Developer tools
  2. Click on Elements tab
  3. Hit Esc key to open JS console
  4. Click on Elements tab
  5. Hit Ctrl+F keys to open search in Elements
  6. Write Xpath expression: //button[@id='imgGame_revealLetter'] or you can click on the button with inspect tool like on your screenshot
  • verify if it’s unique (it should be since Id is used), only 1 result should be found
  1. Click on element using Developer console
  • observe how Developer tools bounded your selection with variable $0
  • if you keep that selection and write in JavaScript console ‘$0.click()’ you will verify if your selector is clickable, Chrome will try to perform click and you should see it on UI

Hi,
I tried the id in the attributes but it didn’t work - after about 30 seconds katalon just marked this line as “passed” and moved to the next one, without anything happening on the hint.
But I tried now the second solution with the xpath - it didn’t work with //button[@id=‘imgGame_revealLetter’], but did work with this: (//button[@id=‘imgGame_revealLetter’])[2] (that was one of the options in the “Object’s expaths” list).

Thank you both! :slight_smile:

That means you have two buttons with the same Id imgGame_revealLetter, better approach would be to combine id with another html attribute in that element so you don’t have to use Xpath index which is not recommended practice.

For example you could combine text from the button with id if the button has unique text but it probably doesn’t so in that case combining child with parent element could be unique enough but sometimes it doesn’t.

I know :slight_smile: Sometimes it’s better if you are sure this button will stay on index 2 to use index and move on.

OK, I’m pretty sure the button will stay the same (I don’t know where the other button is…).
But just so I’ll know for next time, if I want to combine for example the parent of this id, how would I write it in the xpath? for example here it’s div class=“popover-content”.

thanks!

Maybe the first button is hidden? You should see it’s code if you write your xpath expression with index [1].
Xpath expression with provided div and class would be: //div[@class='popover-content']//button[@id=‘imgGame_revealLetter’] but I think you will have again two of them, does the DIV have Id maybe? In many cases where same buttons are used DIV has different Id at least that’s my case.

I tried [1] instead of [2], nothing happened, so maybe it is hidden or unavilable.
The one with the class & id worked, thank you!

No problem. I meant only search for [1] to see it’s code, if it’s hidden click() won’t work.