CODEWITHSUNDEEP
karate
oliv
oliv

Reputation: 11

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

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

Upvotes: 1

Views: 169

Answers (1)

senaid
senaid

Reputation: 650

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.

Upvotes: 1

Related Questions