The aim here is to navigate through the DOM by selecting elements with good locators. Consider the following DOM:
<html>
<head>
<title>About Me</title>
</head>
<body>
<h1 id="about">About Me</h1>
<ul id="list-group">
<li class="list-group-item">Name: <span id="name">John Doe</
span></li>
<li class="list-group-item">Phone: <span
id="phone">400-6970</span></li>
<li class="list-group-item">Hometown: <span
id="hometown">Springfield</span></li>
</ul>
</body>
</html>
Based on what you have learned in the previous chapters, identify all of the elements inside the <body> tag, and understand their roles (parents, children, or siblings).
Afterwards, create locators for all of the <ul> element's children, each of the <span> elements, and the first child of the <body> element. The steps for completion are as follows:
- Open https://trainingbypackt.github.io/Beginning-Selenium/lesson_4/exercise_4_1.html in Chrome.
- Open the Chrome DevTools to search for elements.
- Use the Elements tab in Chrome DevTools to search for the requested elements.
- Try some different alternatives for locating the same element, and try to stick to the simplest and shortest alternative.
The "<ul>" element can be either located by the ID, CSS locator, and XPATH locator. After trying the three alternatives for the element, it should be clear that the shortest one will be the easiest one to maintain.
You should now be able to correctly identify the elements present in any DOM. You should also be able to understand how the elements are related to each other, via parent, child, and sibling relationships.