Chrome DevTools has several panels – Elements, Console, Sources, Network, Performance, Memory, Application, Security, and Audits. Today you are going to learn DevTools’ Console panel from a testing perspective.
What can you see in the Console panel? You can access error messages which are thrown by the parser. Sometimes the web application under test may not show errors on the UI. However, you may see JavaScript error messages in the console panel.
The errors are not show-stoppers or creating issues. Why should I bother? If the pages are error-free, there are some benefits you can reap.
- When a website is error-free, it will improve SEO.
- The errors may not create any issues now. However, when you add new snippets in the JavaScript files, it may produce unexpected issues. It is better to have an error-free Console panel for all the pages so that the developers can add new scripts confidently.
As a software tester, you must report JavaScript parser errors, which you see in the Chrome DevTools Console panel. When you notice an error, you will have to check from which JS file it is originated.
You can get the source file information at the right-side of the Console panel.
There are three types of messages Chrome DevTools shows – Informational, Warning, and Error. Informational Message is displayed without any background color. Warning message in Yellow and Error in Red background color.
If you want to view only Error messages, you can select ‘Errors’ in the ‘Default Levels’ drop-down.
Console’s Command Prompt
Console panel has its Command prompt. It is a node command prompt. If you want to run any JavaScript snippets on a webpage, you can use this command prompt. Where can I find the command prompt? You can find the command line cursor below the log messages.
Selecting Elements
Everyone is aware that we can search elements in the Elements panel using XPath/CSS Selector. However, you can select an element in the DevTools Console panel as well. If you know about the ‘document.querySelector’ method, then it is straight-forward.
‘document.querySelector’ method accepts a CSS selector as an argument, and it selects only one element. If you want to select multiple elements, use the ‘document.querySelectorAll’ method in Console’s command prompt.
Using the ‘document.querySelector’ method, it returns one element, and you can focus on that element without any distraction. Whereas in Elements panel, it just highlights the selected element.
Selenium Chrome DevTools Protocol (CDP)
Now Selenium 4 has support to listen Console log messages. Manually, you can open the console panel and monitor the logs. However, in automation testing, there was no way to listen the logs.
DevTools devTools = driver.getDevTools();
devTools.createSessionIfThereIsNotOne();
devTools.clearListeners();
devTools.send(Log.enable());
devTools.addListener(Log.entryAdded(), logEntry -> {
System.out.println(logEntry.getText().contains("404"));
});
driver.get("https://codoid.com/fafafafsasf");
In Selenium 4, using Chrome DevTools Protocol, you can listen the logs. Refer to the below code. Note: Selenium 4 is not released yet. We have used Selenium 4 alpha version to accomplish the snippet.
In Conclusion
As a QA Company, we use the Chrome Console panel to access logs messages and report the errors to our clients’ developers. In the subsequent blog articles, we will be publishing on Chrome DevTools’ other panels.
Comments(0)