 Good evening everyone, final talk of the day before the Q&A session, I hope this is not a sleepy session for you all, so let us do a hands-on guide to object identification and this is definitely going to be an add-on to Oren Rubin s session if you all have attended the statistical element locators. What he talked about was more from his tool perspective as well as something from the basics of locators. However, this is going in-depth of object locators, how you have to adopt best practices to identify those locators and before that we also see what are those locators like CSS, XPath and so on and how does Selenium use it to identify the elements. So consider this as a one-on-one tutorial on object identification, one of the most basic aspects of automation, who am I, a test automation consultant with like for ten years of experience working with Selenium based frameworks and other tools as well, I speak at different forums and trainer, mentor to different MNCs and startups, just in short, can visit my profile. What is the agenda for the next 35-40 minutes, we cover the basics of object identification, what are CSS, selectors or locators as people call them, what are XPath locators, let us go into a bit of advanced locators, how we can play around with that, a ready cheat sheet for you all. I know like if someone is using Unix, you have those cheat sheets ready, printed on your desktop always, automators can have this cheat sheet now on. Then some rest practices which I will be sharing based on the experiences as well as case studies on whatever we have experienced so far or the problem areas of automating and yes you can tweet on the following hashtags on and make the Selenium conference more popular on Twitter. So let us get into the basics of object identification, we will make this interactive, I am not going to be the only person speaking out here. What exactly do you do when you start automation, apart from the tooling aspects to understand the HTML technologies, to understand the web technologies, correct or directly do you just go and okay Selenium.find element and blah blah blah, you do that, no what is the first thing that you do when you open the browser or your application under test, what do you do? Of course that is what everyone does, yeah but you still you first go before even object identification, you try to analyze the page source even before object identification, you try to understand the related underlying HTML technologies that is being used. This often is neglected by automation developers in the beginning but they eventually learn this by the school of Adcox, why is because if they do not understand what HTML technology the application is built, they start writing some selectors and use them, going ahead these selectors turn out to be fragile and they again go and analyze, oh this was an exact element, I did not analyze this properly. So if you would have analyzed your HTML application correctly, what technology is being used, what kind of JS libraries are used, you will be in a better position to identify your locators, so the first thing, so consider this way, manual testers, automation testers, functional analysts, they understand the business requirements, functional requirements, automation testers apart from the functional requirements they also understand the technical requirements that is your HTML application. So that is what I said in the second point, carefully understand your page source, try to identify what kind of JS libraries are used, there are several JS libraries being developed these days, several of them are still in development mode, so even they are fragile. So it is better that we carefully analyze such things, your best friend F12 key on the keyboard, is that F12 or F15, break up F12, sure, there is no F15 key right, F12 key, the automation guy is best friend, always on any browser it works now, so F12 I, F12 Firefox, F12 Chrome, you will get the developer toolbar and with that you can analyze your elements. In fact, with the developer toolbar, you need not even try that element in Selenium, you can do it on the console, we will see one example, wherein you practically identify the element on the HTML source and identify that element on the console and see whether that is the element that the locator which you have written for that. So test your element even before you do it with Selenium using the developer toolbar that ensures that at least your selectors are correct, locators come first, logic comes secondary, that is the tagline which I go by, if your locators are not strong, no matter how strong your logic be, your tests are going to be flaky, this is what you have to avoid as automation developers, because your locators or your tests are built upon the foundation of your locators and then comes the logic. So what are the different types of object identification mechanisms? So of course from a Selenium perspective, everyone knows that it can identify by ID, name, class, CSS, all the textbook definitions, I am not going to iterate that. The two major things which we will be discussing in this talk of the session, CSS and expert, that is the one which is primarily used because it helps to identify elements in multiple ways. So let us say if it is only ID, it is only the ID of an element, you cannot, it is the, ask the developer. So however, I mean talks apart but yeah, CSS is most preferred. A, it is the fastest way to identify elements. B, there are various combinations that you can do with CSS selectors and hence that is the most preferred one. I cannot say it is reliable but yeah, it is the most preferred one. From a reliability perspective it is the application under tests that will be causing, that will be answering that question. But however, for any application, CSS is more preferable. Okay, CSS selectors, they go by these basic patterns or the basic base to identify absolute selectors. So beginners also don't know what are absolute selectors. Just consider this analogy, world, continent, country, state, street, city, or city street, sorry. Okay, so if you want to relate this to CSS selectors or rather your HTML page source, world relates to HTML, continent can be your body and then comes all your divs, spans, input element or any other element select boxes and so on. So that is how absolute selectors are written. Relative selectors, directly go to that street number, okay, it's the White House in Portugal. Everyone knows the address. No need to tell the geographic location. So those are what like relative selectors are. Class or ID base selectors, finding selectors using any other attribute. So when HTML developers, they develop the code, it's not only the class or the ID that they write, okay, there can be several other attributes that they give to that particular web element and in this case you also can identify using other elements like name or data elements or data tags and any other attribute that the element carries in its HTML source. Partial matching is one way although not a very reliable approach but yeah, I mean from the textbook way it is allowed to identify element with the partial matching approach. X path locators similarly, so what is exactly the difference will come to that but X path also they go by a similar definition. Absolute X path start from the HTML, body, tag or any other hierarchy but it has to be the full hierarchy and relative again take the example of White House. Index based X path is another way to identify so wherein you specify in square brackets some index of how that element is appearing in the hierarchy and you can do that as one. Similarly with other attributes you can find the X path and partial matching is also another way. We will be seeing the difference between both of them, okay. Coming to partial matches and before that how does CSS and X path differ? CSS, what is the full form? Awesome, your experts in HTML. So CSS, what are cascading size is? That was the next one, okay. So any HTML code that is written they obviously it is not just plain HTML, right. You have size along with that, you have some color element with that, some way to identify that element for the HTML guys as well. This way of writing or specifying attributes to the elements using CSS is also available by browsers to identify that element and hence if it is available to browsers it is also available to Selenium that is how Selenium is built upon. So CSS selectors they directly go by the CSS properties of the web elements. X path they go by the DOM, the DOM content of the HTML page. So since it is DOM, the one fundamental difference between HTML and the X path and CSS will be the way in which you write the notation of CSS and X path. So X path will always begin by double slash if it is not the root node. If it is the root node that is HTML it will always start with a single slash. So if you are writing it manually without the use of Firebug or any other developer toolbar please be careful that double slash implies that anywhere in the root, root by root I mean HTML root. CSS there is no such binding. You can directly write the tag name and the associated property with it. Let us see some complex selectors. So this is a straightforward comparison between CSS and X path. Let us say you want to do a partial match wherein you want to find an element which has an attribute that starts with. This is helpful in case of dynamic elements. Let us say the id is something like user 123456 that 123456 is a numerical symbol and it is going to be fragile for your test. Tomorrow that 123456 tends to become 45678 but that user text will remain the same. So in this case you can use starting with for CSS the notation is going to be carrot equal to. So how does it look like when we write an actual selector? I will show it separately on the browser also but yeah let me show it over here in terms of how the CSS notations are written since we will make this more of a tutorial based session. So how does locators look like? It is like tag name for CSS, square brackets, the attribute name, some symbol I am just putting a question mark over here and the attribute value. So if you directly want to find by the direct attribute name and value you can do something like this. So let us say the HTML element was input with id equals to user name. This is how a CSS selector will look like but if you wanted to do a partial match wherein let us say the HTML was something of this sort input id starts with let us say the actual id for that element is something like this. In this case this one will fail whereas this one of course please want to get the syntax where bracket should end wherever applicable this one will pass. Similarly if you want to do something like ending with the carrot equals to will be replaced by dollar equal to and if you want to do a partial contains match wherein let us say the user name is preceded by some numbers as well. In this case you can do something like input id star equals to this will also work. So far clear everyone on the selectors the similar notations are there for x path there is one comparison slide which shows the similar examples for x path as well few more complex scenarios gradually you all are able to find the basic selectors now with just the attributes the values and so on but there are selectors wherein you have to find them on the basis of relationships or rather the hierarchy of the elements. So let us say there is a div tag inside that there are several spans for ul and li inside that you want to find a specific li how do you go by that hierarchy so in x path and css there are ways in which you can find the ancestor that is the parent parent and parent and descendants so your grandchildren's preceding and following your siblings and similarly in css also you have all these options in css there is an interesting option wherein you can also identify elements based on the ui state when I say ui state can someone tell me without okay you will have it already on the screen so ui state means whether that element is enabled disabled whether it is like a checkbox if it is checked and so on there is an additional way of additional class in css which is called as the not class which often helps to discard some unwanted elements why it helps wherein if you use not so let us say there are several input boxes and you do not want to find the hidden ones you can specify the property over here where not style equals to hidden can do that in this case okay I will show that in the console a simple cheat sheet do not worry if the font is too small on the screen it is available on the cloud but yeah let us take a quick recap of how elements are available or what are the standard ways in which you can identify elements let us say the first one finding by id so the second column that you see is just an html tag with input id equals to user css has a shorter notation of writing it wherein id can be replaced as hash and for x path if you can see there there is one symbol over here the at the rate symbol so at the rate in x path implies that the word preceding after it or after it is the attribute name and after equal to is the attribute value similarly for class in css it can be replaced by a dot notation and x path it still follows the same way any other attribute so input star input square brackets name equals to some value x path it still follows the same one here comes the interesting ones a direct child wherein let us say a ul element has several li's so ul greater than li implies that it is the direct child the immediate child and for x path it is going to be double slash ul slash li of course it still can have any attributes that you want to add with it but yeah this is just a sort of way of writing it right now any grandchild or any child not the immediate child so ul again has several li ul space li that means that any li within that ul and here it will be ul sorry double slash ul double slash li so this also implies that let's say the li again had a ul and inside that there was another li it can also pick that li alright need not be the immediate children it can be grand children in this case n child a very fragile way of identifying I have put this because to make you understand that this is a fragile way it need not be the preferred way to identify elements it can be your last resort if you are not getting any other options so let's say you want to go by the index wherein you want the fourth element from the hierarchy you can have nth of type ground brackets and 4 and for x path the index notation will be square brackets and the index of that element direct parent so if for example you want you have an element you want to find its parent and then perform some operation on that so let's say the best example can be the over based submenus at that time you want to do some operation on the parent so you can do something like the active one the active li element and if you can carefully see this is colon parent this means it gives you the immediate parent in this case for x path there is no special word or notation to write but yeah you can have slash dot dot so if you if you are doing doors or command prompt you will know that double dot means the previous directory so yeah you can relate to that so double dot in x path means the previous link or the previous immediate parent the next sibling it can be covered by the plus symbol so there are two li elements one after the other you have some property to identify the first li element but there is nothing to identify the second one however you are interested in the second one identify the first one then do a plus li or the plus next element only by the tag name you can still identify that by this way here it tends to be a bit complex as well as fragile can you point out why in x path the same thing in x path is fragile but in this it is valid so your example wherein x path is not reliable is clear by this example why let me explain the first part let's break this x path double slash li class equals to active that is the element from where you are going to find the sibling here x path first finds the sibling point one goes to the parent point two or above it and then finds by the index is a very fragile way of identifying here you can do that there is this is also a way and following sibling is another way I just wanted to show the significance between how x path can be unreliable at certain times now let's say by text if you want to find link with sign in text so a so a is the standard notation for a link colon contains sign in double slash a contains brackets text comma the text that you want to identify it with so in all these cases you can find elements either by x path or CSS notations however if you see carefully x paths tend to be a bit longer to write it is more syntactical this is more symbolic in writing okay okay so far we discussed the basics of all your selectors the way in which we can identify those elements play around with the different selectors and find advanced way of element identification but how can you still make your scripts more robust so avoid fragile selectors ones that have numbers text or even if it appears to be variable to you discarded or find a way in which you can write composite selectors so don't just go by one property or one attribute go by at least one or two to three properties and in this case your element will be much robust as compared to the previous example again when coming to hierarchies or let's say you're going too much switching between parent child and siblings and so on don't rely too much on more than three to four levels three to four is also on the higher side ideally two to three levels should be sufficient to identify any element avoid using more than two attributes for composite selectors so two or three is still a good number more than that again tends to be a bit fragile why is because you never know which attribute is going to change and which is more prone to have dynamic values so again more than two attributes is not a very recommended one okay so we discuss this in the first slide f 12 your best friend of automation guys ensure that all your selectors in all your browsers are working in the console so yeah in iframe it might not help you but yeah you can still identify those elements the second most important thing apart from storing your locators is upon identifying your locators is how you store your locators always from an automation perspective store it outside your code as much as possible or totally so it can be excel it can be XML text files anywhere but not in your code when you come into frameworks yes you will have a robust way of storing your elements but yeah even if you are writing simple scripts you can go by property files at the least or XML files I will be showing some examples wherein you can generate simple XML structures to store your elements at times yes so even at page object model you often store those element locators in those class files that is still not a very good approach you I mean the whole point which I am focusing out here is that you should not touch your code if your tests are breaking fix it by selectors outside your code of course if there is a logical change you will have to change your code but at the initial level from a locator perspective you shouldn't be touching your code okay it also again depends on how large your tests are okay and how many tests you are developing and how complex is your application excel sheets are recommended because many frameworks are still relying upon excel sheets however if you want to move away from excel sheets XML is the best approach and at certain times don't do GUI automation at all how question mark thinking on it okay so there are several scenarios in web testing where you can avoid GUI automation so it is not really important for you to check that functionality from a GUI perspective but you only want to ensure that that functionality is stable go by the web services approach at several instances web applications are developed by the web service mechanisms so just populate your request response XMLs ensure that those are the correct validations are working on that and then take the response out of it and if you want to only do database level verification or similar stuff avoid GUI automation in certain cases yeah oh you are yawning so you can come here no problem we will see some practical examples on how we can identify elements okay so this is a demo website it is also available on the blog site we are hosting that so let's say you want to identify elements from here so let me show you how the console works so what's your automation guys best friend F12 this thing opens up over here so if you see carefully the first tab the default one is the elements what does it show the HTML source content and the related source code for that HTML page now you want to identify or inspect this element you always have this ready made inspector over here it points to the corresponding element that you highlighted now based on the analysis that you did you feel that input type equals to email seems to be a more logical way to identify this element however I would say type equals to email is again on the lower side of presently why in this page there can be several fields having type equals to email there can be a search bar on top wherein you are submitting email there can be some fields other for entering your email ID so then go for IT example input email so I'll write my CSS selector something like this input example input email one I copy this how do I ensure that this is the correct selector before even I run it on my selenium test I go to console there is a very simple way of writing this document dot query selector you get an autocomplete over here it's a mini ID for y'all and paste the selector over here enter it you see that this is the selector that you had entered and if you just pour your mouse over it the element gets highlighted your query yeah so the element gets highlighted this ensures that this is the element that you were looking for how do you write this document dot query selector now this is as good as writing browser dot find element okay browser dot find element is equivalent to document dot query selector so is there an equivalent of the browser dot find elements yes there is something called as document dot query selector all let us see the difference between these two so you all know that dot query selector returns you the first element that is found and query selector all will return you a list of elements so if you see carefully the difference between these two this is just a single element whereas here it is coming into an array although the size is 1 so let us see wherein we do something like this okay I got all the input elements on the web page yeah so let us see another way of identifying elements or on some other website yes dollar x is also all so basically dollar x is a shorter notation okay you might not get to work with that in IE at certain times okay and that is why document dot query selector is preferred because that is how even developers use it for their debugging purposes no only CSS document dot query selector is CSS and dollar x is x part sorry dollar dollar is x part so let us identify some other elements okay can you identify this element uniquely okay let us go to some complex identification tabular ones those are something which is very complex for you correct in this case how are you going to identify each and every row of this particular table so I just want the rows or say a specific column from this row do a right click inspect so you will need to understand the hierarchy of tables in HTML so that is how you will come to know how the tables are structured in this case table it has some class Google visualization table then t body t head is for the header t body will contain all the rows within that tr will contain each row td will contain each column correct in this case do you see a unique way of identifying the columns all the columns have the same sorry class name so how will you identify it in this case there are no other ways except you iterate through the t heads to a textual comparison of the text that you find in the header columns so let us say you want to find the product name iterate through t head identify what is the index of that particular column then iterate through td all the td's within that tr or within all the tr's and pick the td with index that you found from the header rather than going by locators which have index it is better that you do a textual comparison why I will show you with an example or rather I will tell you with an example let us say you all have hard coded the selector wherein the product name is at index 2 0 1 sorry 0 and 1 okay what if tomorrow I change the table structure and move this product name into the column number 3 so your selector is fragile because it is not going to identify the product name although it won't fail it will give you a wrong data correct so in this case go by the textual comparison within your code without any indexes on your locators okay getting it so far that is what I explained with css within your code you have to loop rather than writing any complex selectors so write simple selectors and loop it in your code okay so now I want an example or I want to find all the image source links these are the e-commerce portal I want to find image links for each of this so how am I going to write a selector such that using one selector I get all these images so try to identify a unique thing which is common between all three or all the elements that are desired so in this case image that is the only thing the only tag which these images have so I would not recommend that you only go by the image tag because in a complex e-commerce website image tags are not going to be only for the product images there can be several other images lying around so in this case if you see logically there is a div class equals to product image this seems to be a logical selector where in the parent has a logical name to it and so we can write it as div dot product image angular bracket image so it will give me the child of a div which is called product image so let us see whether this applies to all the other product images yeah the structure is the same you can confirm it with the third one as well so yes div class product image and image src let us confirm this so yeah if you just press the up arrow key over here it will show the history and you can fetch back from it div dot product image I can image you can see that you got three images one two and three so in this case you got all the three product images and from this you can now extract the attribute value which is the source that is required for you and use it in your test wherever applicable so these are some basic examples that were there for this particular presentation yeah but there are still complex ways in which yeah so apart from this there are still various mechanisms with which you can write your test in a more stable manner and less flaky test so the whole point to remember avoid fragile selectors do not rely on too much of hierarchies avoid using two or more composite selectors or composite attributes check your selectors in the browser even before you write your test and store your elements outside your classes so that your code is more maintainable so and wherever applicable go to pre-test at all so that's it for the session all these slides are available on my blog post and I'll be happy to answer any queries questions if you have any sort of related to not only object identification selenium based automation frameworks and so on that's my business card you can just drop me a mail if you need any help I'll be happy to answer that thank you for attending any questions with CSS and so there is this answer answers which you can so in CSS directly look at us okay so when you say that how selenium is internally working correct so it's good or bad right so why is it worrying you no I mean just curious okay so well see from from the x path perspective it captures the whole page source it captures it as a document object if you are aware in Java Java notation there is the document factory and the document object in that that entire DOM is loaded and within that it traverses the whole x path from the double size root and so on okay when it comes to CSS selectors it does not have to traverse the DOM and it matches those properties in the form of say at a higher level I'm explaining that it is like a key value pair for it okay so whichever element in CSS is having those properties matching those properties it will go and fetch those elements so at a higher level this is what I explain but yeah if you want to work the internal mechanism you will have to understand the selenium browser specific codes so for each browser the mechanism is a bit different I mean for Firefox Chrome it is similar I it is a totally different approach okay anything else it is faster it secondly it also reduces the syntax of your locators not only fast it allows you various ways to identify the locators and that is why it is more reliable stability is the concern yeah yeah yeah you can I mean depending on the application right depending if that application you know that the ID is never going to change you can go for only ID rather than CSS selector that is also allowed however if you feel that the tomorrow that ID might change or some other attribute is tending to be fragile then go for a composite one with CSS or x but however CSS is my personal see I mean from a fragility perspective you cannot trust the developers yeah correct yeah that is but always all elements don't have names also so that is why you have to go for composite elements okay thanks a lot yeah