Locating elements using CSS Selector for Selenium WebDriver with the power of examples | Mihai Usurelu | Skillshare

Locating elements using CSS Selector for Selenium WebDriver with the power of examples

Mihai Usurelu, Passionate about Software Automation

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Lessons (23m)
    • 1. About Me

    • 2. About this Class

    • 3. What is CSS Selector

    • 4. CSS Selector Syntax

    • 5. Building the test environment

    • 6. Ex1 - Absolute CSS Locator

    • 7. Ex2 - Relative CSS Locator , TagName

    • 8. Ex3 - Relative CSS Locator , ID and Class Attributes

    • 9. Ex4 - Relative CSS Locator , Name and Other Attributes

    • 10. Ex5 - Relative CSS Locator , Not Pseudo-Class

    • 11. Ex6 - Relative CSS Locator , Partial Matching Attributes

    • 12. Conclusions


About This Class

Locating elements using CSS Selector for Selenium WebDriver with the power of examples

My name is Mihai Usurelu and I am a Senior Software Quality Assurance Engineer with more than 10 years of experience in software testing, both manual and automated. Welcome to my class "Locating elements using CSS Selector for Selenium WebDriver with the power of examples".


This class is an introduction on using Selenium with CSS Selectors and we will focus our attention on:

  • What are CSS Selectors and the differences between Absolute and Relative Syntaxes
  • We will also discuss about building the test environment and configure Chrome Browser
  • You will discover the complexity of relative CSS Selectors through the power of examples
  • You will deepen your knowledge about CSS Selectors pseudo-classes  and partial matching of attributes with the use of practical examples

For you to be able to follow along the class, as well as practice at your own pace, you have access to a testing website and, in your Student Area, you'll find all the practical examples that will follow in the next chapters. This course is most suitable for people which already had the chance to work with Selenium WebDriver and have the general knowledge about what Selenium is and how we can use this tool to automate Web Based Applications. Automation enthusiasts and beginners will also be able to gain insight into Selenium and CSS Selector through the provided practical examples.

If you have any questions, don't hesitate to drop a line in the comment area.


1. About Me: have you all and welcome to my class Locating elements using CSS elector for selenium Web driver with the power of examples My name is Miho Sure L A and I am a senior quality assurance engineer with more than 10 years experiencing softer testing both manual and automated. During my day job, I am responsible off a complex selenium frame or developed in C sharp and integrated with visuals to your team Foundation server practice makes perfect. So follow along the class to find multiple practical example demonstrated on a testing side that will be provided for your convenience. Thanks for joining the class and hopefully my experience and knowledge can help you in your mission of becoming an expert in selenium. Are automation using CSS locators? 2. About this Class: about this place. There are multiple ways of locating on element in the webpage when using selenium. CSS selector is a pattern and the part of the CSS rule that matches a set of elements in the HTML or XML, a document older, new were known. Browsers support CSS parsing for applying styles to these elements. Selenium Web driver uses CSS parsing element to locate Web elements on a page, provide various method rules and patterns. And with the help of selectors, that test can locate element in multiple ways. Using i D class attributes, value and the text content, as it will be shown in this class. My name is Miho Sharlow, or software engineer with more than 10 years experience in manual and automation testing during my class, where I will share with you my knowledge, experience and tips n tricks about working with CSS locators in selenium Web driver. This class is an introduction in using CSS in selenium, and we will focus our attention on what is CSS locators and the difference between absolute and relative sin taxes. We'll continue learning about relative CSS electors based on I D class and different HTML attributes. We'll discover the complexity off CSS locators to the power of examples, and in the end you will dip on your knowledge with CSS soda classes with the use it off Practical examples for you to be able to follow along the class as well as practice at your own pace. You'll have access to a testing website. You will find a link to the testing website in the student area, as well as the practical example that will follow in the next chapters. We will also discuss about building the test environment, where you'll learn about how and what we need to configure in chrome browser to make her to automation experience a bit easier. This course is more suitable for people which already had the chance to work with selenium Web driver and have the general knowledge about what selenium is and how we can use this tool to automate Web based application. But automation enthusiasts and beginners will also be able to gain insight into CSS locators for selenium through the provided practical examples. If you already let's dive in 3. What is CSS Selector: We will start this video by answering the simple question. What these CS is crosscutting starship or CS is is a starship language used for describing the presentation, the look and four months off a document written in a makeup languages like HTML or Ex Mela . All were known browsers implement CSS parsing engine for formatting or styling the pages using CSS syntax in CSS batter. Making rules determine which style should be applied toe elements in the dorm. This patterns call selectors may arrange from simple element names to reach context. All patterns before the condition in the patterns are true. For certain element, the selector matches the element, and the browsers applied the define style in CSS syntax. Now selenium Web driver uses the same principle off CSS elector to locate elements in the Web dome in selenium context. The CSS elector are also known a CSS locator and even during this class will use both expressions. Next, we'll look over CSS locators, syntax 4. CSS Selector Syntax: CIA says locators syntax in CS is selectors are patterns used to select the element or elements you want to style or, in our case, to using selenium. Selectors may apply toe all elements of a specific type. For example, all input fields from one webpage or elements specified by attributes in particular. A well known example for this is the idea attribute, which is an identify our unique within the document or the class attribute that is unidentified, that can be used by multiple elements from the webpage. CIA says Locators can also use elements depending on how they're placed relative toe. Other elements in the webbed. Um, all CIA says locators in Texas can be seen here. A copy off this file will be provided to you in the student area. We'll use many of the selectors in our examples, but we won't cover all of them because it outfits the purpose of this class before actually starting working with CSS locators. Example. Let's configure the testing environment 5. Building the test environment: this video is about configuring the running environment. For chrome browser, you will see two different options. Toe handle. CSS Locator expressions in chrome. We'll look over both of them, and you will decide which one to use from now on. So open chrome navigate to Google that home and let inspect the search box element. As you can see, the developer tools window opens and the inspected element is highlighted. Now, right, click on this element, and we have here the copy selector option. Keep in mind that automatically generated expression should not be used in testing. They tend to be very fragile, which changes to validate that the generated CSS elector expression is usable in your selenium test. Do the following hit control F and this small search box will open based Akopian selector with Control V and verify that the correct element is found. This search books from developer tools can be used from now. Want to write CSS as well as expect locators, And if you don't want to install any new extensions in your browser, you can use this option from now on. With this class examples, the second way is to install a freshly developed expression for Crumb. So upon the chrome Web store page and let's search for crop it. This is the expression that replaces the old fire pat from fire folks. So let's install it. A brother restart is mandatory after installation finishes. After we start, let's again navigato Google that come inspect the search box element and now, in the right part of the developer Tools window will find the crop at Tub was. This tub is highlighted. You can chose absolute or relative expect option, but also the CSS locator option. Now, by clicking each one off the nodes in the webbed um, a CSS locator pat off the click element will be generated crop. It can build as well to manually type. CS is locator, and it is the option that we will use during this class. Examples. 6. Ex1 - Absolute CSS Locator: locating elements with absolute pet. CSS Absolute pet refers to the very specific location off the element, considering it's completely error. He in the dome here is an example from our testing site. Let's find out the CSS absolute pat for this element, the checkbooks off the shipping address. In order to do this right, click and inspect this element. Then select the Crow Peck tub. And now for writing. Absolute path locators, or space is given between the elements. So we have the first note, which is the body. Then on the same level, we have these two elements here. Our check box is in the field set node. Then we have treated notes and then a form note. Notice that we're passing through the entire dome and use the space between each one off the notes. In order to write the valley, see a suspect. And now, after the form note, we have a label tag and then our input element, the one that we want to locate. So let's add this as well. Now hit, enter, and if you follow it correctly, you should locate only one element. This is the absolute way to locate elements using CSS Locator. You can also use this elector in the following way by describing the direct parent child relationship with greater dance sign separator. This is the way describing the direct parent teacher relationship. We'll go deeper with similar example in the next chapters. However, both of these strategies have limitation as it depends on the structure or the year he off the elements on the page. If this changes, the locator will fail to find the elements. In the next video, we'll see how relatives here says locators solve this problem. 7. Ex2 - Relative CSS Locator , TagName: finding elements with a relative pat, which relative that we can locate an element directly, no matter off its location in the dorm. For example, let's go again to our testing site and try to locate this element here, the input field for the name. So let's inspect the element used in crop it. The tag, name, input and hit. Enter all the input field from the dome will be selected by using the direct talk name off the element, and assuming it is the first input element in the dorm, we will be able to locate this element using insulin. You a syntax similar with this. Anyway, this is not the recommended option to locate only one element because you need to be sure that the served element is the first time in the dome. But it's very useful if, for example, we want to locate and use all the input elements from the webpage. This is how our selenium see in tax should rope like for this case, you can post this video and have a deeper look at the selenium syntax. It will also be available in the student area for you to use in practice on the testing website. In the next video, we'll learn some tips about the I. D in class attribute in the CSS locators. 8. Ex3 - Relative CSS Locator , ID and Class Attributes: fighting elements using the I. D and Class elector with CSS elector, we can easily locate Web elements using their attributes. The idea in class locators are different from all the other attributes because some shortcuts and provided to make it easier to locate elements. In the next example, we'll learn about these two locators. Let's eat this with a practical example. On the testing site, we lose again the name input field, So let's inspect this element. As you can see, this element has an idea. Tribute locators based on its I d. Can be done by entering gun hash. Follow it by the value off the idea Attribute like this. This is how a cell NMC in tax for the selector should look like. This will find the name input element using its idea attribute for identification. However, this will find all the elements from the weapons that heaven I d attributes with the same value. If using this option, we need to be sure that ideas are unique in the webpage. Next, let's see how we can locate elements based on its glass. Attribute Asset CSS locators can use the class attribute to locate an element for this. Let's use the same name, input field. And, as you can see here, it has a class attributes with cold one value. There is also a shortcut where you can use a dot and then the class attribute value in CS is locaters like this. No hit. Enter. As you can see, the same element is located. But now, using its class attributes, this is how history, um, syntax for this elector should look like again. This will find all the elements with the same class value, and you need to pay attention while using this syntax as a short recap for idea attributes . The hash sign needs to be used, followed by its value and for a class attribute a dot, followed by the class Attribute Value should be used in CSS locators. In the next video, we'll learn about finding elements using other HTML attributes 9. Ex4 - Relative CSS Locator , Name and Other Attributes: finding elements using their attributes apart from the i. D and class attributes, selectors also enabled the location of elements using other attributes off the element. In the next examples, we'll see how the name and type attributes are used to locate the checkbooks element and how we can use multiple attributes locators on the testing side. Let's use the same address checkbooks field. So let's inspect it. As you can see, this element has a name. Attributes Locators based on different attributes than idea in class can be done by using the attributes you call with its value between square brackets like this. With this in Texas, multiple elements can be found in the same time. If wanted to be more precise in your findings, you can specify also the tag Name off the element you want to locate in our case on input Tuck like this. This is how our selenium syntax for the selectors should look like now. Let you some other attributes to locate the same element. The type attribute off this element. It's set to check books. We can use this information to locate the element, so we have the same input attack name with the type attributes set to check books. As you can see, the same element is located during testing. You might come across situation where one attribute may not be sufficient to locate an element, and you need to combine additional attributes for a precise match. In the following example, multiple attributes will be used to locate the continue to check out buttons input element . As you can see, this is an element of type submit and the value equal to continue to check out. This is how we build selectors with multiple attributes. We have the talk name input with the first attributes said to submit and the value attributes said toe, continue to check out a selenium syntax for the selector should look like this. Please notice that if attributes value is a multi word expression, primes should be used in selectors. In the next video, we'll learn about finding elements using the bowline settled a class 10. Ex5 - Relative CSS Locator , Not Pseudo-Class: finding elements using the Bullen, said Odo Class. The strategy from this example. It's a bit different from the earlier examples where we located elements based on attributes defined for them and not on attributes value that are different with the next example. You will for sure understand what I mean. So on the testing site, let's look up all the input element, which have a type attribute specified. As you can see, there are 13 elements found, and we see here that we have element with type, said Toe text. Checkbooks or summit. Now let's say that we want to look for elements that have a type attribute different than text. For these, a bowline knot soda class can be used to locate elements not matching the specified criteria. Now let's add the not so the class after the import tug and make the type active but equal to text like this. A usable selenium syntax for this selector looks like this. In the next video, we'll learn about finding elements matching on partier, attribute, value 11. Ex6 - Relative CSS Locator , Partial Matching Attributes: finding elements matching on partial attribute values. CSS Elector provides also a way to locate elements matching partial attribute values. This is very useful for testing application, where attribute values are dynamically assigned and changed every time the page is refreshed. For example, the ISP Internet application exhibits this kind of behavior where ideas are generated dynamically. The following table explained the use of CSS partial match syntax. Post this video and explore a bit the examples from the stable. Now let's see these examples but work on the testing site for the first example. Let's look a bit to these icon containers here, and let's locate all the I elements that have a class attributes, starting with F A F A C C. So we have the I tag and then the class attribute, followed by the carrot sign Equal wit F A F a sissy hit Enter and you'll see that all four elements are selected, all of them having a class attribute that starts with this syntax. For the second example, we will use the same elements and find out how the ending with CSS Locator works. So as in the previous case, we have the I tag and then the class attribute follow with by the dollar Sign equal weight and here we can choose any off these classes. I'll go with Visa hit enter and you see here that only the visa element is selected. The third and final example. We lose the contain options to select again all four icons. So we have again the ID tag and then the class attribute, followed by the star sign Equal weight F a sissy hit Enter and you see here that all four elements are selected, all of them having the class attributes that contain the f A. C C value. With this examples, we've completed the locating elements using the CSS selector for selenium Web driver with the power of examples class. Next, we'll do a short summary with conclusions. 12. Conclusions: Lucien's thanks again for draining the class and learning from me. If you have reached this point and follow it along the practical examples you have learned the following you've discovered the CSS can be of powerful Selim Locator used to find dynamic and complex elements in the webpage. You've learned about the two types of CSS locators, absolute and relative. You found element in the webpage using CSS locator expressions based on various attributes such as I d name, class name. You've gained an insight into the not settled a class and you've gained practical experience by following the examples. And you can further practice by using the testing website provided I hope you have during the class and found it useful. If you have any questions or encounter any issues, drop me a line in the comments area. Thank you.