Playwright with TypeScript | XPath Locators ( Session 3)

Session 3 of a Playwright with TypeScript course covers XPath locators: absolute vs relative XPath, syntax, attributes, contains/starts-with functions, and handling multiple matches.

Key Takeaways

Prefer Playwright-specific locators and CSS first; learn XPath mainly for interviews and legacy Selenium code.
Always prefer relative XPath over absolute XPath because it is more resilient to DOM changes.
Use contains(), starts-with(), and normalize-space() to handle partial or whitespace-variable values.
Handle strict mode violations by narrowing the locator or using index-based selection.

What the video covers

Playwright documentation discourages XPath in favor of Playwright-specific locators and CSS, but XPath remains important for interviews and Selenium work.
XPath (XML Path Language) navigates the DOM, where every HTML tag is represented as a node.
Absolute XPath (full path) starts from the root node with a single slash and walks every node down to the target element.
Absolute XPath is fragile: adding, removing, or moving elements in the page breaks it at runtime, so it should be avoided.
Relative XPath starts with a double slash and locates elements directly by tag name (or * wildcard) and @attribute=value.
Relative XPath supports logical operators (and/or) and functions such as contains(), starts-with(), and ends-with().
A text-based match can use contains() when only a partial value is known, and normalize-space() or the text() function for text matching.
Assertions can be added with expect to verify counts or values of located elements.
Multiple matches trigger strict mode violation errors in Playwright; the fix is to narrow the locator or select by index with nth/first/last.
Elements can be iterated with all() or by index, and waits/timeouts apply when an element is not found within 30 seconds.

Chapters

Why does the video say XPath is not recommended in Playwright?

The Playwright documentation recommends Playwright-specific locators first and CSS second, with XPath coming last. XPath is still covered because it is important for interviews and is widely used in Selenium.

What is the main difference between absolute and relative XPath?

Absolute XPath walks every node from the root with a single slash, making it fragile to DOM changes. Relative XPath starts with a double slash and jumps directly to the element using attributes.

How do you handle a strict mode violation in Playwright with XPath?

Narrow the locator with more specific attributes or functions, or select a particular match using index-based methods such as first, last, or nth.

Full Transcript — Download SRT & Markdown

Speaker A

So in the previous classes we have seen different types of locators supported by Playwright, like Playwright-specific locators, and then we have seen CSS locators. Today we'll see XPath locators, and how we can use XPath to locate the web element. As per the Playwright documentation, XPaths are basically not recommended. So instead we need to go for CSS or Playwright locators. But still it is very important to learn the XPath concept from an interview perspective. Okay.

Speaker A

playright documentation so basically they are not recommended to use XPaths. So instead we need to go for CSS or play rate locators. But still it is very important to learn uh XPath concept on inter perspective. Okay. But in selenium XPath will be very used uh XPath will be used. But

Speaker A

In Selenium, XPath is very widely used. But in Playwright, the first priority always goes to Playwright-specific locators, then CSS, and then comes XPath.

Speaker A

the DOM. In the DOM every uh tag is representing as a node. For example, this is my HTML and once you open the page the DOM view will be like this. So when you inspect the page you can see the dev

Speaker A

So what is an XPath? XPath's full form is XML Path. When you load any web page, it will create a DOM structure like this. The XPath will work on the DOM. In the DOM, every tag is represented as a node. For example, this is my HTML, and once you open the page, the DOM view will look like this. When you inspect the page, you can see the DevTools with all the DOM structure, and each and every tag is represented as a node. For example, here HTML is one node, head, body, button, input, page. So everything is considered a node.

Speaker A

Okay. And XPath exactly works based on the DOM. So once the DOM is loaded on the web page then XPath will start working. Okay. And uh this same DOM is representing on the web page like this. This is a rendering view of the DOM structure. So once you hit the URL uh the browser will create a DOM

Speaker A

Okay. And XPath works exactly based on the DOM. Once the DOM is loaded on the web page, XPath starts working. Okay. This same DOM is represented on the web page like this. This is a rendering view of the DOM structure. Once you hit the URL, the browser creates a DOM structure like this, and then you're able to see the UI.

Speaker A

So again just like CSS in XPath also there are two kinds of an X path relative and absolute like absolute CSS and relative CSS. Similarly, absorbed X path which is also called as a full X path and also we have a relative X path which is called as a partial X path. So basically

Speaker A

XPath stands for XML Path Language, and it is a syntax used to navigate through elements and attributes in an XML document. So in web automation, XPath is used to locate elements on the web page by their structure and their attributes.

Speaker A

from the root node that is absorbed x path and it will provide the full path from the root of the document uh till we found the target element. So when I write a uh absolute x path it will always

Speaker A

Again, just like CSS, in XPath there are two kinds: relative and absolute, like absolute CSS and relative CSS. Similarly, absolute XPath is also called a full XPath, and we also have relative XPath, which is called a partial XPath.

Speaker A

we won't use attributes but sometimes we can use combination of absolute XPath and relative X path.

Speaker A

Basically, absolute XPath means it will navigate through each and every node in the DOM. For example, let's say I want to navigate to the P element. Then you need to start with the HTML root node, then it will go to body, and then it will go to the paragraph tag. So it navigates through each and every node from the root node. That is absolute XPath, and it provides the full path from the root of the document until we find the target element.

Speaker A

Each tag is representing a specific element or a specific node in the DOM structure. So it will start from the root node and uh it will continue like this till it find the target element. So this is an example of absurd XPath and we also have relative XPath. So relative X path will directly

Speaker A

When I write an absolute XPath, it will always start with a single slash. So this is an example of an absolute XPath. It will first go to HTML, then to body, then header, div, div, and finally it reaches the element here. In absolute XPath we won't use attributes, but sometimes we can use a combination of absolute and relative XPath. If you write purely absolute XPath, we never use any attributes. We just specify tags. Each tag represents a specific element or node in the DOM structure. So it starts from the root node and continues like this until it finds the target element.

Speaker A

So when I write a relative XPath we have to follow different kinds of uh syntaxes and different kind of options are there in especially relative X path we can use end operator or operator we can use different XPath functions like contain start with end with there are a number of functions are there

Speaker A

So this is an example of absolute XPath, and we also have relative XPath. Relative XPath will directly jump to the element. It won't navigate through each and every node. Instead, we specify the attribute here, and based on the attribute, it finds that element directly in the DOM itself.

Speaker A

the uh regular expression which is representing the tags and if you know the exact tag name of this element you can specify the tag name directly here if you don't know you can say star this is the important thing so here in relative x path attribute and value you can use any attribute

Speaker A

When I write a relative XPath, we have to follow different kinds of syntaxes, and there are different options available. Especially in relative XPath, we can use the AND operator or the OR operator, and we can use different XPath functions like contains, starts-with, ends-with. There are a number of functions, and we can use them in relative XPath.

Speaker A

X path this is a syntax X relative X path start with the SL slash and you can use tag name here or star at the rate attribute name equal to value. So this is a syntax. So when you compare with these

Speaker A

When I write a relative XPath, it starts with a double slash. This is the syntax for writing a relative XPath. Let's use the star, which represents a wildcard matching any tag. If you know the exact tag name of the element, you can specify the tag name directly here. If you don't know it, you can use star. This is the important thing: in relative XPath, for attribute and value, you can use any attribute along with its value, but the attribute starts with the at-the-rate symbol (@). If you don't put the double slash or star, it becomes a CSS selector again. So the syntax of relative XPath is: start with double slash, and you can use a tag name here or star, then @attribute-name = value.

Speaker A

uh replacing or element moved somewhere one place to another place then obviously this particular structure will be disturbed. So that will broken your X path in in runtime. So we don't prefer to use absolute X paths. we can completely avoid this. Instead we will go with relative X path.

Speaker A

When you compare absolute XPath and relative XPath, we always try to prefer relative XPath. Why? Because if you put the complete path, and there is any change in the web page, if any element gets removed, if a new element gets added, or if an element is moved from one place to another, then this particular structure will be disturbed. That will break your XPath at runtime. So we don't prefer absolute XPaths; we can completely avoid them and go with relative XPath. Relative XPath doesn't have such problems because we specify the attribute directly, so it will jump directly and find the element. So we always prefer relative XPath. Okay.

Speaker A

So it will directly jump and find the element. So always we prefer the relative X path. Okay.

Speaker A

It is also sometimes shorter, and we can easily maintain relative XPaths. So these are the two kinds of XPaths: absolute XPath and relative XPath. I'll show you how we can use XPaths and the different options, and then we will come to a practical example and see that.

Speaker A

we will see that. Okay. And uh yeah so what is the difference between absolute and relative x path? Absolute x path will start with the single slash whereas uh relative x path will start with the double slash. This is one thing and absolute x path represents the full path from the root

Speaker A

So what is the difference between absolute and relative XPath? Absolute XPath starts with a single slash, whereas relative XPath starts with a double slash. That is one difference. Absolute XPath represents the full path from the root node, whereas relative XPath can directly jump to the target element or target elements. Absolute XPath doesn't use any attributes of the element, but relative XPath uses attributes like ID, class, or whatever attributes are uniquely available. We can use those attributes inside the relative XPath.

Speaker A

relative x path. So absolute x path will traverse throughout the dom. So it will navigate or it will traverse through each and every node of the dom till it finds the element. Whereas relative x path directly jump to the element using attribute. So wherever that element is present inside the

Speaker A

So absolute XPath traverses throughout the DOM. It navigates through each and every node of the DOM until it finds the element. Whereas relative XPath directly jumps to the element using an attribute. Wherever that element is present inside the DOM, it goes and catches that element. Okay. These are the differences between absolute and relative XPath. And if you compare absolute CSS and relative CSS, the differences are almost the same.

Speaker A

are various options are in XPath. So we'll see one by one. So I'm directly jumping to the web page.

Speaker A

Now we'll see some examples on this website, and there are various options in XPath. We'll see them one by one. I'm directly jumping to the web page. Okay. This is a web page, and here we will explore the different XPath options available.

Speaker A

to capture. So to write an x path and everything first we need to open the DOM. Just inspect the page. So this is our DOM structure of your web page. And if I say control F here and here you

Speaker A

First of all, let us start with absolute XPath: how to write an XPath and how to capture it. To write an XPath, first we need to open the DOM. Just inspect the page. This is the DOM structure of your web page. If I press Ctrl+F here, you can type in the search box, and you can type the XPath directly. You can create your own XPath, and then it will find that element and highlight it. The other option is to use SelectorHub, which works very effectively. Just go to SelectorHub, and whenever you highlight an element or spy on some element, it will automatically generate the relative XPaths, CSS, and everything else.

Speaker A

selector hub. It will work very effectively. So just go to selector hub and whenever you highlight that element or whenever you spy some element like this this will automatically generate the XPath relative X paths and everything CSS and everything it is automatically generates. So we can also

Speaker A

We can also create our own XPath, because for one particular element we can write the XPath in multiple ways. There are multiple options available, and multiple people will write XPaths differently.

Speaker A

There are multiple options are there. Multiple people will write Xpath in the different ways.

Speaker A

Okay. So we can write our own X path. If you do not like X path which is given by selector hub, if you want to write your own X path, you can write it or else we can use generated XPath

Speaker A

by the selector hub. Okay. So relative X path will be generated and also absolute X path is also generated. This is the one way to do this. And other way is for example let's say right click here go to selector hub. Once you install selector hub here you can see direct options.

Speaker A

You can directly copy the ID, copy the name, relative X path, relative CSS selector. So you can directly observe X path is also available. So you can also capture the locators directly from here. So it will automatically generate or we can create our own. Okay. So now let us see how to

Speaker A

create XPaths and uh we'll see various options available in XPath. So let's inspect this image on the web page. So when you inspect this image so as of now can look at this in the selector hub relative X path is got generated absolute XP path is generated. You can see this is absolute X path.

Speaker A

So what does it mean? It is starting from HTML tag. So there is only one HTML on the page. So index is optional. So index is always start from one itself. So by default for every tag indexes is also generated in selector hub and that is optional. But if you have a multiple elements

Speaker A

you need to specify the index. Suppose you have a two HTML tags then which HTML tag you want to refer that you can specify the index number like this. But if you have a one single element this is not needed. So you can just remove them. Even we have only one single body in the web page you

Speaker A

can just remove this. But sometimes you may have a multiple div tags. So it is it went to fourth div tag and inside the fourth div tag again div of one div of one div of one and here finally img tag. So

Speaker A

here it found the tele so it will navigate through each and every tag and finally it reaches the img tag and here you can look at this here we haven't used any attributes it is simply purely absolute x

Speaker A

path complete path or full path of the element. This is an example for absolute X path for logo element. Suppose for the same element if you want to write our relative X path then you can use any attributes. So for example let's say logo element same element. So what are the attributes are there

Speaker A

along with the tag img is a tag name. So we can say title we don't have any value for the title here. Just they put only attribute but there is no value associated. Alt attribute is there. So alt equal to some text is there and src and then x path equal to 1. So sometimes when you look at

Speaker A

this elements you need to always uh find the unique attributes. For example we should not take these kind of things like x path something like this. Okay. So we need to take the unique attributes like art or src these things. So to write x path for this what you can do can say

Speaker A

relative x path start with / slash and here you can say tag name tag name is what img and in the bracket here we need to specify any of the attribute let's say at the rate attribute start with the rate so that is the syntax so when you're writing the x path you can see here

Speaker A

selector hub is automatically suggesting some x path it is automatically suggest adjusting. So you can use them at the rate and I can say attribute equal to single or double quotation.

Speaker A

So you can specify the value this value you can keep it in a single double quotes. This is the called relative X path. So one element is matching one element is matching. It is called relative X path. So we can use a specific attribute of the element. Suppose if you do not know the tag name,

Speaker A

if you don't want to specify the tag name, you can say star. Star representing regular expression.

Speaker A

So that is again matching with the tag name. So this is your relative X path. Relative X path mean shortcut. So directly we can specify the attribute and we can locate the element. And here if I look at this how many attribute we specified? A single attribute we specified. Sometimes we can specify

Speaker A

multiple attribute also. Suppose if the single attribute is not enough, we can all add multiple attributes if I want. Okay. So for example, let's say uh search box. Let me inspect this element.

Speaker A

So if I look at this search box is an input element. So if I look at this, there are so many attributes are there. You can say type, class, id is there and then name is also there, value is

Speaker A

also there. There are multiple attributes of this element. So if you have multiple attributes, you can also write multiple attributes in the x path. It's very simple / slash. So tag name is input and in the bracket first attribute you can specify. I can say at the rate. So there is ID attribute

Speaker A

available or value attribute you can take. Let's say value I'm taking. So value is equal to uh search store. This is the value that you can specify. So this will match with this element.

Speaker A

If the attribute is matching with the single element that is fine. But if you want to add additional attribute. So then you can put another bracket and specify another attribute. You can say at the rate again type equal to or anything you can specify. So whatever is type equal to text

Speaker A

is there or you can say anything. So type equal to simple say text. So multiple attributes you can say. So you can see it is not matching T is type double time. Okay. So we can say this is a

Speaker A

a relative X path with two attributes. So we can specify single and double attributes. You can add any number of attributes like this. Okay. So every attribute should match. So the first attribute and second attribute also should match and then only it will able to locate the web element. So XPath

Speaker A

can have a multiple attributes and we can also use different operators like suppose I can put two attributes and uh I want to specify both should be matched or at least one should be matched.

Speaker A

So depends on requirement we can put okay for example let's say search button. Yes. Yeah. Let me inspect the search button and uh let me write an X path for that. Search button is basically uh inspect this element and it is also seems like input element. So in the DOM this is also an input

Speaker A

element. So let us start writing the relative X path /input and in the bracket at the rate. So we have a type is there values class. Again you can use some type for example. So type equal to submit

Speaker A

type equal to submit. So this is one attribute and matching with element. So now along with this I want to use another attribute with end operator. So we can use one operator called end inside the bracket itself. We can say end. And if you put the another attribute outside of the bracket then

Speaker A

two attributes should be there for that element. Both should match. But now inside this also you can say end. This is also alternative end uh you can take a value equal to search. So if I look at this this is matching with zero element. So I can say add the rate symbol is mandatory. So when I

Speaker A

say one element is matching. And if I look at this I have used two attributes with end operator. So end operator will returns true if both attributes are returns true. So for example, type equal to submit is true or not. Yes, we have a type equal to submit. Similarly, value equal to search. Yeah,

Speaker A

value is also search. Both are correct. So in that case only the end operator will returns true. So this X path will match with the element. Suppose if one of them is false. For example, instead of search, I will say find. So will it match with the element? No. Zero element. End operator will

Speaker A

return true only if both attributes are true. So first one should returns true and second one is also returns true then only and operator returns true. The whole X path will locate the element.

Speaker A

Okay. Now R operator. So R is exactly opposite of that. So instead of end I can say R. So R is nothing but what? either first attribute or the second attribute at least one should be matched.

Speaker A

Now in this particular case it will match with the element. So even though the second one is not correct still the first one is correct. So it will go and locate the element. So R means either first one or second one at least one should return true and then it will go and find that

Speaker A

element. Suppose here I'm making as a search for example let's say search second one is correct.

Speaker A

Now the second submit one I'm saying. So first one is not correct. Now again one element is matching even though the first one is not true but second one is true. Okay. So that is going to locate the element. Okay. So there are not multiple rs multiple and you will use only one

Speaker A

or operator. Okay. Between these two attributes. Okay. So at least one should be true. Okay. So this is a X path with R operator. End operator. R operator. End means both should true. R means at least one should be true. Okay. So these are few XPath examples and along with this XPath is also

Speaker A

having a different methods like contain start with we can also handle easily the dynamic elements and all. So we will discuss them later. So first of all let us explore this with practical example. So let's go to VS code editor and create a new file and I'll name it as XPath locators dotspre.ts.

Speaker A

Okay. So XPath locators uh ts. Okay. So as usual first what we need to we need to import. So import and multiple things I'll try to import test I will import expert is also I will import and to store the

Speaker A

locators I'll import the locator also from uh add the read playrite / test so imported the required modules and then we need to write a test method test and the first parameter should be title of the test let's say x path path demo in playright I'm just giving some title and

Speaker A

then we need to write an arrow function and then back start so in arrow function before that arrow function we specify a sync and inside the arrow function we need to take the page picture right this is a structure of the method test method now so let's go to the page so await dot go

Speaker A

to can and say I wait page dot go to and here we need to specify the URL of the application same I'm using same URL and this is the page which I'm going to launch all right so once it is launched

Speaker A

now we'll see the absolute x path first absolute x path so how to write any type of x path so we can specify that using locator method just like a CSS how we specified page.locator method. Same thing for XPath also page.locator method we can use. So how to use you can say page dot locator and

Speaker A

directly you can paste the X path here. So here you can paste the X path in the double quotes.

Speaker A

Let us uh inspect this logo element and uh this is an X path and copy this X path and keep it here. So this is a locator element and uh I want to store this locator element in a variable. So

Speaker A

I just create a variable called logo. Let me make it as a con or let whatever. Now what is the type of this variable? What is the type of this logo? I say page.locator and just I put the locator.

Speaker A

So this is a relative X path. So let me capture the absolute X path. This is our absolute X path, right? So just copy this. This is your absolute X path. Okay. So page dot locator and then we

Speaker A

specify the complete locator and that we are storing into logo here. Right? So now what is the type of this logo? It should be what is the type of this logo? The type of this logo in the last class I told you. So the locator method will always return the locator type. So the logo type

Speaker A

is what? Locator. So even though if you don't specify the type so by default this logo type is what? Locator. So type inference will work. So by default TypeScript will identify the type of element and it will automatically associated with this or else we need to explicitly specify

Speaker A

the type. You can specify like this. So in the locator L is a capital letter. Okay. Yeah. So now we capture the element using absolute x path and stored into locate and do we need to use await statement here exactly in the place. Do we need a here? No, it is not needed. Why? Because we

Speaker A

are just storing the locator in a variable. When aait is required when you perform certain action, we need await. Okay. So here I'm taking an expect method expect of the logo and I want to verify the visible or not. So for that we can use one assertion called to be visible to be visible.

Speaker A

So here we are doing an action actually. So you can see expert logo dot visible. So here we can keep the await statement. Okay. So this is a way we can use absolute expert. So this will find the

Speaker A

logo element. This will find the logo element and check is visible or not. This is one assertion. So now relative X path. So relative X path. Again uh we'll try to locate the logo itself using relative X path. Again same thing instead of using uh this absolute x path we will try to use relative x

Speaker A

path. So here this is I can call it as a absolute logo and I call it here it is a relative logo.

Speaker A

Okay same thing. So here we need to put relative x path of the element. So if I go back and see selector, this is the relative XPath of the EMG, img tag. So mostly logos and images, we won't do any actions. We just verify the visibility of the element. Okay. So

Speaker A

these are the two different ways we can write an X path. Absolute X path and then relative X path. So let's go and execute and see new terminal and uh okay so what is the command npx what is the folder name pw demos right so in the pw demos uh test/ xpath locator speecher dot

Speaker A

ts. Okay. So, this is a path - in headered mode. I'm going to run sorry npx play rate test.

Speaker A

Okay. So now it is successfully executed. I think it is saying no test found. It's not executed first of all. So make sure uh that arguments or regular x matching the test file. You may need express symbol like a dollar or star at the code the argument. So we have done some mistake here.

Speaker A

So the test we have written right. So test name as page arrow function a page. Go to we have imported packages also absolute x path. Okay, everything is fine. So, let me run this once again. Yes, there is a space here actually. Yes.

Speaker A

No, it is not. The path is not correct, guys. Okay, just a moment. So, test nps play test in the test folder. So, the name of the file is what? Xpath locators. Xpath locators dotspec dot TS.

Speaker A

Okay, let me just try to remove this. It is not identifying the test first of all. Just a sec.

Speaker A

Just a second. npx playright test. This is the command. And then uh test folder. So currently in the PWS demos, we are in test folder. T STS. Is there any spelling mistake in this test folder?

Speaker A

Okay. /xplocators dospec.ts. Yeah. So the slash is missing. So if the path is not correct, it cannot find the test. Okay. So that is an error you will get. So the path should be correct. You can see no test found again. So make sure

Speaker A

that arguments are regular expressions are missing the test files. So, are we missing anything here?

Speaker A

I think in the PW demos we are here. So I think dot test okay we'll see that okay so I think dot test is not needed okay why because uh in the directly in the configuration file so it will find the dot test itself so here we already configured this dot / test so it will

Speaker A

get the folder from here so I can directly specify that okay let me try once again reup so npx play rate test hex path locator so even if you specify this let's say test slashforward slash yeah that is a problem actually so we need to use a forward slash not a backward slash

Speaker A

okay so somehow it is getting failed so I wait expect absolute logo dot to be visible it is got failed so why it has got failed uh unexpected token slash while parsing CSS uh selector uh mg1. So I think this is not CSS. This is an X path. Expect to be

Speaker A

visible with 5,000 waiting for. Okay. So we'll try once again. I think uh everything is correct. There is no mistake in this.

Speaker A

So page.locator and uh this is a absolute x path. We'll start with the single slash.

Speaker A

Okay. And then uh to be visible. Okay. Just a second guys. Let's see this.

Speaker A

Okay. So the first element whatever we taken so that is starting with the double slash. So actually it should start with the single slash also but it is considering as a CSS. Let me just put X path like this. No it is also not allowed.

Speaker A

Just a moment. Let me try like this. So I put everything inside the locator part.

Speaker A

Okay. So uh if you want to use absel x path with the single. So this is also another syntax. So this is optional actually. So the x path whatever you have written. So that is uh prefix. So this

Speaker A

is optional even though if you don't specify this uh playright will automatically consider this as an next path. Okay. Similarly, even if you are using CSS also, you can use this keyword CSS equal to something like that. But that is an optional. CSS and XPath is optional. The keyword

Speaker A

is optional. But if you want to still specify that, you can say X path equal to like that.

Speaker A

Right? So if you don't specify this X path equal to like this, then you need to start with double quotes because if you don't specify the X path and if you directly provide the absolute path, playright doesn't know whether it is an X path or CSS. it cannot recognize it. So play rate

Speaker A

uh by by by default play rate will recognize X path with a double slash. So you need to use a double slash or you can use X path equal to single slash. This is also correct. But the whole thing

Speaker A

we need to keep inside the double quotations like that. Okay, this is the syntax of writing the absolute X path or else you can directly write a double slash and then it will work.

Speaker A

Okay. So this is how we can do. So let me clear and execute one more time.

Speaker A

I just remove headed mode and then it is start running my test. Okay. So now it is get passed. So this is absolute X path and relative X path.

Speaker A

So now XPath is also having a different functions. So we will see that X path the contains method the first method is a contains method. So very useful when you are trying to locate the dynamic element. Sometimes the attribute values keeps changing.

Speaker A

So in those cases we can use contains start with the methods are available. So if I look at this what is contains method do. So the syntax is like this. So / star contains the attribute and the value. So when I use contains method, we can just pass substring of the value.

Speaker A

So normally when I say attribute at the rate class, you can provide the value here. Even id or name whatever attribute you use, we will provide the complete value. So instead of that we can just pass some portion of the value or some substring value we can pass when I use

Speaker A

contains method. So this is syntax anchor tag contains at the rate href let's say computer.

Speaker A

So this is a partial string. So what this x path will able to match with the elements. So for example let me try to use this. So this is an x path. Let's go to the page again.

Speaker A

So go to the homepage. Inspect selector hub and say uh / slash anchor tag a is representing the anchor tag. So in this I can say contains method I'm giving for example let's say anchor tag I'm using href attribute

Speaker A

href equal to what hyperlink reference hf is nothing but a hyperlink reference. So you can provide the reference. For example, let's say these are all different links are available. Now inspect this particular link. So what is an HF attribute here?

Speaker A

This is the HF attribute. So you can see this is the one. Let's copy this attribute.

Speaker A

This is the HF attribute I'm using here. So this will go and match with the two elements. Now you can see with this locator it is matching with two elements. Image is also having same HF and this locator these both are there. Suppose I want to locate group of elements. Let us say in this

Speaker A

particular page I have different elements and let's say here we have a laptop here uh computer and here there is a computer. So I want to locate the elements and uh whichever are having the keyword called computer. You can see there is computer keyword here. Here is a computer

Speaker A

keyword. So in this case what you can do is you can just specify some substring which is matching with the group of elements. I say computer what will happen? Zero elements because we don't have any elements having href attribute is computer but there is a full value here. computer is what

Speaker A

is a partial value is a substring. So what we can do in this case we can use contains method.

Speaker A

So I not providing the complete value of href. So here we can use contains contains and header href comma we have to use not equal to comma we have to use and then close the function. This is called x

Speaker A

path function contains a header href computer. Now you can see 14 elements are matching. 14 elements are matching. But again I don't want to match with the images. I want to capture only the titles. Only the titles. So in that case what you can do if I inspect this image img tag is

Speaker A

there. But if I look at this only the title text anchor tag and this anchor tag is present inside what? This anchor tag is inside uh inspect this element for example. This is a part of H2 tag.

Speaker A

So these are all H2 tags. H2 headers right inside this anchor tag is there. So the same X path but in before that I will say only H2 H2 / H2. So now inside the H2 it will go to anchor tag. So

Speaker A

once you start with H2 in the next element you no need to specify double slash. You can simply have a one single slash also. It is fine. So this is matching with XR4 elements. So what is this X

Speaker A

path will do? First it will go to H2 tag and find anchor tags and whichever anchor tag is having href attribute contains a computer keyword this will able to match. So there are four products are there with this can see here it is computer here it is there here it is here it is right. So this

Speaker A

is going to match with those elements. So this is how we can use contains method to find a group of elements. Okay. So let's try to use this and uh let me grab all the group of elements. So far

Speaker A

we have seen how to grab the single web element. Right? So this time we will see how to grab the multiple elements or group of elements. So this is the next path I'm trying to use and to capture

Speaker A

all the computer related products. Let me go to the this and then third one. contains method.

Speaker A

Okay. So here I'm writing the locator like this page dot locator and directly paste your X path.

Speaker A

Okay. Now just carefully listen this. This is important. So this time the XPath is matching with the multiple elements or group of elements. I want to store them in a variable. I want to store them in a variable. So let's create a variable called const products. Okay. Now tell me what is

Speaker A

the type of this variable? Can you guess? So page.locator the method is not changed. Same method even if you are identifying a single web element or multiple web elements the same method is there but in selenium we have a find element and find elements two different methods but here

Speaker A

there is only one method and you can specify x path which is matching with a single web element or multiple web element whatever it may be the return type is always locator itself the locator itself okay the return type is always locator no it won't return any array it returns it is

Speaker A

matching with group of elements and that locator we are storing into products. Now the products contains the group of elements but still it is returning the locator itself. Whenever you are using locator method here always the return type of the locator method is locator itself. Okay. But

Speaker A

how we can handle group of elements we will see that. So as of now we captured group of elements into a variable. Can we count how many variables are there in the products? Let's see. For example, let's say I just want to count how many are there. Simply you can say products dot there is a method

Speaker A

called count. Okay, count. So where this count method will come from the locator itself. Okay, so products we capture and we can simply count. So this will return how many products are there. How many elements are matching with this X path. Okay. If X path is matching with single element then

Speaker A

it will return one. If the element is matching with multiple element then it returns a number how many elements it is matching. That is a count method. Okay. And the count it will return. Right.

Speaker A

So this I want to store in another variable. So I will create another variable to store the count. Let's say I'm creating another variable con variable products counter. Products counter. Okay.

Speaker A

So now this count method will return a number. Return type of the count is what a number will return along with the promise. So the count method is returning the promise. So here we captured the products but here we are doing the action. So a is required here. Okay. So this is returning

Speaker A

the number. So what is the type of this variable? Obviously it is a number. Okay. So now we capture the multiple elements into a variable. Then we have counted how many are there and store them in a variable. So this is a number type right. So now based on this we can add one assertion. So how we

Speaker A

can add assertion? So I want to verify the product count. So to add assertion I can just say expect.

Speaker A

So product count it will return some number right. So expect I say product count should be so whatever product want we calculated the product count should be uh some number you can give or else what we can do we can simply uh use a method called greater than less than something

Speaker A

like that because we don't know exact number so I can use something called dot tob greater than and let's say zero so the products count should be greater than zero. Okay, to be greater than zero. So it should not be zero. That means at least one product should be there

Speaker A

with this product. So this is my uh assertion I put. Okay. So do we really required a here? A is required here. Here it is not needed here. Why? Because we are comparing the count. We are not comparing with any elements or anything. We are already captured the count here. We already used

Speaker A

a statement for product counter. We got the count itself number. So we're just comparing the number here. So here we no need to put await because to be greater than method won't return any promise.

Speaker A

It won't return any promise. So this is await statement is not required for this particular statement. Okay. This is an assertion contains method. So we can do many more operations on this on group of elements and we will see. Uh first of all let me run the test once.

Speaker A

Okay. So now it is get passed. So now I just want to print how many count are there. So if you want to print what we can do here you can say console.log log of I say computer related computer related products.

Speaker A

So number of computer related products I'm just trying to print this product count so that we will know exactly how many products are there here.

Speaker A

So execute one more time. Yes. So yeah. So now there are four products are present. So this is returning four products. Okay.

Speaker A

Suppose among those four products I want to extract the first product. I want to display the name of the first product. Let us say this is XPath matching with the four products. In among these four products, I want to capture the name of the first product. I want to display the name

Speaker A

of the first product. So then how we can capture that. So we already captured all the products into this products variable. Now from this products variable, I want to extract the first product name. First product. So then how we can extract? So we have a method called text content. So we

Speaker A

have a method called text content or if we want to extract multiple products all the products I want to extract I want to display the names of all the products. So then how we can do this for example

Speaker A

let's say okay so I'm just writing products so whatever products I have captured I'm using the products dot there is a method called text content products dot text content listen this is very important step products dot text content so what is a text content method will do us so whatever

Speaker A

the locator we have captured from that locator it will extract the text value. So it is exactly equal to get text method in selenium. So if you want to extract the text from the element we use text content method. It can be single element or group of element. So if it is a group of element

Speaker A

that is a different story but let us assume this is an element. I'm using text contents. So mostly the text content will be written if you have only one single element. Okay. If you have a single web element, it will able to extract the content of the text or display the text for that particular

Speaker A

web element. But here what I'm doing, I'm applying the same text content method on the locator which is pointing to multiple web elements. So in that case what will happen? Products do text content method I'm using. So again this will return a promise promise. So let me use await here.

Speaker A

Okay, I wait. So, I'm just trying to print this now inside the console.log. I'm trying to print this and we'll see what this will exactly print.

Speaker A

So remember text content is a a method which will extract the content from the text. Okay. So now if I look at this products text content is giving an error and read the error now locator.ext content error stick to mode violation. This is very very common uh error you may face while running your

Speaker A

automations. Most of the times stick to mode violation violation. What does it mean? Strict to mode violation means sometimes whatever the locator you have created if it is matching with more than one element. If you look at here four elements are matching actually. So with this

Speaker A

X path there are four elements are matching but what you are doing you are doing the one single action you are doing the action but play right is confused on which element you want to perform the action. So we are trying to get the text content from which element you want to get the

Speaker A

text content among the four elements. So that is the reason it is throwing an error called stick mode violation error. This is a very common error most of the times you will get and not only this particular scenario sometimes if locator is matching with more than one element and if you are

Speaker A

applying click method or if you are doing click action even that case also you will see strict mode violation error. Okay, strict mode violation error. So in the previous examples also we have seen this problem even in the play rate locators. If I go back and see the previous class playright

Speaker A

locator here uh get by I have shown you one method here get by ro okay so when I use get by ro method here register I'm clicking I'm using to be visible right so in this particular element instead of

Speaker A

using get by ro if I use get by text on the register this will throw stick to mode violation error okay so it will throw strict mode violation same element same register element instead of using get by role I'm using get by text so this will also throw the strict mode violation error

Speaker A

why because when I use get by text with the same register there are multiple elements are there in the page there are multiple places the register link is available so that is the reason it cannot perform this action on the element it will confuse on which element I want to perform the action if

Speaker A

it is matching with more than one element so that is the reason it is giving strict mode violation error. So in this case you have to specifically say what is this actually what is the role so heading. So in this case you cannot use get by text you need to choose another locator

Speaker A

like get by ro heading you need to specify the name. Okay. So when you will get the stick mode uh violation error whenever you're trying to perform any action on the locator which is matching with more than one element. So here it is the same thing actually.

Speaker A

So this will throw strict mode violation error. This will throw strict mode violation error because this locator products contains a multiple elements on the multiple elements. We cannot perform the single action. If you're trying to perform the single action on multiple elements,

Speaker A

playright confused on which element you want to perform the action. Okay, this is the problem. So this will throw the strict board violation. Now I want to extract the text content of the specific product. So the products contains a multiple products like four products are there. Now I want

Speaker A

to get the text content of the first product or second product or third product or last product.

Speaker A

So then how we can do that? So simply what you can do say take the products element products locator dot there is a method called first. Okay, take the first element and then use the text content.

Speaker A

So this will actually return the text content of the first element from the products. Okay, so products is what basically it works as a array itself. It works as a array itself. Okay, so let me print this value now. Yes. So I say console.log of products do first dot text content.

Speaker A

I'm directly keeping inside the console.log. So I will also write some description here. This is my first uh first computer related product. First computer related product. Okay. So now do we require await statement here? The text content method return promise. So definitely you need

Speaker A

to use await statement. Okay. So this is how we can capture the text content of the first element in the products. The first element whatever is there we are capturing the text content.

Speaker A

Similarly I want to capture the uh last element last one. So last computer related product. So in this case instead of first method we can use a last. So this is another method which we have.

Speaker A

Suppose I want to capture some random product like second or third or fourth. We don't know which one is the first, which one is the last. So in that case we can use method. Yen. So I can say

Speaker A

whichever number you provided it will return. So instead of first and last can simply say product dot n of we need to specify the number. So first or second, third or fourth. So you can say third product I'm specifying. I'm extracting the text content. Okay. So this in this particular case it

Speaker A

won't return any strict mode violation error because we are referring a specific product name. One single product name you'll get the text content. So let me run that once again.

Speaker A

Okay. Now these are the values. So can this see this is the totally four products are there. This is the first product name and then this is the last product name and this is nth product name. So I think uh nth one is given three products. Three and

Speaker A

uh last one is again same I guess. Let me give something else. Say the first one I'm printing. What is the first one? Build your own cheap computer.

Speaker A

And also I'll give one here. Let's see whether the first one and last one is equal or not. Okay. So first one and n of one also should return same product. Yeah, you can see that. So build your own cheap computer. The first product

Speaker A

and this is the last product. Okay. So I think nth value uh will start from zero.

Speaker A

Yes, we can also iterate using array. I will show you that point. Okay. So this is how we can extract the specific elements by passing a index number. By passing an index number I think uh these methods index will start from one itself not zero. Let

Speaker A

me give four because total four elements are there. I'm just giving four index. Okay.

Speaker A

Yeah. So index will start from zero guys. Okay. So the text content index is start from zero. It is throwing an error anyway. So index is starting from zero.

Speaker A

Okay. So index is start from zero. So this is how we can use a text content method through which we can extract the text of the particular element. So not only this any web element if you want to

Speaker A

capture the text from the element you can use the text content method. So remember this this is exactly equal to get text method in selenium. Okay. So now here we have extracted individual elements using first method, last method, nth method and then we are able to capture the

Speaker A

text content. So instead of that I just want to write a loop. For example, I have a 10 products or 20 products. So, it is difficult to write the multiple statement like that. Right? So, in that case, what we can do? We can use a looping statement and through which we can iterate all the

Speaker A

products. So, how we can use a looping statement. So here also we have a different method. Uh here we use only text content right to capture the text from the specific product. So if you want to get the text content for all the products, I want to get the text content of all the products. We use

Speaker A

another method called text all text contests method. Okay. So let me show you how we can do this. I'm taking again same products. So same products. So here when I use products.ext content, it is throwing strict mode violation. Why? because the text contain method works only on the specific

Speaker A

element only one single element but here products contains a group of elements so now what I'm using products dot all text contents this is another method products dot all text contents so what this method will do this method will extract the text of all the contents which are there

Speaker A

in the products okay so all text contains method will capture the text content of all the products in this variable products variable. So what is the difference between text content and all text contents text content will text get the text from specific web element one web element whereas all

Speaker A

text contents will extract the text from multiple web elements a group of web elements. So currently the products are contains a group of web elements and it will able to capture all the text contents right. So let me just try to uh store them in a variable. So again all text contents will return

Speaker A

the promise. So keep await statement before that. Now I want to store them in a variable. I want to store them in a variable. Let me give some different name. So I say product titles. Product titles. So this is a variable. I'm just creating product title. Let me just say letter. Now what is

Speaker A

the type of this variable now? Can you guess? So products dot all text contains all text contains will return an array of string. The return type is what? An array of string. So now obviously the product titles is what? It is an array. So what type of an array it is? It is a string type of

Speaker A

an array. So we can explicitly sitely write string type of an array. Okay, you understand the point?

Speaker A

So here the get all content this will get all the text contents matched products in a form of array in the form of array. So getting all the matched products into array. So now the product titles contains all the product names. Now can we read one by one from array? How we can read the data?

Speaker A

We can use a looping statement. Simple. So I'm writing a loop statement. So you can use any type of a loop. We have a different loops. So here I'm preferring for of loop. Let's say creating some variable. Let product title BT I'm giving simple variable product title of product titles. So how

Speaker A

exactly off method will work? It will work index based on index or not. So this won't use index.

Speaker A

Suppose if you're using in operator here then it will use index. So now the PD is an index of the element. So when I use off the PD is actual value of the element. Okay. So from the product

Speaker A

id it will get the first value in the PT and that I'm going to directly print here console.log of PT. That's it. And the second round it will get another value from the product titles store into PT and then it will print like this. So this loop will repeat multiple times till it

Speaker A

prints all the values from product titles. So this is how we can also capture the data by using looping statement. Okay, this is very very important thing. So if you want to get text content of multiple variable multiple elements then use all text context method

Speaker A

store them in the array variable then you can work on the data. So whatever the data we capture in the arrays we can work on it using looping statement. Okay. So now let me try this.

Speaker A

Okay, now it is printed. Uh four products. First computer related product, last computer related product. I think this will fail. Fourth one cuz there is waiting time is 30 seconds. So if something is not found in the web page,

Speaker A

it will wait for maximum 30 seconds and then it will exit from the execution.

Speaker A

So it is still waiting for the four. So this is fail. Actually there is no element in the fourth location. So let me make it as a two or three something.

Speaker A

So count start from zero. So totally four elements are there. 0 1 2 3 that's it.

Speaker A

Okay. So now we can see this it is get passed. Now we are able to see all the products displayed using looping statement. So these are the four products displayed using looping statement.

Speaker A

Right? If you want to write a single console.log you can write as a console.log. Uh you can just remove from here before using for loop. You can simply write here all computer related product titles. Okay. So we can just print array. We can also print directly array. Right? So

Speaker A

I can say product arrays. But this will print in array format. We cannot extract individual values in that case. So when you run this, this will print all product titles in the form of an array. Okay. Okay. So if I go back and see this is an array. So all products are printed in the

Speaker A

form of an array. Okay. So we can also print an array like this or we can iterate the array to get individual values. All right. So this is how we can work if the locator is returning multiple elements group of web elements or multiple web elements. And remember to get the single web

Speaker A

element or group of web elements there is only one method available which is locator method itself.

Speaker A

page.locator method itself. Okay. And uh the same method will return single web element or group of web element that depends on the locator what we have written here. If the locator is matching with single web element then return single web element. If the locator is matching with group of

Speaker A

web elements or multiple web elements, it'll then return multiple web elements. And second point, text content works only on the single web element whereas all text content method will work on group of web elements. Understood everyone? So this is very important scenario in entry question. What is

Speaker A

the difference between text content and all text contents? Okay. So how to extract the single web element and group of web elements use same method locator method. And if you want to extract the text from the single web element use text content and if you want to get the text content from group

Speaker A

of web web elements then all text contents method you have to use. Okay. So this is a important thing. So now we'll see few more other methods uh in XPath. We have start method text function last function. There are many things. So let's go to the document once again. So another one start

Speaker A

with. So we have seen contains method. So now the start with so start with method again just like a contains method but here the value which we are giving for the attribute should be the starting point. So start with method let's say href / build. So the href attribute should start with /

Speaker A

build. So whatever the value we have provided here the href attribute should start with this value.

Speaker A

So then it will match with the element that's called start with. So we don't have a end with method. So we only have a start with method and contains method. Okay. So let's see how we can use this start with method again. Suppose I'm again taking the uh same URL. Go to go back to

Speaker A

this save application. This time I'm going to capture the different thing. Okay. So now here there are different products again we have. So in all those products there are certain products are starting from the build keyword you can look at this. So this one build your own cheap computer.

Speaker A

So build is a starting keyword and here build your own computer. So build your own expensive computer. So these product names are starting with the build that's a starting point. Let's inspect this element and see the HF attribute. So how it is started / build / build is a starting point and

Speaker A

look at this one and this is also / build and even this also next one this is also /bu so all these three elements three to four elements are three elements are starting with / build href attribute / I'm not talking about the text I'm talking about the href attribute okay href attribute

Speaker A

is what slash build starting with /build Now if you want to locate any elements which are starting with some value then we go for start with method. So another method fourth one start with x path with start with method. So how to use this again await or you can say page dot locator.

Speaker A

Now I'm going to write one locator here. X path / slash H2 all header tags I want H2 / anchor tag.

Speaker A

So this is matching all six elements. Six products are there in the page. Six elements are matching among the six elements. I want to get only build products. The products names which are starting with the build in the sense not a title based on href attribute. So what I will do is I can

Speaker A

say at the rate href at the rate href okay so normally how we will give the value href equal to some value we will provide here so let's say / build I'm providing will it match with elements no

Speaker A

zero elements but I want to use something can I use contains here contains can I use contains in this case contains generate href attribute should be build. Can I use contains? Yes, obviously you can use contains. Three elements are matching. But alternatively, we can also use start with method.

Speaker A

So when I use contains, what is the difference between contains and start with? Start contains mean nothing but what this particular value should be there anywhere can be there anywhere in the string. You can find at the beginning or at the end or at the middle wherever you want it

Speaker A

will match. But when I use start with instead of contains when I use starts with starts width then this value should be the starting point. So then only it will match with the three elements. Okay.

Speaker A

Now again this X path is returning more than one element. Three elements are matching. So let's grab them. So page.locator write an X path. So this is also returning multiple elements. Returns multiple elements. So we can store them in again variable. I create one more con

Speaker A

variable. Uh I'll name it as a uh building products. Products we already given above.

Speaker A

I'm giving a different name. So what is the type of this variable? Obviously it is a locator type.

Speaker A

Even it's a single or multiple the type is locator and that won't change. So here await is not needed because the locator method won't return any promise. It just return only rotator type.

Speaker A

Right? So now how to count how many products are captured to count number of products. How we can count building products dot. So to be building products dot count. So this is a method we can use. So this will return the count how many number of products. Let me take a variable called count

Speaker A

and type of the variable is constant. So now do we require aid here the count method will return a promise number it will return along with the promise. So you must specify a weight in front of this and the type of the count variable is what? It is a number type. Count is a number

Speaker A

type. Okay. Now we can put the assertion again. So we can say expect counter and uh to be greater than zero. So number of products I say to be greater than zero.

Speaker A

So this is my expectation. This is how we can use start with. Okay. Let's try this execute.

Speaker A

So understand the difference between contains and start with contains method the value can be anywhere in the string. Start with method the value should be at the beginning of the string that is a difference. So everything is got passed. So this is start with function along with

Speaker A

x path and there is another method called text text function. So we can use this combination whenever you want to locate any text kind of a content labels or headings. So such type of things you can use a text method. Very simple syntax. So text equal to the value of the text

Speaker A

you can specify. So it is exactly equal to get by text method in playright. So get by text method is there. Right? So same thing but here in XPath we use a text function. Text function equal to register. We can also use contains along with the text function combinations. So I'll show you that.

Speaker A

So let us use a text function how we can do this. So in the same uh page I have something called uh register link right. So this register link is there. So I want to check this register is visible

Speaker A

or not. I just want to check this is visible or not. Simple inspect this element. And you can see this is the text which is also link not a problem. You can write x path for this also anchor

Speaker A

tag using anchor tag. You can write but I want to use a text. So this is called inner text. So I want to locate that element using register. So how we can locate? So let me go to selector hab and by

Speaker A

default it is giving the x path here. And instead of that you can write your own x path. Let's say / anchor tag. So there are 100 elements are matching with anchor tag. Among those 100 elements and which element you want to match with register. So I can use a text method here. So text method text

Speaker A

method equal to what is the value I'm expecting here is register. So I can say register and this is while one element is matching. So one element is matching. So there is another method called normalize space. So instead of text here there are multiple options you can use guys. Suppose if

Speaker A

you don't want to use the text function you can simply use dot also. dot is also representing a representing a text. So this is also matching with element. You can use the text function or you can use either dot or you can use normalize space like this. So normalize space register. So this is also

Speaker A

matching with element. So what is the difference between text and normalized space? So if you're using text function here the text value should be exactly same it won't accept any spaces and all but in the value if there is any space that is fine okay but in the value there is no space

Speaker A

but again if I give space something like this this will match so normal space means it will just ignore the spaces in the value and uh if I use only text function then it will consider the spaces also So, so that is a major difference. So, this will able to match with any element you

Speaker A

can match with this text. Basically the labels we can match. So, will this return one single web element? Right? This is written a single web element. So, let's get that element text function text or dot. So I can say page dot locator specify this locator. So this will return single

Speaker A

web element. Single web element that I'm going to store that is a restration link. I can call as a rig link. So this what is the type of this variable? I say const. Type of the variable is what is a locator. Again locator will return. So a is not needed because the locator method won't

Speaker A

return any promise. So now I got a registration. Now you can perform click action or you can verify visible or not. So everything you can do. So I'm writing an expect here. Expect and rig link registration link. Okay. Now what is the method for visibility test? For visibility what is the

Speaker A

method we can use? Assertion method to be visible dot to be visible. So there are so many assertions are there. So I will discuss in a separate session all together assertion types. Okay. To be visible.

Speaker A

Okay. Now you tell me where is await required. So do we require await here or not? So to be visible.

Speaker A

Await is needed. Okay. Because to be visible method return the promise. So it is an action.

Speaker A

Say await is required. So this is how we can use text function to get the element. Now run this.

Speaker A

Perfect. So now it is get passed. So let us see the report once. npx playrite show report.

Speaker A

Okay. So now this is the one assertion is got passed. This is another assertion. These are ex expect wherever you can expect they are all assertions. All right. So the next one last function. So text function we have learned the last function. So what is the last function?

Speaker A

We'll do last it select the last element in the set of matching nodes. get the last element in the set of matching nodes. So we have done this in the different way. If I look at this particular thing contains method. So we have extracted all the elements in the products and

Speaker A

uh again if you want to capture the last element from the product the last product if you want to use use this method called last but this is not expert this is a method which are available in the locator class. So products.last Last means it will return the last element. So when we can use

Speaker A

this first last once we get all the elements in the variable and from that variable we can extract the first one last one and one but at the time of locating the elements itself I want to get the first one. For example go to the page. So here in the bottom there are so many followers links my

Speaker A

account links are there. So these are all actually group of links. Let's say how many elements are there? 1 2 3 4 5. So among those five elements I want to extract the last one or I want to extract

Speaker A

the first one or I want to extract some some other element in this group using XPath using XPath itself I can get it. So how we can get this? So let me first write a X path to capture the group

Speaker A

of web elements. Now what I'm doing is here let me inspect this followers. So this is the followers heading text and uh this is the under followers this is part of the div tag and if you expand this

Speaker A

ul here you can find this element. So now I want to write an x path which is matching with all these elements Facebook Twitter RSS. So these are the group of elements. So we can start from H3. So let's write an X path here. So again if I say dot /h3 it is matching with all four headers.

Speaker A

And which one we want here? In the four headers which one we want? Fourth header we want. Can we pass index here to extract the fourth header? Can we pass index? Fourth zero element is giving zero element. We are getting four elements are matching but among this the fourth element index four is

Speaker A

not there. So you can say three zero element. So it is not giving array here. So what we need to do now from the H3 H3 is what? H3 is independent element. The all ul are not part of H3. Actually

Speaker A

this is independent element. So we can ignore this. So what is the parent element of this ul? H3 and ul are the both child elements of div. So which one we have to take the div element we have to take not the followers. So let's go to the div element instead of h3 I'm taking the div

Speaker A

element. So div of so I can specify an attribute. So what is an attribute we have for the column followers. So that I'm going to give here. So at the rate class at the rate class equal we need to

Speaker A

provide the complete value of the class. So what is the value column space follow - right? So this is an X path I have given. So with this X path this is exactly matching with the div tag. Now

Speaker A

you can see the whole section is got matched but I want to match individual elements one by one. So first we go to this entire box using div. Inside the div we need to go to ul tag because in the

Speaker A

ul itself we have all these la items. So we can say / ul one element again / l five elements. So this is an actual x path. So in the relative x path I can directly jump to the element. Right?

Speaker A

If I say single slash it will go to the next element. But if I say double slash it will go to direct element. Can we avoid this ul by keeping double slashes here? Yes. Perfect. Because in relative X path whatever the tags are coming in the middle of the path you can avoid this by using

Speaker A

/ slash. Now first it will go to this element div element from that it will directly jump into LA items list items it will jump. So this is giving five elements. Okay this XPath is returning five elements. Now in those five elements I want to extract the last element only last element I want

Speaker A

to get. So how we can write that index path we have a method. So LI of can we pass index here or I'm passing one element is matching five passing one element you can pass index also you can say one first element matching two second LI three third LI four five. So you can pass index by

Speaker A

using index you can extract the specific element. But instead of passing index I also have a method called last. So this return the last element and let us use first. Do don't have first method.

Speaker A

Okay. We have only the last method. We have last. Alternatively you can pass index also. Okay. Index we can put in the bracket. So the last method will return the last element from this list.

Speaker A

Okay. Suppose I want to extract a different element randomly like first element, second or third element. Then you can use index that is the one option available. The other option is using position method also we can do. So instead of last you can specify the position. Position

Speaker A

equal to we can pass the number. Let's say one first element let's say two. second position element let's say three third position fourth fourth position fifth fifth position so these are all the different approaches you can use whichever approach you want so either you can directly pass

Speaker A

index of the li one approach second approach is using position we can get whichever element you want but we have only one method called last using that method we can extract only the last element okay so instead of position I can use a last method like this. By default, last means

Speaker A

last element will be returned. There is no first element. Okay. So, let me use this text and last.

Speaker A

All right. So, page dot locator of last and this will return the last element. Okay.

Speaker A

So obviously what is the last element? I can put some variable here. Last item and this is a constant. What is the type of this item? So this is again locator type.

Speaker A

Okay. So this will print. So we can expect So we can expect and this particular element is to be visible to be visible. So just simply visibility check I've done. So this is how we can do.

Speaker A

So do we need a statement here? Yes. Okay. So this is how we can capture the last element.

Speaker A

So last item. So similarly we can capture the position specific element /7th method position same thing and position item. So here instead of last I can use position and I can provide the position. There's a three I'm giving and this position item I'm verifying it's visible

Speaker A

or not again if you want to get the text from this can we get suppose here visible I'm verifying but I want to see the last element what is the last element how we can get last element last item dot what is the method text content okay text content

Speaker A

So here text content of last element. Okay. Similarly here also we can extract the text content. So text content of positional element position item dot text content. So the text content method will also return a promise.

Speaker A

So you must specify await before that. So here also we need to specify await before that last sorry last item is a variable right? So bracket is not needed. So position item. So this is how uh we can do that. Text content is a method. Yeah. Now execute. Ctrl C.

Speaker A

Okay, these are all different alternatives approaches in XPath. So whichever you familiar you can use that approach.

Speaker A

Okay, now it is get failed. So where it is get failed here it is got to be visible uh position item dot to be visible is getting failed. So what is an error? Syntax error. Fail to execute evaluating document. Okay, there is syntax error in this. Okay. So let us check the syntax error

Speaker A

position of sorry the syntax is not this one guys. So position we cannot provide the value directly in this. So you can say equal to three. Okay, that is the syntax. [Music] Okay, so now it is get passed. Now you can see the last content is Google+. The text content of

Speaker A

positional element is RSS. Right. So this is how we can use a different functions in the XPath.

Speaker A

Okay, clear so far everyone? how we can use the different functions. So now we'll see how we can handle the dynamic elements using XPath. So the attributes are dynamically changing. For example, let's say I have a two buttons here. So start button and stop button. So actually one button

Speaker A

when you click on the start button, it will turn into stop. Again when you click on the stop button again it will turn into start. The same button is acting as a two different behaviors. Okay. So when the button is in start state so this is a HTML name equal to start class equal to start but once

Speaker A

it is turn into stop the name value is changing class value is also changing but I want to write one single X path through which I'm able to handle both the scenarios with single X path I should be

Speaker A

able to match with the both the scenarios so how it is possible for example if I write an X path like this is a button element and at the rate name equal to star so when I write X path this is

Speaker A

matching with only first element when the button is in the start state then this X path will match but once it is turning to stop this X path will return exception this won't match similar if I write an X path like this button at the rate name equal to stop then if the button is in stop state

Speaker A

then this X path will work but once it is turning to start again this won't work so these two XPath will not work to handle this scenario but how we can handle list to handle the dynamic x path

Speaker A

we have a multiple options are there. So you can use or r operator like this or means what either the first one or second one at least one should be matched. So when the button is in start state

Speaker A

the first one will match. If the button is in stop state then second one will match. Similarly you can use contains method also. So contains name equal to if you look at here both names start with st only right? So you can use start with function along with st name equal st. So

Speaker A

this will also match with both elements or you can use the text function. You can say text stop what the value of the text here stop here value of the text is stop start. So you can use like this text

Speaker A

bracket equal to stop or text equal to start. So these are the different ways we can handle dynamic elements especially using this methods contains start with text. So these functions will be very very useful when you're working with the dynamic web elements. Okay. So let me show you a simple

Speaker A

example how to handle the dynamic elements using XPath. So new file a dynamic elements dot spec.ts.

Speaker A

Okay. simple example I already have. So let me just copy here. So this is my simple test to handle the dynamic web elements. So what I'm doing is I'm just trying to launch this page. So in this particular page I have this element.

Speaker A

So here you can see the dynamic button. So when you click on the start it turn into stop. Again when you click on this again turn into start.

Speaker A

So same button if I inspect this element you can see the same attribute you can see stop class equal to stop currently is in stop state but once you click on it again it is turned into start again once you click on this again turn into stop now with a single x path we should

Speaker A

able to handle this element so you can see I'm written the for loop here actually so this is an x path you have to write you can use any of this x path I have shown all the things here so button

Speaker A

text equal to stop or text equal to start. So I'm c capturing the locator in this element.

Speaker A

After that I'm performing the click action and after clicking action I'm waiting for some time because to see the effect on that web page. So I'm written in for loop five times I'm clicking every time I click it should change the status and this x path will able to handle

Speaker A

in both the status right five times I'm clicking. So let's try and execute this. Go to terminal new.

Speaker A

So I can say dynamic. I think there is a spelling mistake in this. So dynamic elements.

Speaker A

Okay. So we need to run this in headed mode so that we can see the impact. So it is executed.

Speaker A

Let me run this in headed mode. So once you run it is in headed mode. You can see the uh reflection here. You can see you're clicking on the start. So now I can turn into stop. So again it is clicking on the stop turning to start. Again clicking on the stop again turn

Speaker A

into start. So five times it is trying to click on the element. Color is not changing on the UI but it is still doing the action. So this is the way we can do it or you can use any one of the

Speaker A

X path. So this is how we can handle the dynamic dynamically changing the properties using XPath.

Speaker A

So instead of using XPath we can also use CSS or we can also use a play rate specific locators also we can use. Suppose if you want to handle this dynamic element using CSS how we can do that. So

Speaker A

let me show you this is using XPath right? So let me comment this. So I want to do the same thing uh using CSS using CSS. So instead of writing the XPath we can simply write a CSS for that. Okay.

Speaker A

Let me write another test for CSS. Same test same thing again but here instead of writing uh this is not CSS this is CSS. Okay. This is all about CSS. Now you can see this is a CSS button

Speaker A

name equal to start comma button name equal to stop. So here the comma is representing like a r. So either button name should be start or button name should be stop. It can be anything.

Speaker A

So in that case this locator will match. This is CSS locator and rest of the things are same.

Speaker A

So this will also work in the similar way. So using CSS also we can handle dynamic elements.

Speaker A

So it is keep clicking on the element. See when I use CSS it is also clicking on the element.

Speaker A

Perfect. So now again we can achieve the same thing using playright specific locators. So if you just want to use playright methods we can get that element using ro. Get by role method is there right? So we can use that. So using playright specific locators. So how we can use

Speaker A

playright specific locators? So to use playright specific locators you can use get by ro method.

Speaker A

Let me show you that it's very simple. Again same code. So here we can write like this. This is get by role method page.get per role player at specific method and what is the role of that button right? Role name is button and the name you can see that so normally we specify only one

Speaker A

name here right if I use regular expression you can specify multiple names you can see start or stop this is r operator play right it is an r operator start or stop it can be anything button name can be anything and uh this slash is representing regular expression

Speaker A

whenever you include the regular expression here in playright you should start with the forward slash also end with the forward for slash and in between you can write a regular expression. Here this is a regular expression. R operator is a regular expression.

Speaker A

So by using ro get by role also we can handle the dynamic web elements by writing proper x path. So proper regular expression. So when I execute this this will also do the same thing.

Speaker A

You can see this it is trying to click on the element multiple times. So these are the different type of locators are supported in playright. So as per the play rate the first priority is always goes to playright specific locators. So these are the locators are provided by the playright.

Speaker A

So first priority goes to this one and second priority will goes to always CSS. So always CSS XPath is not recommended. So you can use XPath also sometimes but that is a lower priority. So first priority is always goes to this one. Even in the realtime projects in the play process most

Speaker A

of the times we use playright specific locators. They are more stable and more faster. But when you compare with these three types of locators XPath is very slower than other locators. So play specific locators are very faster and then CSS and then XPath. Again when you compare with CSS

Speaker A

and XPath, XPath is very slower than CSS. So that is the reason CSS and play specific locators are preferable in our automation. Okay. So that is all about XPath. So there is another class for XPath.

Speaker A

Uh we have to discuss about XPath access like child, parent, following, proceeding, following sibling, preceding sibling. So there are seven to eight combinations are there. So we will discuss them in the next class that is again continuation of the X path. Okay. So as part of today's session

Speaker A

so you have to do one assignment. So whatever the code I have written X path locators. So this is the same code I have used a different X paths right. So instead of X paths try to replace with

Speaker A

the CSS locators. same code try to copy the same code but wherever I have referred the XPath try to change them as CSS locators okay you can try that so I have already uploaded the solution also in the in the last class folder you can check it so where you can find the solution for that so same

Speaker A

code I have written using CSS locators so please go through them and do practice in the next class we will see XPath access path okay so let us stop here for today's session. We will continue

Topics:PlaywrightTypeScriptXPathrelative XPathabsolute XPathlocatorsDOMautomation testingSDETstrict mode violation

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