Playwright with Javascript | Locating Web Elements | Playwright built-in locator methods | Part 5

0:00 yeah hi everyone welcome you all so in our previous video we have seen how to use a different type of locators like XPath and the CSS and along with the locator function which is available in the page object so favorite is also provided some more additional built-in locators and by using those locators also we can locate the different type of web elements so now we will see what are those built-in locators which are available in the playwright and how we can use those locators uh to locate the different type of elements now if I look at their official webpage documentation so in this they have provided different type of locators so they have provided some information like locators are the central piece of play Rate

0:47 Auto weighting and retrievability in a nutshell locators represent a way to find Elementor elements on the page at the moment so these are the different type of locators they have provided so these are the recommended built-in locators they have listed out so now we'll see what are those locators and how we can use it like all the locator functions we can directly access from the page object you can say page.getby role page dot get by text and Page dot get by label and get by placeholder and Page dot get by Alt text Page dot get by title and then finally we have page dot get by test ID so these are the additional locators they have provided now we'll see how can we use this locators one by one so to demonstrate this I'm going to open my vs code editor

1:40 now this is my vs code editor and now in my project in the test and the test I am going to create a new test file so select the new and I'm naming as locators iPhone built-in locators underscore built-in dot spec Dot JS so this is a new file which I have created now before writing the test we need to import clearight test package so for that I'm creating one const variable and we need two functions test and then expect these are two functions we required from uh playwright slash test package so I can say request and in the bracket single quotes specify at the rate at the rate play right slash

2:32 test so we have imported required functions from the model and now let us write a test function and this is obviously nms function so we need to provide a name I can say built-in locators and the title of the test and then I am writing one another function Arrow function and whenever you write a new test function we need to specify something called async keyword and inside the function we have to pass a page picture right now by using this page picture we can access all the functions which are all available so now I am taking the help of one application here let's go to HRM application so I just want to do login test and by using a new type of locators which are

3:21 provided by playlist okay so to automate this I'm just capturing this URL and first of all I will launch my application on the browser so for that we need to use one command called await page dot go to and single quotation specify the URL so this will launch your application on the browser now so the First Command what I'm going to use is let me try to put all the commands list here in the comment section so then we will discuss uh one by one okay so these are the commands which we are going to discuss so the First Command page dot get by Alt text so this particular function get by Alt text so means that element should have some alt

4:10 text and by using that alt text we can get the element so to locate an element usually image by its a text alternative so most of the times when you see the images on your web page so you can see alt text so let me show you practically so we can just go back to the application so let's look at here this is my logo element this is basically image so when you inspect this element and in the dev tools you can see something called alt attribute is available so if any element is having this alt attribute you can easily locate that element by using get by Alt text function okay so this alt attribute should be present now I'm capturing this RT equal to company iPhone branding so by using this alt attribute I can use this particular method get by Alt text

4:57 so now I want to just check that logo is present or not so before that I want to capture the logo element so I can use like this I wait so whenever you call Page functions you need to use a bit await Dot uh get by Alt text you can see here a page Dot there is a method get by Alt text so this is the function and in this we can specify the attribute of that Alt and this will get the element and I'm storing that element in a variable let's say logo and I name it as const variable so now I want to check this is present or not this is visible or not okay so this element is visible or not I want to verify so for that what can do is we can write I

5:44 wait you can write one expectation expect this logo element Dot to be visible so this is the accession we can write to be visible so what exactly we have done is we have captured that element by using alt attribute so get by Alt text function will take the value of adult attribute which is called company iPhone branding so now once you get the locator and then element then we can apply one assertion on that particular element okay so let us try to save and execute and see how it is going to work so I'm opening new terminal and then I'm executing one command so this time I'm executing another test so specify the test name

6:29 so npx playwright test and my test name is what locators underscore uh built-in dot spec dot JS and I'm just want to run on Chromium browser in edit mode press enter okay so it is saying no test font so I think the name is not exactly matched so let me correct the name and first of all save the file think I have not saved properly okay so console test comma it is it is not request actually it is required so spelling stick okay it is a require

7:14 d uh play rate slash test and single quotation so after that again save the file once again yes now everything is gone now let me run once again let me clear and then execute one more time so now it is started execution and launching my application and now it is giving one more error now you can see here it's saying logo dot to be visible so at at this point exactly it is giving an error to be visible probably the spelling mistake we have done so let me just correct it so I wait expect logo dot uh V is uppercase character okay so 2B uh visible this is a write function now let me save the file once again and then

8:03 execute when I say Ctrl C it will exist from The Prompt and again run the same command okay now it is launching my page again yes now this time my test is got passed okay so this is one method available get by all to text so if there is an element any element which is having alt attribute and you can directly use that alt attribute value and you can get that element most of the time you serve for images you can see alt attribute for that element okay now let me show you one more so I can say get by placeholder so this particular method we can use uh if you have placeholder attribute for the element so especially for input boxes we can see this placeholder so on the same application uh if I look at here

8:53 so there are two input boxes on my application so in this there is a username and password so let me inspect the username element now you can see the placeholder attribute is available and for password also you can see a placeholder attribute is available so if there isn't any input box which is having this placeholder attribute and you can use this placeholder attribute value directly to locate the element so let me just locate the element by using placeholder method so get by placeholder let me minimize here so now I'm continuing this so this is for here we have using this method the first method get by Alt text okay get by Alt text now I'm going to use one more method called get by placeholder

9:43 so we have a place folder attribute for the element you can use this particular method get by placeholder so how to use it again of it page Dot sorry let me write once again ah wait page Dot uh the method get by placeholder okay get by uh placeholder so you can directly get a auto section a page dot get by placeholder and inside this we can directly specify the value of that placeholder attribute so again if you go back to your application so the username placeholder value is what uh I think there's a username go back and this is a username

10:28 and get that placeholder and then specify this so this is the this will written an element so on that input box we need to pass some value so for that again we can use a method called field fill and you can pass the input like this so this is how we can use get by placeholder same thing for password also I am trying to use await page dot get by placeholder and this time you have to pass password which is a placeholder which is there for password also let me inspect this element password and placeholder is password and that I can pass here and fill the password is admin one two three so like this I'm passing username and password into two different input fields and this time

11:17 I'm using get by placeholder so when we can use this function if whenever you have a placeholder attribute for that element you can use this and most of the times you can see the placeholder attribute for the input elements input boxes or text fields okay so now let me uh execute this and after clicking on the login button let's try to execute so for clicking on the login button uh I just want to use some other other method so get by role there is one more method called get buy roll and this particular method we can use to locate by explicit and implicit accessibility attributes right so that means whenever you have a button or whenever you have a link okay and whenever you have to perform certain action on that element right

12:05 actionable elements and those type of elements you can use this method get by role suppose normally if it is a button right you can see button tag in a Dev tools and if it is a input box you can see input tag and if it is a link right you can see anchor tag so basically even though you can see anchor tag that's a link basically right so get by role based on the role we can locate the element so let me show you an example for get by role so role is not an attribute here if I just go back to uh login here login button if I inspect this element and what are the attributes are there here is just a button and the type is available and then class and type equal to submit and then class and some other attributes there so this is a button this is

12:56 a role actually okay so to locate this element we can use any of the attributes we can use type or any other attributes name or whatever attribute is available for that element you can use it so I'm trying to use my get by role here so to use get by role you can say await page Dot get by role this is the method get by role and basically it is a button so the first parameter I can pass button so if you are going to click on the link so we can just pass as a link here okay and button and comma and on which button we have to perform the click action so here in the curly brace we have to specify attribute so you can pass any attribute So currently there is a type attribute is a type equal to submit is there so that I am going to pass so here

13:46 I'm passing type so type column in the single quotation I can pass submit and this will return the element and Then followed by click method so this is how we can locate any element by using rule so get by role role in the sense what kind of role that element is performing is basically so if I look at this definition so get by role to locate any locate by explicit and implicit accessibility attributes that means any type of element you can locate by using get by rule if it is a link you can just say link if there's a button you can say button off it is a select box you can say select something like that so this is the get by role method okay so now I have

14:32 used three different methods over get by Alt text placeholder and then get by rule so let us try to execute the script so far what we have done now go back to terminal I'm just running the same command let me clear this yes so launching my application then it is trying to find the login entry username and password and now successfully click on the login button it's going very faster so now my test is got passed so I don't see any issues now after successful login let us continue the script so let me use some other methods so get by text so this is another method we can use get by text

15:19 so this particular method we can use to locate any type of element which is having text content so what does it mean let me show you after successful login you can say admin admin123 and once you log into that application so you can capture anything so for example uh as soon as a successful login I can see some username here right who is whoever is logged into this particular application I can see the name so this name I can capture this is a text content is basically okay this content I can check and this I can locate okay and get by text we can capture this on the text of the element we can capture similarly I

16:04 can capture this employee information and I can capture this label Pam right so similarly if I just go back to the dashboard here and then I can capture this dashboard these are all text actually okay the text content we can capture uh or by using the text content we can locate the element okay so based on the text content we can locate the element so let me show you how to locate so as soon as you successfully log in I just want to locate this name the text whatever is this spread here I want to capture that and I want to check whether it's visible or not so for that what you can do is I'm trying to use one more method called get by text here after successful login I am trying to use this so directly I am putting some accession on this let's say await

16:49 expect so what you are expecting that element should be visible so what element I am capturing that element by using uh a weight page Dot and here I'm using that method get by text get by text and here get by text and whatever name is displaying so whatever name is uh displaying that you can specify so this is a weight page dot get get by text and here whatever name is displayed that we need to pass now inspect this element and if you are inspecting this element this is the name which is displaying right so this element we need to capture this is the text actually in the text of the element so if the if you want to locate any element which is having inner text you can use this method page dot get by text so this will return the

17:39 uh this will actually return the text from that element and that should be visible like I said Dot we are not comparing with anything I am just saying the same text is visible or not to be visible so this is a session to be visible so I'm getting that element by using text content and then I'm verifying it is visible or not so this is my uh assertion now let me save and then execute once again and one more thing whenever you log into the application right so that's this username keeps changing so it may not be there every time so that also will try to handle so before that let me run the test foreign application and providing username and password successfully

18:30 click on the login now it has got passed so if you run the same test multiple times it may not pass every time because that name keeps changing but we are expecting some name to be there so these are actual text we are expecting right so in this case what you can do is we can capture actual text which is present and that we can pass it here and you can just check whether it's visible or not so to get this again we can use either X path or css to get that element because we don't have a uh these type of attributes for that element so if you don't find those attributes obviously we can go with the XPath or css okay so what I'll do is this time I will try to locate this element by using some XPath inspect that element so this is the element and go back to your selector Hub and

19:20 that will give you relativex path and now I'm using this relativex path just observe before writing the session I am getting that element by you by calling locator method so yesterday we have seen this approach I can say weight dot weight page dot await page dot locator method I'm calling and directly you can pass the X path or css of the element and Dot we have introduced one method in the last video that is text content right so this will actually return the text of that element and that I can store in a variable and this should be const variable and now this particular name this particular element right this particular name I will directly pass it here so that whatever name is displayed on the same name is visible or not I'm just checking it okay

20:10 so this is the main intention is how to capture how to locate the element by passing the text value of the element so that's the main intention okay because here the username is keep changing so dynamically I'm getting the username and then passing here so that this will every time pass so let us save this again and then execute one more time now opening my application on the browser login is successful perfect so now I got my test passed so this is how we can use this method so get by Alter text get by placeholder get by role get by text there are some more methods are available called get by label get by title get by test ID so let us look at the official document with these examples suppose we go to this get by a label if I

21:01 want to just get by label right so how to use this get by label suppose if you have element like this and you should find label tag label tag for that element and which contains again input box if I look at this HTML of this code and label is an attribute a label is a tag and which contains a actual label password and inside this the input tag is there right if you find a label attribute for any element if you want to locate that type of element if you're having label at a label tag name you can write this you can say await page Dot you can see these methods whatever they provided you can see await page dot get by label and then this particular label directly you can pass and inside this there is an input box user actually so we no need to refer this input box directly and

21:50 we can refer this label element and then we can directly pass the value by calling fill method so very rarely you can see this kind of combinations most of the times you can see either label after that input tag but very rare cases you can see input tag within this label tag so in in this particular context you can use we can locate that input Box by directly use this label at label tag name so how we can use we can say await page dot get by label and provide this label whatever is there and then fill secret like this so how to check whether any labels are there not here you can say go to Dev tool I say Ctrl f and slash label if I search for the label I don't see any labels in this particular web page so if I go back to the my info so we can see some of the labels

22:41 so you can see these are all labels actually these are all labels so let me find out label now you can see there are 21 labels are there you can see but this label is different the input box is different so you can just look at here this is the label and inside the label the label text is there and after that actual input boxes got started here so this it doesn't have any input box so this is independent element actually so if you want to capture this label or if you want to locate this label then you can use this method so this is a another method called get by label okay and apart from this there are few more methods are provided and apart from the get by label get by title is also there so you can just look at this get by title so this particular method will locate an element with the matching title attribute using

23:29 page.get title Sometimes some elements are having title tag like title attribute like this you can see here so some material some element is there for that there is a title attribute is available so to locate this element by using this title and I can write like this so page dot get by title and whatever the value which is there for the title attribute you can just provide and then you can locate and in this example they already have sent some assertion also so you can say where to expect and Page dot get title issues count and they are basically getting this whole element based on the title attribute and to have text is 25 issues so this is a actual text we are going to validate here so this is a simple example they have provided so whenever you have seen

24:14 this title attribute for any element you can use this get title get by title method to locate the element okay this is one method and get by test ID is another method they have provided but just look at here uh get by test ID so this particular get by text ID we can use whenever you have something called Data test ID attribute this is also specific to data test ID so if you found this particular attribute for any element it can be button or link or whatever if you find this particular attribute you can directly call get by test ID and directions so here you can use only data test ID attribute value you cannot use anything else so then you can perform the click

24:59 action so this is the example they have given for this particular method so locating by test ID okay so these are the few methods they have provided uh in their web page get by role so this is applicable for especially input boxes and the links and we need to pass two parameters one is button or link whatever then we can pass uh any attribute of that element and get by text and we can capture the element by using a text and especially in the text if there is inner text of the element we can capture and get by label also we can capture if the label tag is available for that element you can capture the element by using get by label and the placeholder is also one of the attribute of the element and especially for input boxes you can see the placeholder if you

25:46 have that attribute you can capture the element and get by Alt text so all these are also one of the attribute of the element most of the times you can see for images logos you can find ALT attribute and if you have such type of attribute you can use this locator to locate the element and then get by and get by title and if you want to capture any element by using title attribute you can use this one and get by test ID if you have any attribute which test ID attribute for that element you can use this so most of the methods basically uh depends on or based on attributes especially for label and placeholder alter text title test ID so these methods are basically Works based on the attributes of the element you have to find exact attribute if I say

26:33 placeholder same attribute you have to find all to text again all the part attribute you have to see and title that is also attribute should be present for the element and test ID also you should see the same attribute for the element okay so but especially get by role and in this you can pass any type of attribute and by passing the role like button or link along with some attribute you can specify and then locate the element so these are the recommended built-in locators they have provided from play right side okay so along with the normal locators like we can pass X path and CS if you still want to use you can call locate method as we discussed in the previous video same thing or else you can use this type of methods okay so that is all about locator's

27:20 Concept in playwright in the next video we will discuss some other topic thanks for watching