How to inspect an element created dynamically in the DOM for karate testing

Question

I’m working on an application that allows you to enter an automatic date. To test this application, I must follow a scenario that allows to select a specific date (e.g: 15/12/2021) by clicking on it. For this I use a datepicker from the bootstrap library.

datepicker

But it is impossible to inspect this element, because, once displayed, it disappears with the slightest mouse click in the window, so that when I right-click on the datepicker to inspect it I lose the focus on the element that disappears.

Here's the inspector (when I want to open the div, the datepicker disappears):

inspector HTML code

How could I inspect this datepicker to create selectors? Best regards

I wish I could give you an easy answer but I can't. UI automation is hard, you have to be creative. refer to how you can use JS in case that helps: https://stackoverflow.com/a/60800181/143475 — Peter Thomas, Dec 04 '21 at 16:37
Thank you for your answer. Since the datepicker is jQuery-coded, I was wondering if it was possible to integrate a jQuery function in karate that could give a precise date. Do you think that’s a possible option? — oliv, Dec 04 '21 at 18:02
yes, please refer the links I gave above, you can load any JS from a URL: https://twitter.com/getkarate/status/1338892932691070976 — Peter Thomas, Dec 04 '21 at 18:43

score 1 · Answer 1 · answered Dec 05 '21 at 12:33

Use Chrome:

1. Right click Inspect
2. Go to Elements tab
3. Click on datepicker element (and watch what element is highlighted in the Elements tab)
4.Right click on that element in Elements tab and select Brake on - one of the options should work
5. Click on that datepicke element and Debugger should start
6. Click on Play until Your element is loaded
7. Inspect

For example: Go to google.com To inspect google apps selection:

 1. Inspect page and switch to Elements tab
 2. After clicking App selection button you will see that class="fade-in" is highlighted
 3. Right click on this element in Elements tab and select Brake on - > attribute modification
 4. Click on App selection again and You will see debugger appear

https://ibb.co/D7V3P3C

 5. Click on Resume script execution but in the Inspector (Red bounding box on the pic) not on Debugger in main screen, until App selection is not showed 
 6. Then You can inspect Apps as You wish

You could also use EventListeners to set break on them.

How to inspect an element created dynamically in the DOM for karate testing

1 Answers1