Headless UI Testing using browser javascript consoles
It is surprising to see how developer tools are really helpful in testing. One such situation is when I came across in-built browser javascript consoles which could be used to test Javascript/HTML/CSS changes. This provides a way to test under the hood instead of just looking at the UI and assuming things that something is working as expected. This is again one of the approaches I found when trying to see new ways to test mobile websites.
What does these JavaScript consoles do? You may ask? The answer is simple-It shows all the clientside HTML/CSS/JavaScript a particular page calls when it is loaded. Using this information we can look at how the page is implemented, what files are being called, what functions are implemented and MOST IMPORTANTLY it helps to catch HTML/CSS/JavaScript errors.
I have real life experience using these tools in many applications and these were the type of defects I found using the same-
1. Missing functions in JavaScript files which leads to JScript errors when the page is loaded.
2. CSS errors mainly related to alignment/rendering issues with page width, font size, display of controls etc.
3. Missing HTML files which are called and used by other components/files related to the page which is loaded.To check this out for yourself.On desktop - Try Ctrl+Shift+J
- In chrome
F12
- In Internet explorer
On Mobile - Did you know?
iPhone has inbuilt debugger. I kept it always ON for testing purposes.Enable it by going to Settings -> Safari -> Advanced-> Debug consoleNOTE: A majority of these errors went unnoticed when I was looking only at the UI. So this is a good testing approach to complement manual and automated UI testing.