How to inspect disappearing element in a browser:

How to inspect disappearing element in a browser:

In selenium scripting we should  use right techniques for identifying the web elements. In few cases when there is disappearing items like KendoUI, we should use smart ways/techniques for identifying the elements rather than spending lot of time behind analyzing the javascript/reactjs codes.

Technique/Tools 

1.  For finding the elements and xpaths, we can use the tools like  ChroPath, CSS Selector or any other Chrome plugins

2. Once we identified the proper xpath or elements with id/css, we can confirm its presence with similar tools like Xpath Helper Wizard

Then, we can use it in our page factory logic

So, challenge here is, few elements like KendoUI date pickers closes soon after changing the focus, 

To find elements of these kind we can use 2 techniques:

1. In Chrome, 

• Open devTools (F12)
• Select the "Sources" tab
• While the element you want is displayed, press F8 (or Ctrl+/). This will break script execution and "freeze" the DOM exactly as it is displayed
• From this point, use Ctrl+Shift+C to select the element

2. Adding timer break point

• Open console
• Type in setTimeout(()=>{debugger;},10000);
• Press Enter
• Now you have 10 seconds to make your element appears. Once it appeared, wait until the debugger hits. As long as you don't resume, you can play with your element and it won't disappear.

Use these methods to speedup test script writing....!!