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

Learn how to use Playwright's built-in locator methods in JavaScript to find web elements efficiently in automated tests.

Key Takeaways

Playwright provides multiple built-in locator methods to simplify element selection in tests.
Locators can be accessed directly from the page object for easy usage.
Each locator method targets specific HTML attributes like alt, placeholder, label, title, or test ID.
Writing async test functions with proper imports is essential for Playwright test execution.
Accurate attribute matching is crucial for reliable element location and test success.

What the video covers

Introduction to Playwright's built-in locator methods beyond XPath and CSS selectors.
Explanation of locator functions accessible via the page object like getByRole, getByText, getByLabel, getByPlaceholder, getByAltText, getByTitle, and getByTestId.
Step-by-step demonstration of creating a test file in VS Code using Playwright test package.
How to write asynchronous test functions with the page object to access locator methods.
Practical example of using getByAltText to locate image elements by their alt attribute.
Running tests on Chromium browser and troubleshooting common errors like test name mismatches.
Using getByPlaceholder to locate input fields based on their placeholder attribute.
Overview of other locator methods like getByLabel, getByTitle, and getByTestId and their attribute dependencies.
Emphasis on the importance of matching exact element attributes for successful element location.
Demonstration of assertions like toBeVisible to verify element presence in tests.

Chapters

What are the built-in locator methods available in Playwright?

Playwright offers built-in locator methods such as getByRole, getByText, getByLabel, getByPlaceholder, getByAltText, getByTitle, and getByTestId to locate elements based on specific attributes.

How do you use the getByAltText locator in Playwright?

The getByAltText locator targets elements with an alt attribute, commonly images, allowing you to locate them by specifying the alt text value.

What is the importance of the async keyword in Playwright tests?

The async keyword is necessary in Playwright tests to handle asynchronous operations like page navigation and element interactions, ensuring proper test execution flow.

Full Transcript — Download SRT & Markdown

Speaker A

Yeah, hi everyone. Welcome to you all. So, in our previous video, we have seen how to use different types of locators like XPath and CSS, and along with the locator function which is available in the page object. So, Playwright also provides some more additional built-in locators. By using those locators, we can locate different types of web elements. So now, we will see what are those built-in locators which are available in Playwright and how we can use those locators to locate different types of elements.

Speaker A

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

Speaker A

Now, if I look at their official webpage documentation, they have provided different types of locators. They have provided some information like locators are the central piece of Playwright auto-waiting and retrievability. In a nutshell, locators represent a way to find elements on the page at the moment. So, these are the different types of locators they have provided.

Speaker A

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

Speaker A

So, these are the recommended built-in locators they have listed out. Now, we'll see what those locators are and how we can use them. Like all the locator functions, we can directly access them from the page object. You can say page.getByRole, page.getByText, page.getByLabel, getByPlaceholder, page.getByAltText, page.getByTitle, and then finally we have page.getByTestId. So, these are the additional locators they have provided.

Speaker A

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 now this is my vs code editor and now in my project in the test and the test

Speaker A

Now, we'll see how we can use these locators one by one. To demonstrate this, I'm going to open my VS Code editor. Now, this is my VS Code editor, and now in my project, in the test folder, I am going to create a new test file. So, select new and I'm naming it locators_iPhone_built-in.spec.js. So, this is a new file which I have created.

Speaker A

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

Speaker A

Now, before writing the test, we need to import the Playwright test package. So, for that, I'm creating one const variable and we need two functions: test and expect. These are two functions we require from Playwright/test package. So, I can say require, and in the bracket, single quotes specify '@playwright/test'. So, we have imported the required functions from the module.

Speaker A

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

Speaker A

Now, let us write a test function, and this is obviously a named function, so we need to provide a name. I can say "built-in locators" as the title of the test, and then I am writing another function, an arrow function. Whenever you write a new test function, we need to specify something called the async keyword, and inside the function, we have to pass a page object.

Speaker A

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

Speaker A

Now, by using this page object, we can access all the functions which are available. So now, I am taking the help of one application here. Let's go to the HRM application. So, I just want to do a login test by using the new types of locators which are provided by Playwright.

Speaker A

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

Speaker A

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.goto, and in single quotation specify the URL. So, this will launch your application on the browser.

Speaker A

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

Speaker A

Now, the first command I am going to use is... let me try to put all the commands list here in the comment section, then we will discuss one by one. Okay, so these are the commands which we are going to discuss.

Speaker A

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

Speaker A

So, the first command is page.getByAltText. So, this particular function getByAltText means that the element should have some alt text, and by using that alt text, we can get the element. To locate an element, usually an image, by its alt text alternative.

Speaker A

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

Speaker A

So, most of the times when you see images on your web page, you can see alt text. So, let me show you practically. We can just go back to the application.

Speaker A

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

Speaker A

So, let's look here. This is my logo element. This is basically an image. So, when you inspect this element and in the dev tools, you can see something called the alt attribute is available.

Speaker A

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

Speaker A

So, if any element has this alt attribute, you can easily locate that element by using the getByAltText function. Okay, so this alt attribute should be present.

Speaker A

uh visible this is a write function now let me save the file once again and then 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

Speaker A

Now, I'm capturing this alt attribute equal to company iPhone branding. So, by using this alt attribute, I can use this particular method getByAltText.

Speaker A

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

Speaker A

So now, I want to just check that the logo is present or not. So, before that, I want to capture the logo element. So, I can use like this: await, so whenever you call page functions, you need to use await.

Speaker A

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

Speaker A

Dot getByAltText. You can see here, page dot there is a method getByAltText. So, this is the function, and in this, we can specify the attribute of that alt, and this will get the element. I'm storing that element in a variable, let's say logo, and I name it as a const variable.

Speaker A

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

Speaker A

So now, I want to check if this is present or not, if this is visible or not. Okay, so this element is visible or not, I want to verify. So, for that, what can we do is we can write, I await, you can write one expectation: expect this logo element dot toBeVisible. So, this is the assertion we can write: toBeVisible.

Speaker A

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

Speaker A

So, what exactly we have done is we have captured that element by using the alt attribute. So, getByAltText function will take the value of the alt 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.

Speaker A

so like this I'm passing username and password into two different input fields and this time 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

Speaker A

Okay, so let us try to save and execute and see how it is going to work. So, I'm opening a new terminal and then I'm executing one command.

Speaker A

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

Speaker A

So, this time I'm executing another test, so specify the test name.

Speaker A

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

Speaker A

So, npx playwright test, and my test name is what? locators_built-in.spec.js, and I just want to run on Chromium browser in headless mode. Press enter.

Speaker A

and type equal to submit and then class and some other attributes there so this is a button this is a role actually okay so to locate this element we can use any of the attributes we can use type or

Speaker A

Okay, so it is saying no test found. So, I think the name is not exactly matched. So, let me correct the name and first of all save the file. I think I have not saved properly.

Speaker A

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

Speaker A

Okay, so console test comma it is... it is not request, actually it is required. So, spelling stick.

Speaker A

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

Speaker A

Okay, it is a required Playwright slash test and single quotation. So, after that, again save the file once again.

Speaker A

you can say select something like that so this is the get by role method okay so now I have used three different methods over get by Alt text placeholder and then get by rule so let us try to

Speaker A

Yes, now everything is gone. Now, let me run once again. Let me clear and then execute one more time.

Speaker A

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

Speaker A

So now, it has started execution and launching my application, and now it is giving one more error.

Speaker A

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

Speaker A

Now, you can see here it's saying logo.toBeVisible. So, at this point exactly, it is giving an error toBeVisible. Probably the spelling mistake we have done. So, let me just correct it.

Speaker A

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

Speaker A

So, I await expect logo dot V is uppercase character. Okay, so toBeVisible, this is the right function.

Speaker A

login I am trying to use this so directly I am putting some accession on this let's say await 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

Speaker A

Now, let me save the file once again and then execute. When I say Ctrl+C, it will exit from the prompt, and again run the same command.

Speaker A

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

Speaker A

Okay, now it is launching my page again.

Speaker A

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

Speaker A

Yes, now this time my test has passed.

Speaker A

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

Speaker A

Okay, so this is one method available: getByAltText. So, if there is any element which has an alt attribute, you can directly use that alt attribute value and you can get that element. Most of the time, you see for images, you can see alt attribute for that element.

Speaker A

using some XPath inspect that element so this is the element and go back to your selector Hub and 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

Speaker A

Okay, now let me show you one more. So, I can say getByPlaceholder. So, this particular method we can use if you have a placeholder attribute for the element. Especially for input boxes, we can see this placeholder.

Speaker A

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

Speaker A

So, on the same application, if I look here, there are two input boxes on my application. So, in this, there is a username and password.

Speaker A

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

Speaker A

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.

Speaker A

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

Speaker A

So, if there is any input box which has this placeholder attribute, you can use this placeholder attribute value directly to locate the element.

Speaker A

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

Speaker A

So, let me just locate the element by using the placeholder method. So, getByPlaceholder. Let me minimize here.

Speaker A

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

Speaker A

So now, I'm continuing this. So, this is for here we have used this method, the first method getByAltText.

Speaker A

labels in this particular web page so if I go back to the my info so we can see some of the labels so you can see these are all labels actually these are all labels so let me find out label

Speaker A

Okay, getByAltText. Now, I'm going to use one more method called getByPlaceholder. So, we have a placeholder attribute.

Speaker A

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

Speaker 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

Speaker A

title so this particular method will locate an element with the matching title attribute using 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

Speaker A

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

Speaker A

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

Speaker A

to validate here so this is a simple example they have provided so whenever you have seen 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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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

Speaker A

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 Concept in playwright in the next video we will discuss some other topic thanks for watching

Topics:PlaywrightJavaScriptweb element locatorsgetByAltTextgetByPlaceholdergetByLabelgetByTestIdautomated testingVS CodePlaywright test

Get More with the SozAI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries and speaker detection. 30 minutes free.

App Store Google Play

Or transcribe another YouTube video here →

Free tools: TXT to SRT · SRT Validator · Merge SRT · Subtitle to Text · All tools