Debugging the web elements which are hard to inspect

OrangeHRM is a comprehensive human resource management system. It is an open source system and provides all the functionalities which are required for any enterprise.

When we login to OrangeHRM and navigate to “My Info” tab, we see the below screen.

There is a date control in the above image, named "License Expiry Date". When we click on the date control, a calendar element pops up as shown in the below image.

When we try to inspect the calendar web element, it disappears from the screen. Therefore, it becomes difficult to get the xpaths for the year, month and date fields in the calendar control. What's the solution for this? There is a way to find out the details of this calendar control by starting a debugger. We can go to the console window and enter the following command. This starts debugging after the specified seconds. The last parameter (10000) in the below command is time in milliseconds.

setTimeout('debugger', 10000) Follow the below steps:

1. Type the above command in the console window and type enter.

2. You have 10 seconds to click and open the calendar web element for inspection.

3. After 10 seconds, the DOM (document object model) freezes.

4. Then we can go to the ”Elements” tab and can easily inspect the calendar control.

5. In the image below, we can see the frozen DOM and the element and all the required details.

In the above image, we can see that there are few classes like "oxd-calendar-selector-month" "oxd-calendar-selector-year" "oxd-calendar-date" which can be used to reach to the particular web element and set the date.

This way, we can use the setTimeout() command to start debugger, freeze the DOM and inspect the elements which might not be easily available for inspection.