The div katalon-*_elementInfoDiv covers up buttons in UI.

OS:

OSX but shouldn’t matter

Katalon Studio Version

Latest

## Katalon Studio logs:

shouldn’t matter

## Environment (for Web testing)

Chrome firfox but again doesn’t matter

## Steps to reproduce -

Have a UI with a long path to an object located at the top of the window

## Expected Behavior -

I should be able to deactivate katalon-rec_elementInfoDiv for recording and running of the tests

## Actual Behavior -

Test can not click on top button

## Screenshots / Videos

Screen Shot 2018-08-10 at 10.39.11 AM.png

Screen Shot 2018-08-09 at 1.09.53 PM.png

I wonder what you mean that you cannot click to ‘Katalon Studio’ button (as in your case) when you recording or you cannot record test/xpath/… of this feature?

If it is so hard to record, try to maximize window: WebUI.maximizeWindow() and after that maybe it is more easy to record.

Looks as though the Katalon Recorder is not following my advice B) …

“Forgive them Lord, they know not what they do…”

Actually, the fix is probably very easy:

// Assuming that's an ID ...
#katalon-rec_elementInfoDiv:hover {
  display:none;
}

EDIT:

Actually, thinking about it more, I would prefer to manage pointer-events since this would allow the div to remain stationary:

#katalon-rec_elementInfoDiv:hover {
  pointer-events:none;
}

Setting pointer-events to none will allow mouse/touch events to “pass through” an element and be registered at the elements behind/beneath it.

I can just comment out the div itself but there is no setting to turn it off. I would love a setting since when the tests try to run the recorded out put it doesnt have the changes to the div causing the test to fail.

The fix in the code for this is extremely easy. I just dont have access to the source (duh), If someone can please just try this and see the issue and fix it. I would love to use this tool more but this is a blocker. It a simple fix and i just need a way to turn the katalon-rec_elementInfoDiv off.

Vy Ta said:

I wonder what you mean that you cannot click to ‘Katalon Studio’ button (as in your case) when you recording or you cannot record test/xpath/… of this feature?

If it is so hard to record, try to maximize window: WebUI.maximizeWindow() and after that maybe it is more easy to record.

Changing the window size works for the example of using the Katalon website but does not work for my use cases.

There is a way to hide “katalon-rec_elementInfoDiv” by changing script file “ku-recorder.js”.
1. Open “Katalon_Studio_Windows_64-5.6.1\configuration\resources\extensions\Chrome(Firefox, IE)\Recorder\KR\katalon\” and edit **“ku-recorder.js”
**2. Find “rec_createInfoDiv ()” function
3. Declare some custom styles for this div, for example:

this.rec_infoDiv.style.display = 'none'; //hide element
1 Like

DeksMaster said:

There is a way to hide “katalon-rec_elementInfoDiv” by changing script file “ku-recorder.js”.
1. Open “Katalon_Studio_Windows_64-5.6.1\configuration\resources\extensions\Chrome(Firefox, IE)\Recorder\KR\katalon\” and edit **“ku-recorder.js”
**2. Find “rec_createInfoDiv ()” function
3. Declare some custom styles for this div, for example:

this.rec_infoDiv.style.display = 'none'; //hide element

I am on Mac os. When I edited that file the overall recording became impossible to use and kept crashing the app. Is there a solution that will not require changing .js files? It doesnt seem functional for users to have to turn this function off be editing these file.

cameron said:

DeksMaster said:

There is a way to hide “katalon-rec_elementInfoDiv” by changing script file “ku-recorder.js”.
1. Open “Katalon_Studio_Windows_64-5.6.1\configuration\resources\extensions\Chrome(Firefox, IE)\Recorder\KR\katalon\” and edit **“ku-recorder.js”
**2. Find “rec_createInfoDiv ()” function
3. Declare some custom styles for this div, for example:

this.rec_infoDiv.style.display = 'none'; //hide element

I am on Mac os. When I edited that file the overall recording became impossible to use and kept crashing the app. Is there a solution that will not require changing .js files? It doesnt seem functional for users to have to turn this function off be editing these file.

One alternative solution is adjusting CSS of that div on your browser’s directly, as said by Russ:

// Assuming that's an ID ...
#katalon-rec_elementInfoDiv:hover {
  display:none;
}

Thanks Vinh, however, the best solution would be for the style to be modified directly at the source. The “Best Answer” here is certainly not a good answer. The Recorder files (much like the rest of Katalon) are in a state of flux and modifications to them will be wiped out when Katalon is updated. Worse, maybe even the IDs/Classes will change name. On my system (5.4.2) those files don’t even exist.

“Best Answers” should be vetted by people that understand their full ramifications (yes, even my so-called best answers!)

Thanks.

1 Like

Vinh Nguyen said:

cameron said:

DeksMaster said:

There is a way to hide “katalon-rec_elementInfoDiv” by changing script file “ku-recorder.js”.
1. Open “Katalon_Studio_Windows_64-5.6.1\configuration\resources\extensions\Chrome(Firefox, IE)\Recorder\KR\katalon\” and edit **“ku-recorder.js”
**2. Find “rec_createInfoDiv ()” function
3. Declare some custom styles for this div, for example:

this.rec_infoDiv.style.display = 'none'; //hide element

I am on Mac os. When I edited that file the overall recording became impossible to use and kept crashing the app. Is there a solution that will not require changing .js files? It doesnt seem functional for users to have to turn this function off be editing these file.

One alternative solution is adjusting CSS of that div on your browser’s directly, as said by Russ:
View and change CSS - Chrome for Developers

// Assuming that's an ID ...

#katalon-rec_elementInfoDiv:hover {
display:none;
}


  

This is a known work around for recording but doesnt solve the problem since when running the tests they have the same rec-div and causes failures. But yes I can record the test that way that I cant run. This issue should just be a config setting. Its not hard to add a new button that would set this feature active or not.

This issue will be fixed in our next release 5.7 which will show element’s locator info at the bottom when you hover on top elements on your current AUT, so please wait until there . Thanks for your information and finding, right now the current workaround is using Russ’s solution.

Russ Thomas said:

Actually, the fix is probably very easy:

// Assuming that's an ID ...

#katalon-rec_elementInfoDiv:hover {
display:none;
}


  

  

This does not work. Since the tests run with the same div. I can recored but not run. Please try these solutions prior to claiming that they solve the issue. Like i have stated several times there is no need for the feature and It should be able to be turned off. A simple config setting would solve this issue. I cannot say enough how painful this process has been. If there was a better solution to our testing I would not be here in these forums. Are there any devs in the the forums, that can spend 10 mins adding this config?

This does not work. Since the tests run with the same div. I can recored
but not run.

I didn’t claim it as a solution. See that word “probably”? My intent was to inform Katalon team as to how easy it would probably be to fix.

Please try these solutions prior to claiming that they
solve the issue.

Again, I didn’t claim it as a solution. My saying “probably” implies a never tried it, tested it or even considered doing so. If I had to try every suggestion I ever posted I’d never get my own work done let alone help out other people here for free.

1 Like

Russ Thomas said:

This does not work. Since the tests run with the same div. I can recored
but not run.

I didn’t claim it as a solution. See that word “probably”? My intent was to inform Katalon team as to how easy it would probably be to fix.

Please try these solutions prior to claiming that they
solve the issue.

Again, I didn’t claim it as a solution. My saying “probably” implies a never tried it, tested it or even considered doing so. If I had to try every suggestion I ever posted I’d never get my own work done let alone help out other people here for free.

Is there a chance you can unmark your post as the best answer. Thank you for clarifying. This has been a several week process with alot of false positives for solutions. If there is a way for us to talk out of these forums It would greatly speed up this process.

Is there a chance you can unmark your post as the best answer.

No. Choice of best answer is down to the original poster or the Katalon Team. But I agree… my intention was not to make my answer best, just to point out that the original BA would likely lead to further questions after an update. I repeat: it should be fixed at source <= that is the best answer. Mine is merely a suggestion and possibly a workaround, at best.

If there is a way for us to talk out of these
forums It would greatly speed up this process.

I think you think I am a part of Katalon. That is not the case. I am, like you, a humble user.

(Me? Humble? Okay… maybe not) B)

1 Like

Ok sorry guys especially cameron: I mark Russ’s solution as the best answer :). I’ve removed it from now. This will be considered as an issue and will be fixed asap.

vinh nguyen said:

This issue will be fixed in our next release 5.7 which will show element’s locator info at the bottom when you hover on top elements on your current AUT, so please wait until there . Thanks for your information and finding, right now the current workaround is using Russ’s solution.

This might solve this current issue but we also have items at the bottom of the screen. This solution might unblock me but will not solve the issue. The div itself is not needed for all users and should be able to be toggled off.

cameron said:

vinh nguyen said:

This issue will be fixed in our next release 5.7 which will show element’s locator info at the bottom when you hover on top elements on your current AUT, so please wait until there . Thanks for your information and finding, right now the current workaround is using Russ’s solution.

This might solve this current issue but we also have items at the bottom of the screen. This solution might unblock me but will not solve the issue. The div itself is not needed for all users and should be able to be toggled off.

No in this case the locator will be shown on top again. In the meanwhile, you can use our version 5.5 which has this implementation :), looks like this is unexpected change from 5.6. Here is the link for it:
http://download.katalon.com/5.5.0/Katalon\_Studio\_Windows_64-5.5.zip
http://download.katalon.com/5.5.0/Katalon\_Studio\_Windows_32-5.5.zip

Version 5.5 use above implementation for displaying element’s locator, so you won’t observe issues with top elements using 5.5