Creating modern web applications involves using HTML, CSS, and JavaScript in a coordinated way. Together, they build the Document Object Model (DOM). The DOM represents the structure of a web page, and understanding it is paramount for effective manual exploratory testing.
In this article, we'll delve into the power of the Elements tab in Developer Tools, a key instrument for unravelling the intricacies of the DOM.
HTML (Hypertext Markup Language): HTML is the standard markup language for creating the structure of web pages. It uses tags to define elements such as headings, paragraphs, images, links, forms, etc. HTML provides the basic building blocks browsers use to render content on the web.
CSS (Cascading Style Sheets): CSS is a style sheet language that controls the presentation and layout of HTML documents. It allows developers to define styles for elements, specifying attributes like colors, fonts, spacing, and positioning. CSS enables the separation of content and presentation, making it easier to maintain and update the visual appearance of a website.
JavaScript: JavaScript is a programming language that adds interactivity and dynamic behavior to web pages. It allows developers to create responsive and interactive user interfaces. JavaScript can manipulate the DOM, handle user input, make asynchronous requests (AJAX), and perform various client-side operations, making web pages more dynamic and engaging.
The Gateway to the DOM: Elements Tab
The Elements tab in Developer Tools serves as the gateway to the DOM, providing a visual representation of the HTML structure of a web page. The vertical order of the elements plays a crucial role in understanding whatever is happening on the webpage. Manual exploratory testing involves understanding how the page looks and deciphering how it's constructed.
Let's explore how the Elements tab facilitates this process.
1. Navigating the DOM Tree
The Elements tab presents you with a hierarchical view of the DOM tree. Each HTML element is represented as a node, and their nesting is visually depicted. By expanding and collapsing nodes, testers can traverse through the structure of the document easily.
2. Inspecting and Interacting with Elements
Hovering over a node in the Elements tab dynamically highlights the corresponding section on the actual web page. This visual correlation aids testers in identifying the exact element they want to inspect.
You can use the "Inspect" button to select a specific element on the page for inspection:
Also, you can right-click on an element and select "Inspect" to highlight its position in the HTML structure:
This helps you understand how elements are nested and positioned. You can move between lines of code using the up and down arrow keys on your keyboard, and to expand child elements, press the right arrow key and collapse them to the left.
3. Searching and Filtering
Manual exploratory testing often involves dealing with complex HTML documents. The search bar in the Elements tab is a handy tool for quickly locating specific nodes based on tag names, classes, or IDs. This feature streamlines the process of navigating through extensive structures.
Focus your cursor on the Elements panel.
Press Ctrl+F (Win) or Cmd+F (macOS). The Search bar opens at the bottom of the DOM Tree.
Type a search query.
4. Understanding Styles and Layouts
The Styles tab within the Elements tab provides insights into the applied styles for a selected element. Testers can explore the box model, analyze computed styles, and comprehensively understand how the visual presentation is crafted.
5. Capabilities of the "Event Listeners" tab on the "Elements" tab
Using the Event Listeners tab in DevTools for manual testing can provide valuable insights into how a web application responds to user interactions and events. Event Listeners are categorized based on the type of event (e.g., click, mouseover, keydown). Expand the categories to see the specific events associated with the selected element.
For each event, you can see the associated JavaScript functions or handlers. This information is crucial for understanding actions triggered when a particular event occurs. Manually interact with the element on the web page (e.g., click a button, submit a form, hover over an element). Observe the Event Listeners section in real time to see which events are triggered and which functions are called. Pay attention to unexpected events or event handlers. If an element triggers events that are not intended or if unexpected functions are executed, it might indicate a bug or undesired behavior. Test different scenarios and user interactions. For example, test form submissions, check how the application responds to keyboard events, or simulate specific user journeys. The goal is to ensure that events are handled as expected.
6. Some practical tips:
You can quickly find and easily copy any name of element which you need for your bug report.
Check the browser console for any error messages related to the issue. Include relevant error logs in your report.
With EventListeners inspection, we can tell if there is some JS related to it with an event listener to trigger it. We need to inspect the element, go to the Listeners Tab and see its configuration. In this case, you can see the "false" value. To understand more, we can see that the type of this event is 'invalid", which means the
invalidevent is triggered when an input element's value is considered invalid by the browser. When validating a text, the text area is set to an incorrect value or conflicts with some other JS on the site
We also recommend reading our "Browser console" article that explains how to display the console in different browsers and operating systems.
We also recommend you to read our "HTML Internal Anchors for Manual Exploratory Testing" article, which will tell you more detail about HTML anchors testing
The Elements tab in Developer Tools is a treasure trove for manual exploratory testing, offering testers a comprehensive view of the DOM. It empowers them to dissect the structure, inspect styles, and interact with the live DOM in real time. By leveraging the capabilities of the Elements tab, testers can unravel the complexities of web pages, ensuring a thorough and insightful exploration during manual testing endeavors and make your bug reports more professional.