CSS Selector in Selenium WebDriver | Selenium Tutorial | Selenium Certification Training | Edureka

[Music] in this enormous Lea growing technology trends testing clay is a vital role in software development and we require a tool which can perform all desired actions and one name you can think of here is selenium selenium is one of the most predominantly used testing tool which provides all possible functionalities to test a web application so hey everyone this is rationally from Erica and in this session we'll discuss about the easiest way of locating an element in selenium that is the CSS selector but before we dig deep into this topic we'll first take a look at the agenda first we'll understand water element locators in selenium and why is it used and try to understand the different types of element located that are present followed by giving you a proper introduction to the CSS selector and also take a look at the syntax and some basic commands moving further we'll also see a small demo where we'll try to locate an element using CSS selector so let's begin this session by learning about what are element locators as selenium is an open source portable framework we can easily inspect the element on the webpage and link it using proper codes this element locators in selenium make it easy to find an element on the webpage it can also be termed as an address that identifies a web element uniquely within that webpage these element locators are basically the HTML properties of a web element which tells the tool that is selenium about the action it needs to perform on the web element so this is the proper introduction to what our element locators in selenium now let's take a look at the different types of element locators that exists the locators are of six types we can locate any element on the web page using their ID name class XPath CSS selector partial text and Link text we'll understand these one by one okay so first we'll start with the ID this is the most common way of locating elements since the IDS are supposed to be unique for each element this locator looks for an element in the webpage having an ID attribute the target format will be something like this ID is equal to ID of the element okay guys so this is about the ID locator next we'll move on to the name say if there is no ID present in the HTML code how would you locate the element we use the name locator when there is no ID to use the next word seeing is the decide element has a name attribute or not but it is for sure that the name cannot be unique all times if there are multiple names selenium always performs actions on the first matching element locating element by name is very similar to locating my ID except that we use the name as a prefix instead so this is about the name locator now let's understand what is a link text finding an element with link text is very simple but make sure there is only one unique link on the webpage if there are multiple links with the same link text such as the repeater header or footer and menu links in such cases selenium will perform action on the first matching element with this link this type of locator applies only to hyperlink text we can access the link by prefixing our target width link and followed by the hyperlink text so this is about the link text now what is a CSS selector this whole session is mainly concentrated on this particular element locator guys now let's understand what does it mean CSS is mainly used to provide style rules for the web pages and we can use it for identifying one or more elements in the web page once you start using CSS selector to locate an element you will love the speed when it is compared to XPath we can use the CSS selectors to make sure that the scripts run with the same speed in the Internet Explorer browser as well CSS selector is always the best possible way to locate complex in the webpage this type of locator mainly uses some unique symbols in order to find an element we'll learn more about it when we get to the introduction section now let's discuss about partial link text in some situations say you may need to find the links by the portion of the text in the link text element in such situations we use the partial link text to locate an element okay the syntax goes something like this find element by partial link text where you provide the partial link text of the element so this is about the partial link text now let's move on to another important element locator in selenium that is the XPath expert is a standard navigation tool for XML and an HTML document is also an XML document that is XHTML this XPath is used everywhere where there is XML it is designed to allow the navigation of xml documents with the purpose of selecting the individual elements attribute or some other part of an XML document the syntax goes something like this it always starts with two consecutive slashes that is two backslashes followed by the tag name and square bracket where you have to select the attribute at specifies the Select function and specify the attribute and also provide the value of the attribute so that you can locate the element on the webpage so this is everything you need to know about the different types of locators in selenium guys now let's move on to our key point of this session that is the CSS selector and also understand what is the importance of this locator and why is it used CSS cascading spreadsheets is a stylesheet language used to describe the presentation of a document a written in a markup language like HTML you might think what the CSS have to do with selenium well we locate a web element by using the corresponding HTML code this method is very fast compared to XPath which is one of the most popularly used element locators then why does it have more importance than other locators well to answer this I would say this method is very simple as it uses certain symbols for locating an element on the webpage so this is about the CSS selector now let's take a look at the syntax and a few basic commands that I used the syntax of the CSS selector goes something like this the HTML tag followed by the unique symbol used to locate the element and the value of the attribute that is present this syntax follows when the ID attribute is present now what if there is no ID present how would you locate an element without an ID say if the class attribute is present or the name again we use the unique symbol to identify the element on the webpage say if the class attribute is present we are going to use the dot between the HTML tag and the value of the attribute now say if there is no ID specified nor the class how do you find the element using CSS in this case we use different symbols that helps us in locating the elements as you can see there are three different commands here for partial values say if you want to search for a partial value of the target element you can do it using CSS selector by using the command HTML tag followed by the locator and astrick specifies that it is a partial value now so if you want to match a prefix of a particular element on the webpage you can do it using the CSS selector by using this command HTML tag followed by the attribute and a caret symbol and also specify the prefix of the string this caret is the symbolic notation to match a string using the prefix now if you want to match the particular element with the matching suffix how would you do that we use a dollar symbol in order to find the suffix of an element on the webpage now say if you want to find an element which is nested below say if there is a header say if there is a media child and there is the ancestors and so on how do you find the grand child of an element using CSS selector we can use the inner text to do the job inner text helps us identify and create the CSS selector using the string pattern that the HTML tag manifests on the webpage the syntax goes something like this HTML type followed by colon contains and the text that you want to search for this colon science symbolizes the contains method what is a contains method contains method is a value of a class attribute which is being accessed and the text is a particular element on the webpage that you want to search okay so these are the basic syntax and commands that you need to know when you're working on the CSS selector however in the end CSS covers almost every element on the webpage and makes the process of finding the element easy now let's move on to the most interesting part of this session where I will show you how CSS selector works in this demo section we try automating a very famous ecommerce website ebay.com so to do that we require the Java libraries present in our system and also an IDE where we can write our code as you can see that I already have the Eclipse IDE present here we consider using the Eclipse IDE because it is user friendly and provides various functionalities now if you want to check if the Java libraries are present just go to the command prompt and type Java version this specifies the version of Java installed in your system ok now let's click on latest Eclipse IDE launch the process this is the Eclipse workspace guys now as I mentioned earlier will be automating a website called ebay.com so to do that we require a project under which we'll write our code to automate the webpage so first we'll create a new project so to do that go to file go to new you can't see a Java project here ok so just go to author and type in Java you find that there is a Java project you just click on it at asks for a name so I'm gonna give this as CSS selectors selenium okay just click on finish no you can see that the folder by the name of your project is being created and you can also find the Java libraries present here and the source field is where we write our piece of code so first let's link the selenium libraries to our project so to do that right click on your project just go to build path and configure build path and add external jars so we require the selenium libraries now so these libraries can be easily downloaded using selenium official website so now I'm just going to click on this copy this okay go to the lip control a and open and we require selenium standalone server okay so these are the selenium libraries which we require in our project so you can see that there is another folder being created of the name reference libraries where all our selenium libraries are present now in order to write the piece of code we are going to create a package under which we'll write our class just eat a package package always starts in the reverse order so I'm just going to write a dareka Co dot ed Eureka and finish okay you can see that the package is being created now right-click on the package and go to class it creates a class so I'm going to name this as demo class and select the main function and click on finish so you can see that the project comes under the package Co dot ed u Rekha under which the demo class resides and we are going to write our piece of code under the main function so first we need to set the driver to a particular browser driver so in order to do that I'm going to set the system property to the driver that we prefer so I'm going to prefer working on chrome driver in this case so I'm just gonna write webdriver dot chrome dot driver and and this argument specifies the path in which it recites so let's see where this chromedriver recites you can see that there is a folder here which says Chrome and just copy this chrome driver path and go back to a project and paste the location over here one thing you need to know when you are writing the path is you have to specify if it is an executable file or not the fact that you cannot execute any project on Chrome so I'm just gonna specify the extension that is chrome driver dot exe this is the executable file okay now we need to link the webdriver instance to the new chrome driver so to do that I am going to create an object of the web driver and call it the driver and instantiate it with the new chrome driver you can see that it is throwing an error on the web driver as well as the chrome driver so I'm just going to click on this it says import web driver which means we are going to import the web driver packages to our project the same goes with the chrome driver as well import app ok and after this we need to get the URL of the web page that we want to perform actions on so I'm going to consider the object of the web driver that is driver dot get which is of the form string and specify the URL of the web page so in this case it is the ebay.com so HTTP ebay.com okay specify the URL now we need to find the element on the web page so first let's Google search it will search for EP com so this is our web application guys we are going to perform all our operations on this web page so now say if you want to search for this particular element on the web page each element in this page is considered as a web element so say if you want to search for this particular element I'm going to inspect this by right clicking you can see that the corresponding HTML code for this location is present here and the ID is present which is the CSS locator one good thing about selenium is that allows the plugins to work with them so selenium also supports a plug-in called cro paths where you can easily find the XPath and the CSS selector of the location so to get more information about this cro path how it works and how elements can be located using cro pass just check out the link that is put up in the description of this video so you can see that this CSS selector of this element location is present so i'm just going to copy this and go back to my project and now i am going to write a corresponding code to that location so considering the object of the web element driver dot find element pi i'm going to consider this by the CSS selector and also specify the CSS selector within quotes so hash will be the string selector of the web element and I'm going to send keys to that particular location send keys say if I want to search for one of the trending phones one plus 60 okay now we've found the search box on the webpage and then we'll send keys to that particular location and now we need to search for the search icon on the webpage let's close this now I'm going to inspect the search pattern here inspected you can see that the ID is present here too so just go to the CRO path relative path is present absolute path is also specified and the CSS selector of this particular location is also present because ID is present so copy this location and go back to a project and write the corresponding code it is driver dot find element by CSS selector and I am going to specify the location of the CSS selector and click because it's a button okay so let's see what happens while we execute this program so I'm just going to save this program and run it okay it opened the website it checks for one plus sixty and clicks the search button I think you guys have understood how this works now say if you want to modify this particular process how would you do that let's take a look now say if you want to perform scrolling through a web page and also try using the different element locators like the dollars the carat and so on so we can do that using this commands here so first let's maximize the web page so it is driver dot manage dot window dot maximize so this particular command helps in maximizing the webpage now say if you want to perform actions like scrolling down through a page and so on we can do that using the JavaScript executor this JavaScript executor is an interface between the selenium webdriver and the UI interface so now I'm going to add the Chavez script executors here and also create an object of the same and call it GS sequel to JavaScript executors and we'll also link this javascript executor to the driver okay you can see that the JavaScript executor is throwing an error so I'm just going to import the JavaScript executor functions and packages into a project so now let's scroll down through the web page using the JavaScript executed so I'm going to consider the object of the JavaScript executor GEOSS dot execute script will consider only one argument in this case and specify the function window dot scroll by by specifying the axis in which I wanted to scroll through so I'm going to specify 300 I'm going to delete the argument here okay now let's save this and run it maximizes the page so just for one plus sixty and Scrolls down okay so this is a very simple program guys now say I searched it manually 1 plus 60 and click on the search button and scrolling through it now say if you want to search for this particular element on the webpage I'm going to inspect it and you can see that the class is present here which is the relevant locator in selenium again so this span that is the HTML tag of the particular element is span okay so we'll write our code click ctrl F where the code comes up so I'm going to consider the span use the dot okay you can see that this particular element is being located here using this particular command okay so the dot operator helps in specifying the class of the particular element now say if you want to search for the immediate child class after the parent class so you can see that the division tag is a parent tag of this span so I am going to consider the parent tag first that is div greater than now talking about the other commands that we use in order to locate the elements we can use the partial text link so I'm going to consider this class here I'm going to copy this class and click control F now you can get the search box so I'm going to specify the tag associated with it which is span followed by the locator class and an astrick and specify this element location now say if you don't want to write the entire code so I'm just gonna write the item price so I'm going to take off this s so even in this case you can see that it is locating to the same position so this is how we use the star operator in the CSS selector guys so now if you want to search the element by its prefix or the suffix you can use carrot or the dollar symbol okay so this is everything you need to know about the CSS selectors in selenium guys if you want to learn more about selenium webdriver do check out the selenium playlist thank you for watching this video happy learning I hope you have enjoyed listening to this video please be kind enough to like it and you can comment any of your doubts and queries and we will reply them at the earliest do look out for more videos in our playlist and subscribe to any rekha channel to learn more happy learning

Channel: edureka!

Views: 24,254

Rating: 4.4362416 out of 5

Keywords: yt:cc=on, CSS selector in Selenium, CSS selectors in Selenium webdriver, CSS selector Selenium, CSS Selectors, what are css selectors, What are CSS locators, CSS selectors tutorial, css selectors tutorial for selenium, how to locate an element using CSS locator, CSS Selector types, css selectors id and class, types of selector in css, css selectors explained, CSS Selector with ID, CSS locator with class, CSS Selector syntax, selenium certification training, edureka

Id: 6fFL-KdEPfQ

Length: 22min 42sec (1362 seconds)

Published: Tue Apr 23 2019