What will you learn in this lecture?
In the previous video, we learned how to use relative XPath to identify an element in Selenium of this Selenium WebDriver elements identification course. In this video, we’ll have to learn how to use pick any tag from HTML body.
How to Use Pick Any Tag from HTML Body
So just like any kind of location language, there are a few expressions that you guys need to know in order to get more familiar and understand XPath better.
So here I have created some tables. I got them all from W3Schools. And you guys can obviously get more detail there if you want. But I don’t think after this will be necessary.
I’m going to teach you guys as always the most essential things to become amazing automation engineers without wasting your time on things that you don’t need at all. So anyway, there is this forward slash, and that’s used to navigate to the different next element in the tree. And it selects from the root node.
So for example, if we go all the way up in our HTML document. You see this right document? That is the root node.
So if I start with a document and then put a forward slash there, that’s what it does, right? It doesn’t select anything. And then if I step into the HTML, excuse me guys, don’t start with document notes. Start with the HTML node.
Okay. So this is the root.
And then if I put a slash here, you guys can see that this HTML node has what we call two children. We have the head and we have the body. These two guys are called siblings.
So if we want to navigate to see what’s in the head, we can put the head here. And then, Firebug select it, or we can go inside the body.
Look! If I put the body here. See that how it’s selected the body? And now, I can dig into the children’s bodies if I want. So if I do, you guys see that I expanded the body.
Now, if I want, I can begin with a div. So if I put a slash here and do a div. It’s going to select all of the divs. These are the children of this body.
So you guys see, this is a hierarchy: the parent, and then, this is the child of the HTML node. And then this guy is the child of this body node. But there are many of these guys.
So all of them get selected because there are many divs inside of this body. And so we can keep navigating like this.
See that as deep as you want until you guys see that narrowing down until you get to the place that you want. And you guys can see how expensive that is. But this is how you form the absolute path and that’s like that absolute address that you know.
But you want to visit a family the same way you want to visit your friends. They live at a certain address. And you don’t have their phone numbers, but you know where they live. And one day, you go to visit them but those friends have moved. And because you only know their absolute address, you won’t know how to track them down.
So that’s what that forward slash is for.
Now, you guys see how unknowing that is, right? So if I wanted to get down to this footer, I can use this double slash. We select a node in the document from the current node that matches selection no matter where they are. So that kind just lets me skip anything I want.
So if I want to get to the footer, I just have to put double slash here. And boom! I’m at the footer, right?
If I want to get to a div, I put a double slash and then hit div and it’s going to select all of them. And you guys can see what’s happening on the page is selecting all the deads.
If I want to get, for example, to this title tag, I just do this title and it highlights that title. But if it was just a single slash, that’s not possible, because I need to do body and then so on and so forth.
I need to begin one by one HTML. Then I need to do the body. And then I need to dig down all the way until I get to the title.
But, if I don’t want to do that and I just want to get directly to the title, the double slash allows me to skip. If I want to get, let’s say, to this expat button to an input tag right, you guys see here how it ends.
If I want to bypass all of this crap right here, I put another slash and hit enter. Now, you guys can see the problem that it’s selecting all of the input tags.
And right now there are two, but that’s okay at least we skipped all of that crap. And now, we kind of filter down. And based on this we can dig into where we want, whether we want to hit this button or this button.
So that’s what the double slash double forward slash does. It allows us to skip to a certain tag no matter where it is in the HTML structure.
[Tweet “Learn everything about elements identification with Selenium Webdriver.”]
Next Tutorial
In the next tutorial, we will cover how to use attributes in XPath.
What will you learn in this course?
Are you struggling with working with HTML using Selenium WebDriver? Do you know how to easily identify an element using Selenium WebDrriver? Do you know how to manipulate that web element? Do you know how to perform a drag n’ drop on an element? If not, then these are just a few of the questions that will be answered in this course.
This course is a complete guide on working with web elements in Selenium WebDriver! Once you are finished with this course, you will know how to work with any web elements, any time, on any web application.
“Relevant content that I will be able to apply to my automation tests *immediately*, a VERY effective presentation approach (evolving the same example and comparing/contrasting), and an excellent teacher / presenter. Thank you so much for your time and sharing your knowledge Nikolay!.”
-Krissy
In this course from Ultimate QA, you will learn:
- Basics of HTML
- All the different locator strategies for Selenium WebDriver
- How to identify web elements using Selenium WebDriver
- Master XPath
- Navigation with Selenium WebDriver
- Web element manipulation
- Web element interrogation
- Mouse and keyboard actions with Selenium WebDriver
- Performing actions such as drag n’ drop, drawing, hovering
- Implicit and Explicit waits
- How to properly handle element identification so that your tests are not flaky
- Expected Conditions in Selenium WebDriver
Take This Entire Course for Free
[Tweet “Learn how to correctly identify elements using #Selenium #Webdriver.”]How