What will you learn in this lecture?
In the previous video, we learned how to use partial link text to identify an element in selenium of this Selenium webdriver elements identification course. In this video, we’ll have to learn how to use CSS to identify an element in selenium.
How to Use CSS to Identify an Element in Selenium
The next Selenium webdriver identifier that i want to talk about is the CSS selector which basically allows us to use CSS commands to navigate through the HTML.
Now, why the CSS selector is good is because it’s easier to write and it looks simpler. However, there are some problems with it is that it’s not available on some older browsers and maybe over a specific period of time in a few months maybe in a year that’s point will not even be relevant because those older browsers will hardly be in the picture.
But that is one of the cons and therefore usually there is a competition between CSS and XPath.
Right people are like oh are you CSS no use XPath you CSS XPath whatever I think it doesn’t really matter which one you use. I prefer XPath because first of all it is available in all browsers and the conventions are not as hard to learn for XPath as they are for CSS just because XPath is a little bit more intuitive with its conventions.
And also there are two resources that I want to point you to guys that you may want to make yourselves aware of.
So first there’s saucelabs.com/resources/selenium/css-selectors where they talk about identification using CSS. And they actually give you examples.
Right here is XPath here CSS XPath CSS. XPath, CSS examples and they talk about it and then they actually claim that it’s faster.
But then there is another resource that I want to show you guys which is by Dave Hefner this guy is actually really cool I suggest you guys check him out I always read up his blog he provides a lot of solid content and he actually did a test to compare the speed of CSS versus XPath and he compared it on different browsers see how they compare and he actually said that XPath is actually faster than CSS.
And there are a few other differences but I actually trust them and even if CSS is faster the next PATH the differences are so negligible that I don’t think it really matters.
So I am not going to focus on CSS so much for you guys because I think it’s less relevant than XPath but if you want to learn more like I said there’s this CSS tutorial from sauce labs which is excellent and they can help you guys learn it but we’re going to freely focus on XPath and learn on dominating XPath so that you guys can be awesome at identifying elements.
Well, either way, let me quickly show you what a CSS identifier would look like.
So if we were hovering over this button, you guys see up here that this is an XPath example, this string right here that’s an XPath I can switch it to CSS and then I can hover over it again.
There you go and that’s a CSS example. Let me hover over this button. See that? See how it’s a little bit different just like hash tag ID example or like this doc a button class example so I actually clicked on that one or something like this which to me is very confusing but those are the identifiers and that’s how it looks.
Let’s try to use it in Selenium webdriver so first I want to bring your attention to this button over here right I’m going to hover over it and this is the CSS that is provided to me by Firebug this value right here.
So that’s what I can use my CSS now we also have many other options right do you guys see what we can do here we can it’s a link so we can use link text you guys see that we can use partial link text, we can use the href property but if you use the href property I think is going to click on many links (I can show you guys that later) or we can use the class which may be unique.
But it’s actually not because you guys can see that because of this identifier there are two buttons being highlighted you guys see that one, two, so this identifier is actually not unique so the CSS would normally look like this and by CSS selecting just as that value in but that is not unique enough for us to click on only this button.
Therefore, we cannot use it so rather than teaching you a CSS way of identifying this we will learn to identify this using XPath.
[Tweet “Learn everything about elements identification with Selenium Webdriver.”]
Next Tutorial
In the next tutorial, we will cover how to use absolute Xpath to identify an element in Selenium Webdriver.
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