**Playwright with Javascript | Locating Web Elements | Locators-Property, XPath, CSS | Part 4 — Transcript & Summary | SozAI**
Source: https://sozai.app/transcript/playwright-javascript-locating-web-elements/

Learn how to locate web elements in Playwright using properties, CSS selectors, and XPath with practical JavaScript examples.

## Key Takeaways

- Locating elements is essential before performing any action in Playwright automation.
- Playwright supports multiple locator strategies: properties, CSS selectors, and XPath.
- Tests in Playwright are written using async functions with await to handle promises.
- Two main ways to interact with elements: via page.locator() or directly with page.click().
- Using unique selectors ensures reliable element identification and test stability.

## What the video covers

- Introduction to the importance of locating web elements before performing actions in Playwright.
- Explanation of different types of web elements like input boxes, buttons, checkboxes, dropdowns, images, and links.
- Overview of locator strategies in Playwright including element properties, CSS selectors, and XPath.
- Demonstration of how to create a Playwright test file in VS Code and import necessary modules.
- Details on using 'test' and 'expect' functions from the '@playwright/test' module for writing tests and validations.
- Explanation of asynchronous test functions using async/await syntax in Playwright.
- Step-by-step example of launching a web application using page.goto() method.
- Two approaches to locate and interact with elements: using page.locator().click() and page.click() methods.
- Emphasis on the use of unique properties or selectors to accurately locate elements.
- Practical example of automating login by locating and interacting with login form elements.

Answers

## Questions about this video

What are the main methods to locate elements in Playwright?

You can locate elements using unique properties of the element, CSS selectors, or XPath expressions in Playwright.

How do you import Playwright test functions in a test file?

You can import the 'test' and 'expect' functions either using require syntax or ES6 import syntax from '@playwright/test' module.

What is the purpose of using async and await in Playwright tests?

Async and await are used to handle asynchronous operations, ensuring that Playwright waits for actions like page navigation or element interaction to complete before proceeding.

## Full Transcript — Download SRT & Markdown

00:02

Speaker A

Hi everyone, welcome to you all. So in today's video, I'm going to show you how we can locate elements on the webpage in Playwright. So basically, this concept is most important because whenever you want to perform any action on the element on the web page, before that we need to locate it. We need to identify that element, and then we can perform the action. So throughout the automation, there are two important things we need: one is locating elements, and once you locate the element, then we can perform certain actions on that element, right? So the action can be changed based upon the type of element. So normally, what type of elements we can see on the web page? Normally, we can see input boxes, video buttons, checkboxes, dropdowns, images, links. So these are all different types of elements we can see on the web page. So before performing any action on those web elements, we need to locate them. So to locate web elements on Playwright, it provides certain number of methods or functions, and in which we have to use locators and what type of things are supported to locate the elements. So basically, the property. So if we can use any property of the element, so the properties we can capture from the DOM of the particular web page. So we can take any property, any unique property of the element through which we can locate the element. And we can also use CSS, so cascading style sheet, so CSS selector. CSS also we can use to locate the element, and locator will support, and then XPath also we can use to locate the element. So we can use either property; it can be ID or it can be name or whatever, we can use it to locate the element, but that should be unique property for that element. Second thing is CSS. All the combinations of CSS we can write to locate the elements, and finally we can write XPath. So XPath also will be able to locate the element. So how can we write methods and what are the different functions or methods are available in Playwright to locate the elements? Now I'm going to show you practical examples. Now go to VS Code editor. Now this is my new project which you already created in my previous video. Under test folder, we are going to create a new test. I am taking new files, and I'll name it as locators.spec.js. Now in this, I'm going to write some piece of code. So whenever you write a new test in Playwright, first we need to import Playwright test module. So for that, what we need to do, we need to put two curly braces and one is test function we require. So we require test function, and then we need one more function called expect. Test function will be providing or we can write a test block, and expect will be used for validations. Expect, these two things we will get it from, we need to use something called require, and here we need to specify the module name in the single quotation, at the rate playwright/test. So this particular module we will get from the Playwright, and test and expect. So there are so many functions are there in this module, but we need only these two, test and expect, and we can make it as a constant like this. So we need to import that. So there is another way to import these two functions from the same module. So there is another way we can import by using import keyword. So we can use import keyword, import two functions we require, test function and then expect function from which module? We can say from in the single quotation, at the rate playwright/test. So this is another way of importing functions from Playwright test module. So these are the two important functions which you are going to use while writing our Playwright test. We can use the syntax, the first one, or you can use second one. Anything is correct. So now we need to write one test block, test function block. I can say test, and inside this we need to provide the name of the test. So I'm giving some name to the locators. Okay, okay. So we can say locators is my test name, and comma. So we need to write one anonymous function, bracket and arrow and greater than. This is an anonymous function. So whenever you say anonymous function inside the bracket, we need to pass one parameter called page. Again, the last video I have discussed about this. So page is a parameter we need to pass inside the anonymous function. And moreover, to solve the promise, we need to write one more syntax called async. In the last video, I have detailed explained what is this async and what is await keywords. So every test method whenever you write as async, whenever you write an anonymous function, before starting the function we need to specify asynchronous keyword, async keyword we need to specify. Now let us start writing the code. The first thing is we need to launch our application or we need to open the application on the website. So for that, we need to access this page feature. In that, we have a method called goto. So in this, we need to specify the URL of our application. Now I'm going to use this application URL, and this is a URL of app.demoblaze.com. So this is the application URL I'm going to launch. So specify that URL, and this command semicolon is optional in JavaScript. Even if you put semicolon, no problem. Even if you don't put, no problem. Semicolon at the end of the statement is optional in JavaScript. Okay. So this particular function goto from the page will launch our this particular application on the browser. And before using any functions from the page parameter, we have to use something called await keyword. So whenever you are calling function from the page, you have to specify await keyword because this will make sure it will wait for the promise to complete. Okay. So this is commonly required. And once you launch your application, now I'm going to do some test here on this particular web page. So what I want to do is as soon as you launch my page, I want to click on this login, and once you click on the login, now we'll get a login form, and here username, password I will provide, and then I will click on the login. Now let us try to do this activity, and I will locate these elements by using different types of locators. So first, let us start with the login. So how can we locate the element in Playwright? So to locate the element in Playwright, there are multiple ways. So we have to use one function from the Playwright. So what is that function? If you want to locate any element on the web page in Playwright, we need to use one method called await page.locator. This is a function we have. In this, we need to specify attribute of the element, or it can be XPath, or it can be CSS, whatever we have, we can just specify here. So here in the single quotation, we need to specify either property or XPath or CSS, whatever locator you want, you can just pass this locator in the single quotation, and then we'll perform the action. Suppose if you want to click on that element, we use a method called click. This is a syntax: await page.locator, and here we pass the locator. It can be property of the element, or it can be CSS, or it can be XPath, whatever you can just provide, and dot click. This is one approach. And there is another approach: await page. From the page, we have to call click method directly, and inside this you can pass the locator. Here we can pass the locator directly. So this is another approach. So the first approach is what? We can specify the locator first and then perform the click action. Now here we are performing the click action on the element whichever is having this particular locator. So these are the two different approaches which we have in Playwright, and whichever you are familiar with, you can use it. So most of the times, this is the most preferable approach: await page.click. Click is just a method. Okay, it will differ, it will change depending on the type of element. Suppose if it is a link or if it is a button, we use click method. Similarly, if we want to provide s...

00:20

Speaker A

it we need to identify that element and then we can perform the action so throughout the automation there are two important things we need one is locating elements and once you locate the element then we can perform certain action on that element right so the action can be changed based

00:35

Speaker A

upon the type of element so normally what type of elements we can see on the web page normally we can see input boxes video button check boxes drop downs images links so these are all different type of elements we can see on the web page so before performing any action on those web elements we

00:50

Speaker A

need to locate them so to locate web elements on the playwright and which will provide it which is provided certain number of methods or functions and in which we have to use locators and what type of things are supported to locate the elements so basically the property so if we can use any

01:10

Speaker A

property of the element so the properties we can capture from the Dom of the particular web page so we can take any property any unique property of the element through which we can locate the element and we can also use ESS so cascading style sheet so C is a selector CSS also we

01:27

Speaker A

can use to locate the element and labor rate will support and then XPath also we can use to locate the element so we can use either property it can be ID or it can be name or whatever we can use it

01:39

Speaker A

to locate the element but that should be unique property for that element second thing is CSS all the combinations of CSS we can write to locate the elements and finally we can write X path so XPath also will able to locate the element so how can we write methods and what are the different functions

01:58

Speaker A

or methods are available in the play right to locate the elements now I'm going to show you practical examples now go to vs code editor now this is my new project which you already created in my previous video under test folder we are going to create a new test I am taking new files

02:14

Speaker A

and I'll name it as locators dot spec dot Js now in this I'm going to write some piece of code so whenever you write a new test in the playwrite first we need to import playwright test module so for that what we need to do we need to put two curly bridge and one is test function we required

02:35

Speaker A

so we required test function and then we need one more function called expect test function will be providing or we can write a test block and expert will be used for validations expect these two things we will get it from we need to use something

02:54

Speaker A

called require and here we need to specify the module name in The Single quotation at the rate playwright slash test so this particular module we will get from the playwright and uh test and expert so there are so many uh functions are there in this model but we need only these two test and

03:14

Speaker A

expect and we can make it as a constant like this so we need to import that so there is another way to import these two functions from the same module so there is another way we can import by

03:26

Speaker A

using import keyword so we can use import keyword import two functions we required test function and then expect function from which model we can save from in the single quotation essay at the rate playwright slash test so this is another way of importing functions from Cleveland test model so

03:48

Speaker A

these are the two important functions which you are going to use while writing our playwright test we can use the syntax the first one or you can use second one anything is correct so now we need to write one test block test function blocks I can say test and inside this we need to provide

04:04

Speaker A

the name of the test so I'm giving some name to the locators okay okay so we can say locators is my test name and comma so we need to write one Anonymous function bracket and arrow and greater than this is a uh Anonymous function so whenever you say Anonymous function inside

04:30

Speaker A

the bracket we need to pass one picture called page again the last video I have discussed about this so page is a picture we need to pass inside the anonymous function and moreover to solve the promise we need to write one more syntax called a single in the last video I have a detailed

04:47

Speaker A

explained what is this async and what is a bit keywords so every uh test method whenever you write a as saying whenever you write a Anonymous function before starting the function we need to specify asynchronous keyword async keyword we need to specify now let us start writing the code the

05:04

Speaker A

first thing is we need to launch our application or we need to open the application on the website so for that we need to access this page feature in that we have a method called go to so in this we

05:16

Speaker A

need to specify the URL of our application now I'm going to use this application URL and this is a URL of app demo blaze.com so this is the application URL I'm going to launch so specify that URL and this command semicolon is optional in JavaScript even if you put semicolon no problem

05:36

Speaker A

even if you don't put no problem semicolon of the end of the statement is optional in JavaScript okay so this particular function go to from the page will launch our this particular application on the browser and before uh using any functions from the page picture we have to use something

05:55

Speaker A

called Avid keyword so whenever you are calling from function from the page you have to specify a weight keyword because this will make sure it will wait for the promise to complete okay so this is commandedly required and once you launch your application now I'm going to do

06:13

Speaker A

some uh test here on this particular web page so what I want to do is as soon as you launch my page I want to click on this login and once you click on the login now we'll get a login form and here

06:26

Speaker A

username password I will provide and then I will click on the login now let us try to do this activity and I will locate these elements by using different type of locators so first let us start with the login so how can we locate the element in playwriter so to locate the element in the

06:45

Speaker A

playwright so there are multiple ways are there so we have to use one function from the playwright so what is that function is if you want to locate any element on the web page in the playwright so we

06:56

Speaker A

need to use one method called I wait page fixture dot locator this is a function we have in this we need to specify attribute of the element or it can be it can be attribute or it can be XPath or it

07:13

Speaker A

can be CSS whatever we have we can just specify here so here in the single quotation we need to specify either property or XPath or css whatever locator you want you can just pass this locator in the single quotation and then we'll perform the action suppose if you want to click on that

07:29

Speaker A

element we use a method called click this is a syntax await page dot locator and here we pass the locator it can be property of the element or it can be CSS or it can be XPath whatever you can just provide and Dot click this is one approach and there is another approach is await

07:48

Speaker A

page from the page we have to call click method directly and inside this you can pass the locator here we can pass the locator directly so this is another approach so the first approach is what we can specify the locator first and then perform the click action now here we

08:06

Speaker A

are performing The Click action on the element whichever is having this particular locator so these are the two different approaches which we have in playwright and whichever you are familiar with you can use it so most of the times this is the most preferable approach await page dot

08:22

Speaker A

click a click is a just a method okay it will different it will change depends on the type of element suppose if it is a link or if it is a button we use click method similarly if we want

08:32

Speaker A

to provide some text value Suppose there is an input box if you want to for provide some value in it input box then we can use either fill method or we can use either type method there are different methods are there so we'll discuss them later so here we will mainly focusing on the

08:47

Speaker A

locators part okay so to locate any element first we need to specify our weight page dot locator and locator of the element and then perform the action whichever is relevant to that element and the second approach is what you can directly call click method from the page picture page dot

09:03

Speaker A

click and specify the locator directly so these are the two approaches which we have in the playwright to locate the elements so now I'm going to use both approaches I will show you one by one now go back now the first thing is we need to locate the login link and we need to perform click

09:22

Speaker A

action on this so now my first thing is we need to click on you need to click on login button so here I'm trying to use some property as a locator okay so I'm using some property as a locator

09:38

Speaker A

property of the element has a locator so what is the command we have to use await page dot locator page dot locator here we have to provide the locator and after providing the locator we call click function or click method like this so now here we need to provide the locator

09:56

Speaker A

in the double or single quotations so this time I am going to pass some property as a locator as I discussed the locator can be a property or css or can be XPath now I'm just going to pass property of the element so if I look at this login inspect this element

10:14

Speaker A

and if I go and see the Dom here and this is the element if I look at this element login element there is an ID attribute available and there are some other attributes also available so we can if you have a name attribute or any other unique attributes you can use that as a locator now what

10:30

Speaker A

I'll do is I will take this name ID equal to login directly you need to copy the attribute along with the value or the property along with the value so we can call it as attribute or property whatever

10:42

Speaker A

just copy the entire thing and now we need to use that as a locator so here I'm pasting over here and when you're pasting attribute and value you no need to keep the quotation so just remove this okay so this is how we can specify the property of the element it can be name

11:01

Speaker A

or equal to something or ID class tag whatever you want you can just specify it so this will locate the element and then perform the click action so this will perform the click action on the element this is one approach and then there is one more approach suppose I can say

11:19

Speaker A

I wait dot I wait page dot I can directly call click method like this click and here you can specify the locator directly so the locator is what id equal to login to that is that is a single simple statement either you can use this approach or you can use this one you can directly

11:39

Speaker A

call locator method and inside this you can pass the locator and then you call the click method click is an action method and if you don't want to use the locator then you can directly call click method from the page and on which element you have to perform click action you have to specify

11:54

Speaker A

the locator of that element this is basically property I have used okay this is just how we can just click on the login button now so the next action is what after clicking on the login so we will get a form like this so it is a small model kind of window so in this we need to provide

12:15

Speaker A

username and password into the username field and password field now this is basically an input box right now let us see how can we handle this input box so here this time I'm going to use some type of other type of locator let's say let us try to use CSS so if I look at this element uh username

12:33

Speaker A

element this is input box and there are certain attributes are there type class ID is there so I want to create one CSS now if I go go back to the selector Hub by taking help of selector Hub

12:45

Speaker A

you can capture locators for those elements and this is provided some relativex path reduce SS and everything so if you want to write your own CSS you can just write it here now I'm going to write one CSS based on some attribute which is provided for this element so let us say there

13:02

Speaker A

is ID is available for this element so by use by using this ID attribute I'm going to create one CSS how to create so whenever you want to use ID as a CSS you have to start with the hash hash

13:13

Speaker A

and what is our idea login username so that I can provide a login user name so now we can see this CSS is exactly matching this element username element this is a CSS now I'm going to copy the

13:29

Speaker A

CSS and I'll use as a locator now go back so this time I'm going to provide the username so here we need to fill the form right so we can say provide username so to provide username so here

13:48

Speaker A

I'm using CSS so to provide the username what is the command you can use a weight page dot can directly uh again there are multiple ways page dot you can write like this locator of in the quotations you can specify CSS like this and we need

14:06

Speaker A

to provide the value you need right so here we can use a method called fail so fill is a method through which we can pass the value so now I am passing an username like this so this is the one approach so page dot locator and provide the locator which is basically CSS

14:22

Speaker A

dot fill is a function through which we can pass the value in the input box and this is one approach suppose if you don't want to use locator method directly also you can do it so if you want to do directly you can say a weight page dot fill okay you can simply say page dot

14:39

Speaker A

fill and specify the locator this is the most easiest then previous one so you can specify the CSS in the single quotations and then end of the statement so here fill is we already be used here so this one and this one is almost similar you can see here in the previously when you're clicking

14:57

Speaker A

on the login also have user same approach directly I'm calling click method fill method from the page itself okay so now we have provided the username and there is one more method also there instead of fill you can also use one more method called type so this is also write method I can say I wait page

15:18

Speaker A

DOT type and then specify the locator so this is also a right method either you can use fill or you can use type if you want to provide some text in the input box so here I have used CSS as a locator

15:34

Speaker A

okay so once you provided username next we want to provide the password now go back to your application now get the CSS for the password element now locating the password and if I look at the password there is ID is available for password also now the ID values this one so by

15:53

Speaker A

using this ID I am going to create a new CSS and if you want to create CSS tag with ID tag with any attribute combination you can specify so input is my tag and in the square brackets we have to

16:08

Speaker A

specify attribute and values so we can also write CSS like this right you can say input what is an attribute here I'm taking ID as an attribute so I can say ID equal to the value of ID is what login

16:21

Speaker A

password so this is also CSS for password element this is also CSS now I'm taking this and let us try to use it here so password element so we need to Pro we already provided username now we need to provide password so to provide the password again the command is what I wait page dot

16:44

Speaker A

you can use type or fill or whatever so I'm trying to use fill so don't confuse because I'm showing multiple ways to do it okay either you can follow one way so here we use refill and type so we can

16:55

Speaker A

use fill or you can use type anything is fine so let us follow one approach let's say I am your following field okay here is a field similarly here also I am taking fill and here we need to

17:06

Speaker A

pass the locator so basically what is this this is a CSS so inside the single quotation another single quotation not allowed so what we can do is we can just uh when I use CSS right so we can just

17:20

Speaker A

remove this single quote here you can put double quote and inside this single quote is alert like this so this is a CSS for password element so on that element we have to fill the value also right right how to fill the value so and one more thing we forgot in the previously when I pass username

17:41

Speaker A

page dot fill this is the locator but what is the value we have to fill where we have to provide here we need to pass one more parameter here we need to pass value okay so we need to

17:55

Speaker A

also pass value this is a syntax same thing here also when I use type the locator comma and value we have to pass okay so this is how we can pass the value into the input box same thing for password also same thing repeated await page dot fill and this is the element

18:15

Speaker A

comma and what is the value we have to pass in it we have to pass password so I am passing password into that element okay so this is how we can pass CSS also here also I have used CSS

18:28

Speaker A

tag name along with the attribute combination I have used so if you have a class attribute you can also use class dot class value you can pass okay so this is how we can provide the password so now what do we need to do we need to click on login button so now go back to your application

18:46

Speaker A

so let's try to inspect the login element so for the login element this time I'm going to use XPath okay so how to use an expat this is the X path of the login element this is the expat of the login element I am capturing from the selector this is a x path of the

19:05

Speaker A

login element so if you want to use this x path so then go back and we need to click on login button so how to click on the login button first we need to locate that element click on login button so to click on the login button again same command so await page dot

19:27

Speaker A

click okay page dot click and here we pass the locator so XPath I am going to pass here so here single quotations are there outside you can just make it as a double quotations okay and internally you can make it as a single quotation so this is the X path of the element so here we

19:45

Speaker A

no need to pass any value just we need to perform click action so one locator we need to pass but in case of fill we have to pass locator along with the value what we which value we have to pass we

19:56

Speaker A

need to specify so perfect now we need to we have passed username in this particular field then we have passed password and then we have clicking on the login so after that we need to verify something so now again go back to your application now let's manually log into application

20:17

Speaker A

okay so once you log into the application so I want to verify uh the logout is presence or not here that logout is present or not after successful login you will see this log out right so I want to verify this is log out button or link is visible on this particular page or not

20:34

Speaker A

that I want to verify so how to verify the visibility of the element in the playwright so for that first we need to capture this element and then we can apply an assertion on this visible assertion we need to apply okay so first of all let us capture this element and

20:53

Speaker A

again I'm taking the X path of this element okay so how to capture that element in the playwright so here we are verifying log out link presence so how to verify the logout link presence first of all we need to capture that element so I wait page Dot so I wait page dot locator so this time we are

21:17

Speaker A

not going to perform any action in it so we need to capture the element by using locator method so specify the locator and this is the X path and specifying and what we need to do for this element

21:29

Speaker A

we have to store that element in a variable so we have to store that element in a variable so keep the entire X path in the double quotations and internally value we can give in the single quotation so this is next PATH of that element so this element we have to check whether it is

21:45

Speaker A

visible or not so we can store that element in a variable I can create one variable log out link and I can make this variable as a constant so now we need to check visibility of this element so for that we need to wait we need to write one assertion we need to wait one validation

22:04

Speaker A

Point using expect so I wait expect so what you are expecting this element should be visible so expat and to be visible so dot to be and there are so many methods are already available so we need to verify the presence or visible job the element so I can say 2B visible to be visible

22:28

Speaker A

and just we need to call this function like this so this will verify the logout link is present or not on the web page and after that I just want to close my application close my browser so what

22:41

Speaker A

you can do await page dot flows that's it okay so for every command in the page we have to use await okay and before writing the anonymous function we need to write async okay in the playwright test so

22:58

Speaker A

here I have used a property of the element as a locator and here I have used CSS of that element as a locator and now here I have used XPath so here we use something called X path of the element

23:15

Speaker A

so whatever export you want to pass you can just pass over here also I have used X path of the element and get that element and then we expected that element to be visible on the web page so this is how we can find that element by using different type of options we

23:34

Speaker A

can use either property or we can use either CSS or we can use either XPath okay and various types of methods we can use so this is the first method so we can locate elements locate elements okay look at uh basically we are locating single elements right single element specific element we

24:00

Speaker A

are locating so for that these are the ways I wait page dot locator and specify the locator whatever you want and then apply the method click if you want to click on the element you can click the same thing we can write like this away page dot clicker locator and if it is an input box how

24:16

Speaker A

to write an input box we need to fill the value in the input box in that case we can write like this a weight page Dot await page dot locator off and here we can pass property X path CSS whatever

24:29

Speaker A

so locator and here we use something called fill okay here we need to pass some value in the single quotation if it is an input box this is for what input box okay and if it is a link or button we

24:45

Speaker A

need to follow this link or button so this is a method we have to use and there is another method we have input first what is that we can directly say a weight page Dot okay and locator and specify

24:59

Speaker A

whatever locator you created it can be property or export that CSS whatever and then use type and this is also same thing we'll do so type and value and if you still want to access method from the directly from the page you can write a weight page dot fill and here you can pass whatever locator

25:18

Speaker A

you want to pass you can pass this locator and along with the value in the second parameter we have to pass value and same thing you can also write by using type so await page Dot Page DOT type and locator and then value so these are the many ways we have to handle the input box okay so

25:41

Speaker A

now let us run our script so we have created we have launcher application we click on the login button and then use a login Box is open then we provided username then we provided the password and after that we provided so we successfully click on the login and then verify logout link is

26:02

Speaker A

present or not or visible or not now let us save the file and to run this test what we can do we can go to the new terminal and here the command is what npx play right NPS playwright test and

26:17

Speaker A

which test you want to execute locators.spec.js so locators dot spec dot Js and on which browser you want to execute I want execute specific browser so I can say hyphen hyphen project chromium and by default test will execute it on the headed mode right headless mode so I want to execute

26:39

Speaker A

in the headed mode so I can also specify iPhone headed okay now let us try to execute our script so now it is lodging my application open the login box provided the data and successfully login and my test is got passed okay so this is how simply we can locate specific element

27:01

Speaker A

or single web element by writing the locator it can be the property of the unique property of the element it can be CSS of that element or XPath so these things we can get it from the dev tools or you can use selector Hub tool through which we can capture these values okay

27:19

Speaker A

now so with this we have successfully located specific web elements on the web page now sometimes we need to also locate multiple web elements so for example on our web page I want to find total number of links on this page now I want to capture all the links from the page or

27:37

Speaker A

I want to capture let's say in the home page uh I want to capture all the product names So currently there are nine different products are displaying on the page now I want to capture all the product names right so in those cases we need to locate multiple web elements we need

27:52

Speaker A

to capture all the web elements and then we have to extract the text of that web elements and then we can do some validations so now let us look at how can we locate multiple web developments okay so to locate web elements we have one more command specific command is available so locate multiple

28:16

Speaker A

web elements so to locate multiple web elements the command is a weight same command page and here instead of specifying the locator so earlier we have used page.locator page.click like this right so instead of specifying the locator method we simply call dollar dollar

28:37

Speaker A

and inside this we can specify the locator which will exactly match with multiple web elements okay so this locator should able to Match multiple web elements so this particular command will return multiple web elements and those web elements we have to store in a variable so the elements you

28:58

Speaker A

can make that variable as a constant so await page dot dollar dollar and this locator we have to pass and this locator should able to match with multiple web elements then it will return all the elements suppose if the locator is not matching with any of the elements it will simply

29:15

Speaker A

return empty like this no values no elements okay but it will not throw any kind of exception so if the locator is pointing with one single web element only that element will be returned one single web element will be returned so if the locker is pointing with multiple web elements

29:32

Speaker A

or matching with multiple web elements then it will return multiple web elements so this is the one more method we have to use to locate multiple web elements okay so let me show you one example so as I said before in this particular page right so I want to find I want to find all the links I

29:51

Speaker A

want to capture the text of all the links which are present in this particular web page so how to capture the links so first of all we need to write a locator or property we have to use which

30:02

Speaker A

will match all the links which are present in the web page so if I go back to inspect and go to you can just search on the dev tools also like say Ctrl F and when I say anchor tag slash slash

30:14

Speaker A

a so this is matching with 33 so that means totally 33 links are there so why I am using a here a is a tag name of Lincoln so which will match with all the links on the web page right

30:26

Speaker A

so if I even if you go back to the selector Hub and you can say slash slash a which is matching with 33 elements so all the links will be imagine with this anchor tag so we can use

30:37

Speaker A

this to locate multiple web developments now let us capture all the link text from the web page so for that what I'm going to do is I'm going to create a new test so new file I'm going to create in the test and here locating multiple elements Dot spec dot Js

31:05

Speaker A

okay so now let us write the code for locating multiple web elements so for that what we need to do we need to First import uh required module so for that what we need to do we need to

31:18

Speaker A

write this statement so require clearance last test get test and expect functions from test model cleared module and then we will write the test block so test and inside these two parameters the first one is title of the test so how to specify the title here locate multiple elements so I'm

31:41

Speaker A

giving some title of the test and then we need to write one Anonymous function so this is anonymous function and this Anonymous function will take page fixture that we need to specify in the curly place and before writing the anonymous function we need to write a single keyword

31:59

Speaker A

okay so I think a is a lowercase character as single keyword so now we need to implement the test so as part of the first step what we need to do we will launch our application so to launch our

32:11

Speaker A

application what we have to do again we have to call one method called go to Method so page dot go to and here we specify the URL so whatever application we are going to launch you can just specify the URL of application so this will launch our application and before that we need to specify

32:31

Speaker A

uh await await page dot go to so this will launch our application on the browser now so as soon as you launch the application on the browser the next thing is what I want to capture all the links which are available in the web page so for that we need to write a separate method we have

32:50

Speaker A

to call it so how to call it a weight dot dollar dollar so this is a symbol a weight dot dollar dollar and here specify the locator so anchor tag is matching with all the links so I'm just

33:03

Speaker A

specifying a which is representing the anchor tag of the element so this will return all the links and those links we have to store in a variable so I'm just creating one variable called links and the type of this variable I'm just defining as a const const link is equal to I wait uh we miss

33:23

Speaker A

something await page dot dollar dollar case Okay page dot dollar dollar and this will return all the links which are present in the page why it is returning all the links because we specified the anchor tag so this tag will match with all the links so now I got all the links now I want to

33:40

Speaker A

print the text of every link so for that we need to write one looping statement so we can write one for Loop and the looping statement syntax is almost the same for Java and JavaScript so if you know already looping statements how to use looping statements in Java Java programming the same

33:58

Speaker A

syntax we have to follow even in the JavaScript okay so I'm writing some enhancement for Loop or for each Loop here so in this for Loop in the for loop I am specifying this links variable so which contains all the links in the form of elements now I am extracting every Link in this variable and

34:16

Speaker A

this variable also I will Define with the constant because that's a variable so from the links okay so here we use something called or it's not a colon actually we have to use something called off okay so off but in Java we have a column here but uh in JavaScript we have to just say colon

34:36

Speaker A

so from all the links we have to capture each and every link into the variable each and every link into this variable and from this link variable we have to extract the text value of the Linker so to

34:49

Speaker A

extract the text value we can simply say await link Dot text content there is a method called text content so what is the text content method will do this will return the text of the element even in the selenium Webdriver we have a similar method called get text method so there we will

35:07

Speaker A

use get texter so here it is a similar method in the JavaScript text content so this will get the text value of the link and that I am going to store in another variable called link text now again this variable I will Define with the const and after that if you just want

35:26

Speaker A

to print that link you can simply say console DOT log and you can say link text that's it so with this simple looping statement we can read every link into this variable and from that link we can capture the text value into the variable and then we can print it here so this way we can

35:48

Speaker A

capture all the links into the variable then we can read each and every link then we can print in the consolator so let us try to execute this code and see whether it is printing all the links or

35:58

Speaker A

not now I'm saving the file and go to the terminal now I'm running the code so this is the command so let me write the command nbx playwrite and bakes playwrite test and what is a file I am going

36:15

Speaker A

to run locating multiple elements so locating that's the second yeah so locating uh multiple elements dot spec dot JS and now I want to run this one in the Chrome browser say iPhone iPhone project chromium and in the headed mode I want execute so hyphen hyphen headed okay now let us

36:43

Speaker A

try to execute so this will capture all the links from the web page and it will print all the link text in my console window if I look at this these are all different link text so you can see these

36:55

Speaker A

are the header links are printed sign up previous next and category links are printed everything is got printed like this so similarly let us try to capture the products from the home page so there are so many number of products are there if I look at in the page there are nine products are there

37:12

Speaker A

so one two three four five six seven eight nine total nine products are there in my home page now I want to capture the product names from the home page I want to capture the product names right so

37:23

Speaker A

how to capture it so again we have to write proper locator which will able to match with all the labels of this particular products so let me try to use XPath for this element this time so how to

37:36

Speaker A

write an X path inspect and go to selector hub and in the selector Hub I'm going to write my own XPath so how to locate only products list from this homepage so let us try to locate one element first of all and this is the first product element Samsung Galaxy S6 now little go up this H4

37:54

Speaker A

tag is there again it will go up there is a due tag again go up on there is another new tag and there is another now if I look at this this is the main parent tag so which contains number of

38:04

Speaker A

div tags and every div tag is representing one product right so let us start from this main due tag so the ID is available T body ID so for that I am writing One X path so slash slash Duke

38:18

Speaker A

and at the rate ID equal to and T body ID so this is the ID and this is pointing to the product section and inside this there are multiple dues are there so every DB is representing one product so I can say slash slash div so it is representing all the products now again if you

38:39

Speaker A

expand first to div which contains again one more div and which contains a anchor drag and a div and various actual label is present inside the div actually so inside the H4 inside this anchor tag so actual the product text is present inside the H4 so from this particular div tag I directly want

38:57

Speaker A

to jump to the H4 tag so in the relativex path I can directly specify H4 now exactly this XPath is pointing to labels and again in not H4 element actually inside this there is one more anchor tag is there and inside this anchor tag there is a text here this is a text I want to capture that is

39:16

Speaker A

part of anchor type so again I will specify a here now nine elements are exactly matching with this x path now with this x path I am going to locate all the products now go back to your script okay so

39:30

Speaker A

let me comment this code so now I want to capture all the products for that I am going to write a command like this await page dot dollar dollar so if you want to look at multiple web elements

39:42

Speaker A

we use dollar dollar and inside this locator so we have captured XPath already so that you can directly specify so single quotation inside the single quotation not allowed similarly double quotation inside the double quotation not allowed so outside you can put double quotes

39:58

Speaker A

and then inside you can use single quotes So This is the locator that means it's an expat actually so with this we captured all the products and stored them in a variable so let me create one variable called products and the type of the variable is I'm just creating as a constant

40:16

Speaker A

so now we need to read each and every product element from that we need to extract the product name so for that again I am going to write one for each Loop so here products and from the products

40:29

Speaker A

we need to get each and every product one by one so I'll Define one variable called const product of products and this product is a variable which contains one by one so from the products which will lead each and every product element in this variable now from this product variable

40:46

Speaker A

I want to capture the text of from text from that product so how to capture again a weight product is an element a weight product is an element from that we need to extract the text value so we use one method called text content as I said before this is the equivalent of get text method

41:03

Speaker A

in selenium Webdriver so text content and this will return product name actually label of the product or you can say product name and this is also variable I will Define with the const so as soon as we get the product name you can just print in the console window just like this console.log

41:22

Speaker A

and I can say product name that's it so this is how we can simply write a looping statement to read each and every product into this variable and from that variable we are extracting the text content and storing in another variable and then we are just printing it okay so this is how we can

41:40

Speaker A

simply locate multiple web elements now let us try to execute this course save the file and now go to the terminal and run the commander again npx playwright test and my test name is what locating multiple web elements locating multiple

42:02

Speaker A

elements Dot spec dot JS and I want to run only on Chrome browser so I can say hyphen hyphen project chromium project chromium and then headed mode I want to run so I can say headed okay so now my test is got passed but it is not printed any links I think I

42:28

Speaker A

have run some different thing okay so let me try once again let me try to run once again so let me run once again so when you run your code so it is launching my page and then you can

42:43

Speaker A

see in the output we got the options like this so sometimes what happens is when you run your script so from this page because we are locating multiple web elements so all the elements may not be available at the one time so it takes a few seconds of time so once you execute your test so

43:02

Speaker A

immediately you will get all options sometimes so sometimes you may not get so for that what we can do is so before getting all the options all the products into the variable you can just wait till all the products are displayed on the web page so for that we can add one more statement here there

43:19

Speaker A

is one more method called page Dot wait for wait for selector so this is the command we can use wait for selector and in the double quotations we can specify whatever locator you passed here so this is optional sometimes if you face any issues you can just add this option so page dot

43:37

Speaker A

wait for selector and this is a locator whatever is located we have created to match with all the products which we need to specify so this command will wait till all the products are displayed on the web page and after that it will get all the products into the variable then it will

43:52

Speaker A

try to print in my console window now let me clear everything now again I'll try to run once again so now it is launching my browser now you can see all the products got displayed so this command is optional okay sometimes if it is not loaded properly so then you can

44:10

Speaker A

specify wait for selector or else you can just comment this so even if you comment this sometimes it will work so let me try to execute after commenting the statement so launching my browser now we can see this time it is not displayed the products so it depends

44:27

Speaker A

on the performance so we can just add the statement if sometime it is taking or else directly it will print all the products okay so this is how we can find multiple web elements this is how we can simply find multiple web elements on the web page so for what we have learned

44:45

Speaker A

is we have learned how to locate specific web elements and how to locate multiple web members so to locate specific web elements we have to use this method await page.locator or directly page dot click or page.fill so these are action methods actually based on the type of elements so

45:04

Speaker A

these methods will be changed field type click on everything so in the coming sessions I will discuss about these methods so to locate multiple web elements you can say page dot dollar dollar and here specify the locator which will able to match with multiple web elements and that

45:19

Speaker A

will return the multiple web elements okay so the locators means either any property you can use whatever unique property which is available for that element in the Dom you can use that property it can be ID name CSS text whatever you are and then CSS you can create your own

45:37

Speaker A

CSS and we can use it and expat all kinds of abjects positive expert and X path with different type of functions and different type of expert access all this stuff will be supported okay so that is all about today's video so in the next video we will see some

45:53

Speaker A

more topics that's all for this thanks for watching we'll see in the next video

Topics: Playwright JavaScript web element locator CSS selector XPath automation testing SDET Playwright test async await VS Code

Study this video

- [Flashcards from this video](https://sozai.app/tools/ai-flashcard-generator/?from=transcript&id=81052)
- [Quiz on this video](https://sozai.app/tools/quiz-generator/?from=transcript&id=81052)

Free, made by AI from this transcript. No signup.


---
This is the markdown twin of https://sozai.app/transcript/playwright-javascript-locating-web-elements/ — the same content, without the markup.
Published by SozAI (https://sozai.app). Reuse and quotation are allowed with attribution and a link back.
Machine-readable index: https://sozai.app/llms.txt · data API: https://sozai.app/api/