Playwright with TypeScript | Playwright Built-In Locators ( Session 2)

Session 2 of a Playwright with TypeScript series covers built-in locators (getByRole, getByText, getByLabel, getByPlaceholder, getByAltText, getByTestId), their priority over CSS and XPath, and auto-w

Key Takeaways

Playwright's built-in locators should be the first choice, with CSS second and XPath third.
Auto-waiting and retrievability are built-in, so explicit waits are generally unnecessary for locators.
Locators are chosen to match how users perceive the page, such as roles, labels, and visible text.
Assertions like expect(locator).toHaveText validate element state and should be used alongside locators.
Remember to use await for locator actions and assertions, since they return promises.

What the video covers

Recaps the three core automation concerns: element identification, action on the element, and assertion/validation.
Explains that a locator identifies a web element based on its attributes or properties.
Playwright prioritizes its own built-in locators first, then CSS, then XPath, which it generally discourages.
Highlights auto-waiting and retrievability as built-in Playwright features that remove the need for explicit wait statements.
Introduces the built-in locator methods accessed through the page fixture: getByRole, getByText, getByLabel, getByPlaceholder, getByAltText, getByTitle, and getByTestId.
Demonstrates getByAltText, mainly used for images and SVG elements that carry alt attributes.
Shows getByText with regex options such as case-insensitive matching and whitespace handling.
Explains getByRole, which relies on W3C ARIA roles and accessible names, and notes that many HTML elements have implicit roles.
Covers getByLabel for form controls and getByPlaceholder for input and search boxes.
Demonstrates assertions with expect(...).toHaveText and chaining locators directly inside expect, plus the role of await.

Chapters

What priority order does Playwright recommend for locators?

According to the session, Playwright recommends its built-in locators first, such as getByRole and getByText. CSS is the second priority, and XPath is the third and is generally discouraged.

What is auto-waiting in Playwright?

Auto-waiting means that if a locator targets an element that is not yet available or still loading, Playwright automatically waits for it. Separate wait statements are not needed for elements.

When is getByAltText typically used?

The session explains that getByAltText is mainly used for images and some SVG elements, because these elements usually carry an alt attribute that can be used to identify them.

Full Transcript — Download SRT & Markdown

Speaker A

So in the previous class we have seen how we can write Playwright tests and how we can execute them by using multiple options. Today we'll discuss the locators concept. Throughout automation there are a few important things we need to focus on. The first thing is locating the web elements, or elements on the web page.

Speaker A

the web elements or elements on the web page. So normally when I open any web page we can see different type of web elements like input box or text box or radio button, checkboxes, drop-downs, images, links. There are different uh types of web elements we can see on the web

Speaker A

When I open any web page, we can see different types of web elements, like input boxes or text boxes, radio buttons, checkboxes, drop-downs, images, and links. There are different types of web elements we can see on the web page. To perform a certain action on a web element, we first need to identify the element, or locate it. That's the first thing, and it's important. Once you identify the element, we can perform a certain action, and after that we can add some assertion or validation. So these are the three important things we need to focus on throughout automation: first, element identification; second, action, meaning what kind of action we can perform on the element; and third, assertion, meaning what kind of validation we can do on those elements.

Speaker A

or we can add some validation. So these are the three important things which we need to focus on uh throughout automation. First identification element identification. Second thing is action.

Speaker A

Today we'll focus on the locators concept. This will take two to three sessions. We'll see what types of locators are supported by Playwright and how we can use them, and we'll see them practically. People who already know Selenium WebDriver know about XPath and CSS, and Playwright also supports XPath and CSS. But before those, Playwright has its own built-in locators, so Playwright gives importance to its own built-in locators. The second priority goes to CSS, and the third priority goes to XPath. Playwright normally doesn't recommend using XPath, and I'll tell you why in a moment. Instead, they recommend using their own built-in locators. That's the first priority, the second priority is CSS, and the third is XPath.

Speaker A

So this will take uh two to three sessions only on the locators concept and we'll see what type of locators are uh supported by playbrite and how we can use those locators and we'll see practically and uh yeah so in selenium web driver we people who are already know about selena web

Speaker A

These are the different types of locators supported as of now. We'll look at the official documentation, which clearly describes each type of locator, and we'll see how to use them practically. So what does a locator mean? A locator is a way to identify a web element based on its attributes or properties. Every element has certain attributes in the HTML page.

Speaker A

locators. And then uh the second priority goes to CSS and then third priority goes to XPath. So, normally playright doesn't u recommend to use XPaths XPaths normally. I'll tell you why they are not recommended to use XPath. So, instead they recommended to use their own built-in

Speaker A

Let us look at the documentation. Open a browser and simply search for "Playwright locators." It will take you directly to the official website, to the locators page. They have given many types of locators on this page, and we'll discuss them over multiple classes. First, they describe locators as a central piece of Playwright's auto-waiting and retrievability. In a nutshell, locators represent a way to find an element or elements on the page at any moment. The normal definition of a locator is that it identifies a web element, but the additional points here are auto-waiting and retrievability, which are very important. This feature is not available in Selenium. Auto-waiting and retrievability are special features of Playwright when working with locators.

Speaker A

So these are the different uh types of locators as of now the private is supported. Okay. So we'll look at the their documentation official documentation they have clear they have given the clear documentation about each and every type of a locator and uh we'll see how we can

Speaker A

What is auto-waiting? Suppose you write a locator to identify a web element, but by the time you try to locate it, it isn't available yet or it's still loading. In that case, your Playwright script will automatically wait for the element, so we don't need to separately add any waiting statements for elements. That is the auto-waiting feature, and it is automatic.

Speaker A

Open a browse. You can just Google it. Simply say playright locators. Okay. So it will directly go to uh their official website. So this is their official website locators. So they have given so many types of locators in this particular page. We will discuss them in multiple classes. So first

Speaker A

The second feature is retrievability. For example, Playwright tries to retrieve an element but it is still not available, so it keeps trying again and again, multiple times, based on the locator we provided. In Selenium WebDriver we have something called fluent wait. Explicit wait and fluent wait are both explicit waits, but fluent wait is another flavor of explicit wait, where we can provide a timeout, a polling interval, and so on. In Playwright, this happens automatically. Retrievability means that every second or two it tries to get the element again, and as soon as it finds the element, that element is returned. Auto-waiting and retrievability are built-in features of Playwright, so we don't need to worry about synchronization problems or wait statements. Playwright takes care of this automatically.

Speaker A

identify the web element but what additional definition which is provided here is auto waiting and retrievability. This is very important. So this feature is not there in selenium. Autoating and retrievability is not there in selenium. It is especially playright feature when you're

Speaker A

So locators represent a way to find elements on the page at any moment. Whenever you write a locator, it tries to identify the web element on the page. Playwright provides three categories of locators. The first category is built-in locators. Everything listed here is a built-in locator specific to Playwright; they won't work in any other tool. Playwright always recommends using these built-in locators first. We can access these built-in locator methods through the page fixture, such as page.getByRole, page.getByText, page.getByLabel, getByPlaceholder, getByAltText, getByTitle, and getByTestId. These are the recommended built-in locator methods provided by Playwright, and they get the first priority.

Speaker A

will automatically wait for the element. So we no need to separately use any waiting statements for the elements. So that is a feature of auto waiting. This is automatic process.

Speaker A

Apart from these, Playwright also supports CSS, just as we used CSS in Selenium WebDriver. Playwright also supports XPath. However, it doesn't support individual elements for everything. It supports only ID as an individual element, and for everything else we need CSS, XPath, or a built-in locator. So the first priority goes to the built-in locator methods provided by Playwright, the second to CSS, and the third to XPath.

Speaker A

locator which we provided. So this is actually provided in fluent weight in selenina webd driver we have something called a fluent rate. explicit weight and fluent weight both are uh explicit weight only but fluent weight is another flavor of explicit weight. So in the fluent weight

Speaker A

Today we'll focus mainly on built-in locators and see how to work with these locator methods. In later sessions we'll focus on CSS and XPath. Let us start with built-in locators. To access all built-in locator methods, we use the page fixture itself. We can access getByRole, getByText, getByLabel, and so on. We'll go through them one by one, practically. We can't use all these locators on a single application or page, so I'll use multiple applications and pages to demonstrate all the types of locators.

Speaker A

and auto waiting and retrieval is a inbuilt feature in playright. So we no need to bother about synchronization problems. We don't need to bother about weight statements and so on. This is automatically taken care by the playright. Okay. So the locators represent a way to find elements

Speaker A

Before that, let's go to the VS Code editor. We've already set up a Playwright project in the previous class, so we just need to create a new test script file and continue from there. I'm going to create a new file and name it pw-playwright-locators.spec.js. In this file I'll show how to use the different types of locators. Before that, I'll list out the different built-in locators supported by Playwright.

Speaker A

three categories. First category is built-in locator. So whatever they have listed here, these are all built-in locators of playrate specific to play rate. They won't work in any other tool. So they are recommended built-in locators. Play rate is always recommended to use

Speaker A

built-in locators itself. Like we can access this built-in locator methods by using page fixture like page.get by role, page.get by text, p get by label, get by placeholder, get by all text, get by title, get by test ID. So these are the recommended built-in locator methods provided

Speaker A

by playright and is also recommended to use the first priority go always goes to built-in locators provided by playright okay and apart from this it is also supported as CSS just like selenium web driver how we have used CSS similarly playright is also supported CSS

Speaker A

play is also supported XPath okay but it is not supported individual elements for everything it is supported only ID as an individual element but other than this we need to go for CSS or XPath or built-in locator so first priority goes to built-in locator methods which are provided by

Speaker A

payright second priority goes to CSS and third priority goes to XPath okay so today we will focus more on built-in locators and we will see how we can work with these locator methods and uh later in the next sessions we will focus on CSS and X paths Okay fine. So let us start with

Speaker A

uh built-in locators. So to access all built-in locator methods, we have to use a page picture itself. We can access get by ro, get by text, get by label and so on. So we'll see one one by one

Speaker A

practically. So we cannot use all these locators. It is very difficult to find all the locators in one single application or one single page. So I'll try to use multiple applications, multiple uh pages to demonstrate all these types of locators. Okay, one by one we will go and uh I'll try to

Speaker A

demonstrate about the locators. Okay, so before that uh what I'll do is let's go to VS code editor and we already set up playright project in SD class and just we need to create a new test script file and we will continue with that. So I'm going to create a new test script file. New file. Okay.

Speaker A

I'll name it as pwloators play rate locators dot spec dot js. Okay. PW play rate locators.spec.js.

Speaker A

So in this I'm going to show you how we can use a different type of locators. So before that I will list out here what are the different built-in locators supported by playright. Okay this is these are the locators. Okay. So before uh starting it is a TS or JS. Sorry it is TS.

Speaker A

Okay. So it is a TS. So the same scripts will work on JavaScript also because there is no difference on writing the test scripts. uh the only difference is by adding uh types. Suppose if you have defined any variables, you specify the data type for them. Right? That is the only difference.

Speaker A

Otherwise, same thing you can keep this file as a dot js and you can run it. Okay? So the script will work either js or ts. But if you're using ts, you need to strictly specify the type. Yeah,

Speaker A

same commands. There is no difference in syntax writing the test methods execution everything is same. Okay, there is no difference only the file extension is different other than this uh TypeScript we use a type inference concept and we need to strictly specify the types of

Speaker A

the variables that is additional thing we will have in Typescript other than this rest of the methods code and everything is same. So that's the reason in their official documentation also they have not given a separate documentation for JavaScript and TypeScript. So just simply

Speaker A

say they say NodeJS that's it. So NodeJS is representing both JavaScript and Typescript. Okay. But other languages they have given a separate section here. All right. So now before moving on these locator methods we will try to understand how exactly the locators works.

Speaker A

Okay. So the locator works based on the DOM structure. So DOM is nothing but what? Anybody have any idea? Locator means what? So locator identifies the element on the page. So what is a DOM? So DOM is most important. So the full form of DOM is document object model.

Speaker A

So what is document object model where it come into picture? So we need to understand something. So in interview it is very important. So what is DOM? Most of the people will think HTML and DOM is exactly the same. But it is not the same actually. Okay. HTML DOM is not

Speaker A

exactly the same. Okay. For example, let's say I'm opening some web page like this. Okay. And uh so these are different elements. I have I have image some input box some buttons I have suppose when I try to inspect any element on the web page so you can see here in the bottom section you can

Speaker A

see this all the stuff right so this is called as a DOM structure so whatever it is loaded here this is called as a DOM and uh from where this DOM is got generated this DOM is got generated by using

Speaker A

HTML of the page so this is a different thing and if I look at here right click and view page source So whatever it is got generated here. This is basically HTML plus some JavaScript mixed code is there. So this is actual source of the page. When I send this request google.com so once you

Speaker A

hit this request to the server the server is responded with this particular script. This is actual response we got it from the google.com. So the same response is represented by the browser.

Speaker A

So our browser is interpreted this response and provided in user understandable format. So this is the UI format but actual code behind this particular page is what? This is a page source.

Speaker A

Okay. So we're not going to do anything with the page source. So what is important here is a DOM.

Speaker A

But how the DOM is got generated? If I see inspect on the web page here you can see the DOM here. So all the elements and their attributes we can see inside the DOM itself. Okay. But how the

Speaker A

DOM is got generated. So DOM is basically uh a kind of an API. It will works at the back end.

Speaker A

It is an API interface provided by the browser. So every browser it can be Chrome or IE or it can be Edge or Firefox. Every browser is having integrated with API interf. So that is a DOM API interface which is called as a DOM is called as API interface provided by the browser itself.

Speaker A

DOM is a API interface provided by the browser itself. So let me just put that pointer. So DOM is a an API provided API interface provided by the browser. So what this interface will do whenever you are trying to launch some particular page or whenever you're browsing some page automatically

Speaker A

the DOM is automatically created. Okay. Once the web page is loaded the browser will automatically create the DOM structure. So that particular DOM structure we can see by inspecting the page. So we can say right click and inspect. Here you can see the DOM. So this DOM is created by browser itself

Speaker A

when the page is got loaded. Okay. So our all the locators whatever locators we are going to discuss all the locators identify the element based on the DOM itself. It will look for the attributes of the element inside the DOM itself. Inside the DOM it will find out. So if it is not able

Speaker A

to find the DOM then it will throw some exception or error. But if the element is available in the DOM then it is able to find that element. So the DOM is a main important thing. So if I look at the

Speaker A

structure you will understand this the difference between HTML DOM and actual UI. So if I look at this picture this is actual HTML code and I have not included JavaScript inside the HTML. Most of the times the web pages are designed by mixing of HTML along with the JavaScript. So this is

Speaker A

a basically HTML code pure and plain HTML code and if I look at here there is a HTML tag starting tag and closing tag inside this header tag and the body tag. So all the elements are part of the

Speaker A

body tag itself. So you can see button element input element and then another page P element paragraph element. So different elements are there and for this HTML this is called DOM view DOM structure and it is just like a hierarchy mode it will display like you can see HTML HTML

Speaker A

contains header and header and body are the both the child tags of HTML. So if I look at here the HTML contains header and body tag. Now inside the body tag we have something called button input two paragraph tags. The four are the chags of inside the body tag. So inside the body tag button input

Speaker A

P and P. So these are hierarchal representation of HTML which is basically called as a DOM view.

Speaker A

The same DOM view will be represented by the browser. So this is actual UI of the browser.

Speaker A

So JavaScript or TypeScript or web or locators everything will work on the DOM itself. This will the central point between HTML and the UI. Okay, simple understanding this. So what is a DOM? DOM is a NAP interface. Whenever the pages got loaded, the DOM will be created by

Speaker A

the browser only at the runtime. Okay. So all the locators we can create based on the DOM itself. We can find the elements and attributes of those elements only inside the DOM itself. So how we will get the DOM? Simply you can press F12 button shortcut key from your keyboard or you can

Speaker A

just right click on inspect the page. So here you can find the DOM structure right. So if you want to see the attributes of particular element simply you take can take this inspector element.

Speaker A

This is an arrow mark which we can see and just highlight whichever element you want. So let's say I'm trying to highlight something here some input box. So you can see this is the highlighted one.

Speaker A

So text area is my tag name and class is one attribute area controls area and you can see name attribute is there data weight. So there are multiple placeholder attribute is also there. You can see different attributes for the element. So every element is represented with some tag name.

Speaker A

The starting whatever you can say which is a tag name. Area is a tag, div is a tag, img is a tag, a is a tag, input is a tag. So these are all tag names. every element with uh wrapped with some tag

Speaker A

name along with some attributes will be available for that element. So these are very important when you working with the locators concept. Okay. So this is the first thing we need to understand.

Speaker A

Now let us move on to the locators part. So let us try to understand how we can work with built-in locators provided by uh playright itself. Okay. So let's see one by one and go back to the VS code.

Speaker A

So these are the locators I have listed out. So let us see how we can use this locators method uh to locate the web elements. Okay. So first thing so whenever you start writing the code what is a what are the functions or we need to import two functions mainly test and expert functions

Speaker A

that we are going to import import inside the kal base. The one is a test is is important because we need to write all the test methods. Second one is to add assertions or validations we use expect. This is another function from playright package from you can simply say at

Speaker A

the rate playright / test. So this is the first statement which we need to add. So now we need to start writing the statements. So here I'm writing a simple test method. So what is the syntax of writing the test in play red? Inside the test we need to pass two arguments. So what are

Speaker A

those arguments? First one is title of the test. Okay. I'm just giving uh playright locators. Okay.

Speaker A

So playright locators. So I'm just giving some name called playright locators or you can say demo on playright locator. So I'm just giving some title to the test or else uh you can say verify. Most of the times the title will start with either verify or check or test something

Speaker A

like that. Okay. So try to use some meaningful keyword verify playright locators. Playright location built-in locator. So this title comma the second parameter is what? Arrow function.

Speaker A

Arrow function starting curly brace ending curly brace. So this is a syntax of writing any test method inside playright. Okay. So what else we can write? Every test we need to pass something called page fixture. Right? So that we need to keep inside the curly brace. Page fixture is mandatory.

Speaker A

And what else we can put every arrow function before that we need to use something called async keyword. Async keyword should be mandatory. Right? So the structure is ready. Now we need to start writing the test. So here I will demonstrate each and every method one by one. So we will try

Speaker A

to understand the description first how exactly it will work where exactly we use and then we will try to use that particular method. So I will start from get by alt text. the first method get by alt text. So before that uh I'm going to use uh an application to demonstrate uh these locators.

Speaker A

I'll try to use this demo.nopcommerce.com. It is a demo e-commerce application. So let us try to uh locate the different type of elements by using different type of locators on this particular web page. Okay. So I try to launch this page first. So what I'll do is how to launch the page in

Speaker A

playright await page dot by using page fixture page dot go to and simply specify the URL right this particular command will launch your URL on the browser okay so now I have launched it so after that we will start doing one by one so what is the first method page dot get by alt text

Speaker A

so I'm not exactly ly following the same order because according to my based on my convenience I just rearrange these methods. Okay. So you can later you can just compare. So I will cover all the methods here. So total 3 4 5 6 seven methods are there. So all seven methods I will cover in

Speaker A

this. So first I will launch my page and then the first method is get by alt text. Get by alt text.

Speaker A

So this particular method mostly we use it for locating images. So why only images? Because most of the times images are having alt property. Okay. Images are having alt property or some images kind of elements. Sometimes SVG elements will be there on the page like image scanned pages

Speaker A

are there scanned images. So to locate those type of elements mostly we go for alt text get by alt text. So alt is one of the attribute of the element especially image type of elements.

Speaker A

So if I look at any image you can find some property called alt property. So if you have that alt property for the image then you can go with locator. So it is identifies images and similar type of element based on alt attribute. Attribute or property is exactly same. Okay. So attribute.

Speaker A

So we need to have a alt attribute. So when to go for it? Use this locator when your element supports alt text such as img or sometimes you can see area tag. Sometimes uh you don't find img tag.

Speaker A

You can find something called area tag. So it's such type of elements most of the times you can see alt text attribute or alt text property. So such type of elements we can find using get by alt text. Okay. So let's go to this particular page. For example in this page there are so many images

Speaker A

are there. So let us try to get the logo element. Logo is also an element. If I try to inspect this element logo element and see what is the DOM structure of this element. You can see img the

Speaker A

tag name of this element is what img is a tag and you can see there is an alt attribute is available alt equal to nope commerce demo store. So if you have this type of attribute for the element then

Speaker A

you can use this locator alt by get by alt text. Okay. So now currently this image is having this alt attribute. So we can happily locate this element using this alt attribute. So for that we use get by alt text method that we can access from the page fixture itself. Okay. Now just observe

Speaker A

how I'm doing page dot get by you can see these are all get by methods whatever I have listed about. So get by alt text get by alt text and here we need to provide the attribute value. So if I go

Speaker A

back and here inspect this logo what is the value is associated with the alt envcommerce demo store.

Speaker A

So that we can specify that we can specify. So this is get by alt text. So from the page picture we are just accessing this method and by passing alt text. So what this will what this will return

Speaker A

actually the get by text every method will return something right. So if you look at this get by alt text what the return type of this locator. It is basically return a web element and which is called as a locator. It is returning just a locator part. Okay. So in playright locator is also

Speaker A

a fixture just like a page and expect just like a page fixture we have used right browser also there similarly locator is also one of the fixture so this particular statement or get by all text not only this one all these methods will return a locator object a locator type of an object

Speaker A

okay so as of now I'm not returning anything I'm located this image or logo. So what what we can do on this we can do some operation right. So on this particular page we can verify whether it is

Speaker A

visible or not it is present on the page or not. Okay but before that I just want to store this locator element on the element some variable I required. So what I will do is I will just create

Speaker A

some variable like this logo and you can make this variable either const because the locator won't uh vary most of the times. So most of the time you use const const means that value is always constant cannot be changed. You can also use let if you want. Okay. Now if I look at this the get

Speaker A

by alt text and provided the alt text based on this it is identify the element and return into a variable. Now what is the type of this variable because in the typescript we have to specify the type. So what is the type of the variable? So the type of the variable is locator colon locator.

Speaker A

Remember this. Okay. All these methods will return a locator type of an object. So that is the reason this variable should be locator. And what is this variable? Now this variable is representing the image the logo element. Okay. So why it is giving an error here? Because it is a fixture which we

Speaker A

need to import. Locator is a fixture which we have to import. So where we have to import along with the test and expert we have to specify a locator something like L is a capital letter guys remember this. So in the picture some of them will start with lower case some of them will start with

Speaker A

uppercase characters remember this. So it is a locator. Okay. So this particular method locator method returns a locator. So logo is a locator. And another important point. So do we need to keep await statement in front of this page or if you want to keep await where we have to keep here?

Speaker A

Is it really required to keep await here? Okay. So I put await statement here. Now when I put await statement, you can see something called three dots here. What it is saying when you put the cursor? Await has no effect on the type of

Speaker A

this expression. Await has no effect on the type of this expression. What exactly it is saying is await is not relevant here. Is simply saying await statement is not relevant. Even though if you specify here that will not have any effect here. But in the last class I said for every statement

Speaker A

we need to use await statement. Whichever statement is returning a promise. Whichever statement is returning a promise before that we have to use await statement. Right? But if I look at here get by all text is returning promise or not. It is not returning promise. Actually it is

Speaker A

not returning a promise. It is returning something called locator type. Okay. So that is one reason we no need to put a wait here. The other reason is okay we are doing something like page dot get by all text from the page we are getting some element actually but have you performing any action on

Speaker A

that element. Are you doing any action here on that element? There is no action. Okay. So avoid the statement we have to specify only in the two cases guys. One is if the statement is returning some promise. Okay, in that case await is needed. Second thing, if the statement is not doing any

Speaker A

action, if the statement is not involved in any action, then await is also not needed. So first thing, if the statement is returning a promise, then we have to use await. If the statement is doing some action on the element, then we need to use await. So these are the only two cases we need

Speaker A

to use await. So even though if you're using page do something in front of the page we no need to specify await every time it depends on whether the statement is throwing a promise or not or returning a promise or not or if the statement is doing some action on the element or not. So

Speaker A

depends on that you need to decide whether you need to put a or not. Okay. So in this particular context a is not necessary because we this won't return any promise and also it won't involve in any action. We are not clicking on image. So what is the normal kind of action we do on image. So do

Speaker A

you have you ever click on the image on realtime applications suppose if there is a logo. So do you do any have you do any operation by clicking on the image? Is it possible? First of all, nothing right image we cannot click. See, every element is associated with certain actions. For example,

Speaker A

if I look at the button, we can perform the click action, you can perform the click action. If it is an input box, if it is an input box, will you do click action on input box or will you provide

Speaker A

some text on the input box? Input box always accepts some text, right? It depends on the type of element. The action should be depends based on the type of element. Okay. So here the logo is what it is an image. So we cannot perform a click action on the image. Right? So here what exactly

Speaker A

we are doing? We are just capturing the element in the form of locator inside this element. Okay.

Speaker A

Now we will do set an assertion on the image. So what kind of assertion we can do? We can verify it is visible or not. The image is visible or not. So what we can do here is we can simply say logo

Speaker A

expect I'm using just observe expect expect right so what I want to verify here the logo present or not so I'm taking this logo into expect method expect logo dot to be visible this is assertion method to be visible simple assertion just observe what I have done in two statements first I have

Speaker A

captured the element into a variable. The type of the variable is locator and then I'm expecting this logo should be visible. This logo here I mentioned to be visible and again here await statement is needed here before the assertion aait is required required or not. Here it is required.

Speaker A

Okay. Here here it is required because we are doing some action on the web element. Whether we are checking that web element is visible or not. This logo element is visible or not. We are verifying it. Okay. So definitely we need to use await here because we are performing some action

Speaker A

on this assertion. Okay. Action and assertion both are included here. Okay. So this is how we need to check. So page dot get by all text by providing all text it is returning the element logo and that we are passing here and we are verifying it is visible or not. So this is a first thing. So

Speaker A

to be visible so it won't return anything for ex. So to be visible is not returning anything. It is returning void. Actually it is returning promise but the value is void. So it is returning promise.

Speaker A

Here you can just look at this. That is the reason we have to use await statement here. So everybody is clear. So when to use await statement? When to when we should not use await statement. So await keyword we have to use only if the statement is returning some promise. If the statement is

Speaker A

involving some action. So then we have to use await otherwise we can ignore await statement.

Speaker A

Okay. So this is the first method get by alt text. So it identify the images based on alt attribute.

Speaker A

Most of the times every image is having some alt attribute. So we have some alt attribute. We can find that image get that image into element and then we can perform the action. Okay. So suppose if you want to click on the image logo dot the method is there like this logo.click but

Speaker A

after clicking we can't do anything action. It will just maximize on the page that's it.

Speaker A

So suppose if I look at this image. So when I click on the image what is happening? Nothing.

Speaker A

It is still there on the same page. Okay. This is actual realtime action. But in some pages if I click on some image it will maximize sometimes. But that is not a proper action we do on the image. Okay. So this is a image actual image img tag. You can find the images using img tag. Okay.

Speaker A

So if I click on the image it maximize that won't comes under the action. First of all we don't do anything after maximizing the image. So that is a manual action you can do. All right. So this is the first method get by all text. So now the second one get by text. So if I look at the

Speaker A

documentation also get by all text. Let's go and click on this method locate by all text. You can see look at this. This is a DOM attribute element. You can see this is image logo element img there is alt attribute is there playright logo is an alt attribute and how we have written the

Speaker A

statement page dot get by alt text specify the alt text and then perform the click here you can see here it is given the click so it is just given by click but we don't do anything on this

Speaker A

click action okay so when I click on the image nothing will happen so this is an example by example I have given like this Okay. Now, so let us move on to the next method. So remember get by

Speaker A

alt text. So alt text is available only for image type of elements. You don't find this all text or any other type of elements. So it is especially for images. So why here is a because the to be

Speaker A

visible method is returning the promise. So to be visible we have used right? So this method is returning the promise. So that is the reason we have to use await. You understood my point. So you can say put the to visible method. To be visible method is returning a promise. This is also an

Speaker A

action. It is basically checking visible or not. Checking visibility or not is also an action, right? And also it is returning the promise. You can just put the cursor on this method to be visible. Here it is returning the promise. So that is the reason we have to keep await statement

Speaker A

here. Understood everyone? So why we should put await statement here? Why it is not required here?

Speaker A

Because here get by alter text is not returning any promise. It is just returning only locator.

Speaker A

This is a return type. So we put that variable as a locator. That's it. Await it is not needed here.

Speaker A

Okay. You should be more clear on this which is very important. Right. So now let us move on to the next method. Get by text. Get by alt text. Then next get by text. So when to use get by text method. Second.

Speaker A

So find an element by the text it contains. So by using a text we can locate the web element and the text can be as a substring or exact matching string. Sometimes you can also provide some kind of regular expression. Regular expression is also allowed. So locate by visible text. Suppose

Speaker A

sometimes you can see a plain text on the web pages plain text but they are not buttons or links or something else. It is just like a elements like a div have you can have div tag or span

Speaker A

tag or p tag. So they all comes under the visible text. So for example let's say go to the page. So you can look at here and this is simply visible text. Right? This is a simple electronics is not

Speaker A

a link actually. It's a simple a visible text. So when I click on the image then it will go to the next page. So if I look at this welcome to store inspect that element you can see H2 tag is there.

Speaker A

It is simple visible text is this one. So what is the text and visible text? So whatever the text is included in the tags. For example let's say it can be any tag. It can be div tag. It can be P tag. It

Speaker A

can be header tag. whatever it is. So for example as a P tag and here this is my closing tag. So whatever is in inserted here whatever is included here this is called text which is also called as

Speaker A

an inner text. Okay. So if you want to locate this type of element text type of elements you can go with get by text method. So it can be div also sometimes you can see the div tag like this.

Speaker A

So here you can see some message like this. So this is also text. So get by text is nothing but what? Get by text is not an attribute. Okay. So text is not an attribute. Here get alt get by alt text. So here alt text is one of the attribute of the element. But here the

Speaker A

text is not an attribute of element. It is a inner text. So here you can see the examples.

Speaker A

So inner text is like this. So the text wrapped inside the tag names which is called as a text actually and sometimes it doesn't have any attributes also. See do you have any attributes for this element? P is having any attributes. No P is a tag name

Speaker A

actually. But you don't have any attributes for hello also don't have any attributes. So you don't have any attributes most of the times. So this is the element which we can extract using get by text. So for example let's say here I have something.

Speaker A

So here I can say welcome to our store. If I inspect this element, welcome to our store element. You can see H2. Do we have any attributes for this element? No, we don't have any attributes. Right? But I want to verify this. I want to check the visibility.

Speaker A

of this element. But normally in selenium web driver how we have done this. We have to extract the text from the locator and then we will compare with our expected text. But here we don't need to extract the text. We can simply check this welcome to our store the text is present here

Speaker A

or not because it simply is a heading right? We don't need to do anything with this heading. So just the whole heading is present here or not. We need to just verify. So this type of things we can

Speaker A

get using text method. get by text method. Okay. So let us see how we can achieve this. So let me inspect this element and here what is a text here? Welcome to our store is a text. So go back and

Speaker A

locate. So locate by visible text. This is also called as a visible text. Whatever is visible on the web page that is visible text. And when to use this locator to find non-interactive elements.

Speaker A

Non-interactive elements are nothing but suppose some elements are present inside these type of tags which cannot interact. So for example, can we do any action on this element? Can we click on this element? Nothing. So action is not possible. Similarly, sometimes you can see a P element,

Speaker A

page elements. So we cannot perform any action on them. It's simple text which is present on the web page. So that's the reason specifically saying use this locator to find a non-interactive elements. Okay. So non-interactive elements if you have a multiple elements with the same I

Speaker A

will discuss that in the next part. Okay. Just hold on. So currently I'm discussing about a specific elements unique elements. How to locate unique elements? We want to locate multiple web element. There is a process which we have. Okay. So interactive web elements like div,

Speaker A

span and p. So if you want to look at elements which are non-interactive non-interactive means like clicking is not possible. Any action is not possible on those elements. So which are called non-interactive elements. But if the elements are interactive so then this method is not suggested

Speaker A

in that case you can just go for another type of method like get by ro method is there. So we use that method. But in the non-interactive type of elements, we always go for get by text. Okay.

Speaker A

Now we'll see how we can use get by text to check the visibility of the welcome to our store. So as of now this is a value inner text value. So let me write a method like this. So again page dot get by

Speaker A

text get by text. This is a method get by text and we pass the text value. We pass the text value. So what this will do actually get by text method will return again a locator. Return a locator.

Speaker A

But instead of storing this into another variable like this, I will try to use this directly inside the expect directly inside the validation. So what I will do is I will write a weight. So normally what you will do you will store this in a variable like this right you can say I create

Speaker A

one con variable simply I create one variable called text the type of text is what locator right so this is a normal way we'll do so page dot get by text and specify the text so this get by text will return a locator so we will create a variable create a variable like this and specify

Speaker A

a locator. Now if you want to write an assertion how we can write await expect the text which is a locator dot again to be visible I'm using. So two statements I have written. So first I'm getting that element in a variable and that variable I'm using inside the expect. So here we don't need

Speaker A

await because by get by text is returning just a locator not a promise but here to be visible is returning a promise. So we have to use await. So can we combine these two statement into single statement? One single statement I want to write. So simply how we can write combine into one single

Speaker A

statement. Single statement simply what you can do. So what is the text here? text is representing the whole part this one. Right? So just copy that as it is and keep it here. So you don't need the second variable one single statement. So await expect page dot get by text and specify

Speaker A

the text dot to be visible. That's it. So instead of storing this element in a variable separately, we directly specify the locator inside the expect function. Okay. So this is one single statement.

Speaker A

So this is how we can add the complete text. So let us try to execute the code so far. So because we use previous method. How many assertions we put here? This is one assertion. This is another assert. So here the click won't do anything. So I can just remove this. Now let us try to

Speaker A

execute these two methods first and then we'll proceed further. So I'm just saving the code. How to execute? Go to the terminal. new terminal and the command is npx playright test pwloators specs.

Speaker A

So it is executing. So I have not specified uh any mode or any specific browser. So it is trying to execute on all the browsers. Okay. So you can see three tests are executed, three workers. So every time I don't want to run in every browser. So what I want to do is I just go to configuration

Speaker A

file. So as of now chromium, Firefox, WebKit all three are enabled. So I just want to execute only on the chromium every time. So for that what you can do? You can simply comment this. So this part and this part. Okay. So I'll just comment these two parts. So only this part I have commented

Speaker A

Firefox and WebKit and rest of them will work as it is. So let me close it and uh one more time I'm running. So again just look at here. This time it will work only on the chromium browser only

Speaker A

one test one worker. So one test is got passed. So let us see the report. npx playright show- report right. So now this is all the steps are successfully passed. So this is one assertion.

Speaker A

This is another assertion. So two assertions are got passed and it is launched this particular page. Okay. So again if you want to run this in headed mode how we can run Ctrl C. So how we can run in headed mode you need to just add - head data. Okay. So this will run the test in

Speaker A

headed mode. So this is our page and is open and closed. It's very faster because we have not doing we're not doing any navigations and all. So it is just open validation is done closed. Okay. So now let us move on to this one. So get get by text is nothing but what? By using the text we can capture

Speaker A

the element. Now the text can be a substring or the complete string or a regular expression.

Speaker A

Anything is uh anything is accepted. Suppose if I look at here welcome to our store. So instead of this I just say only welcome to will it work or not? Welcome to have given will it work or not?

Speaker A

Still it will work. So here provided substring. We can also provide the substring. So it is accepted full string substring along with the regular expression also. So here I provided a substring.

Speaker A

So will it work or not? Yes, still it will work because actual text is was welcome to our story is an actual text but I have given only substring. So still it will work. So let's go and execute.

Speaker A

So get by text except substring also. So it is get passed. So same thing suppose if so complete string this is also work for us. This is full string or you can say full string and this is a substring. Full string or substring and

Speaker A

uh regular expression is also possible. So if you want to use regular expression is not important but if you still want to use some regular expression I can write some regular expression here. So what is a regular expression? I will write here is something for example let's

Speaker A

say so whichever case I have given like upper case or lower case for example in this particular statement if I give all of them are upper case characters will it work no if I give all lower case characters in that case also it will work why because the values or the text which we are giving

Speaker A

inside the method is case sensitive okay they are case sensitive but now I just want to ignore the case sensitive I want to make it as a insensitive case insensitive then how we can do that I will write a simple regular expression even though it is a lower case or

Speaker A

upper case or mixer case whichever case it is I just want to ignore the case okay so then how we can do that let me comment these two so I want to for example let's say I will pass everything is uppercase character here or I want to pass everything is a lower case or mix

Speaker A

case but still it should able to match and my test should pass. So on that case I can write a simple a regular expression inside this. So remove the whole string instead of that I'm just replacing with the regular expression. Simple very simple regular expression. So whenever

Speaker A

you start using regular expression start with the backward slash forward slash starting with the forward slash ending with the forward slash. So I'm just removing the i. Just observe regular expressions start with the forward slash end with the forward slash. Okay. And here welcome

Speaker A

after that slash s is representing a space that means you can have a space plus after two also there will be space plus after hour also there is space after store nothing. But I want to ignore the case sensitive also. Additionally you can say I. I is representing case insensitive.

Speaker A

case insensitive. So now what will happen if I look at the string I've used W is an uppercase character 2 is an alo uppercase character O is an alo upper case and S is also upper case but what is an actual text is everything is lower case except W but here I have used mixed case and

Speaker A

also at the end what I'm saying ignore the case sensitivity I representing ignore case sensitivity so then this validation will pass why because I'm just ignoring the case sensitive. Okay. So this is a simple usage of regular expression. So let me just run the code once again.

Speaker A

So even though you provided the regular expression still it is got passed. So it accepts get by text method accept the full text or full string or a partial text or a substring or a regular expression. Okay, full string or full text

Speaker A

and substring or partial text or regular expression. These are the two syntaxes. Okay. So three different flavors. So this is get by text method. Page dot get by text. So when to use this method? If elements doesn't have any interaction non-interactive elements

Speaker A

like simple text kind of an element labels. So in those cases we can go for get by text method. Okay. Now so let's move on to the next method. So these two methods are clear everyone. So first method get by all text for images. Get by text method for non-interactive

Speaker A

elements. Non-interactive elements. Okay. So text content. So here I'll write. So non interactive elements. All right. So next get by ro. If the elements are interactive then we go for get by role method like buttons, links, checkboxes, radio buttons right and

Speaker A

uh drop-downs list boxes. So all these elements are interactable. So such type of elements we can handle using get by ro get by ro method. And this method is recently introduced in the latest versions of pre right earlier it was not there. So let us see how we can use this. So get

Speaker A

by ro method locate by explicit and implicit accessibility attributes. I'll tell you what is implicit and explicit accessibility attribute. Get by role. Get by role. Remember what is that role means here? Ro is not an attribute of an element. Role is a not an attribute of

Speaker A

the element. Remember this get by role means role is not an attribute of an element. I'll tell you what is a role. Okay, let us try to understand something about this get by role. Third one, get by role. So, locating by role. Locating by role in the means role is not an attribute. Ro is

Speaker A

not an attribute. But sometimes you can see role as an attribute also. Sometimes you can see in HTML in the DOM when you inspect some element you can find role is something like an attribute also role equal to something like that but sometimes you may not have a role attribute sometimes you

Speaker A

may not have a role attribute so we don't consider role is a an attribute first of all okay but what is a role that we need to understand so role locators basically include buttons checkboxes something headings links list tables so these type of elements are interactable So these elements are

Speaker A

interactable. So we can use get by ro method. And these elements are having something called as ro. But what is a role? Actually role is not an attribute. Ro is defined based on the element type. Role is based on the element type. For example, button. For button, what is a role?

Speaker A

Button itself. For checkbox, checkbox itself is a role. So for every interactive element there will be some role but how we will know the role of the element. So if I go back to the documentation just try to understand. So get by role the first one get by role just understand this. So this is

Speaker A

a signup element there is subscribe checkbox and submit button is if I look at this HTML or DOM for this input element or for this signup do we have any role attribute ro there is no ro attribute but still we can locate this element using get by ro method how we can if I look at the

Speaker A

syntax here page get by ro let's say signup is a heading actually h3 tag I'm going going to locate heading. This is my first parameter, comma. In the curly braces, I specified name colon signup. So, do I have something called name here? No. Do we have something called heading here? No. But

Speaker A

how come we use heading and signup? Signup is basically what the text here inside the H3 tag that we specified. And heading is basically called as a role. Heading is a role. So what is sign up here? It is a basically heading only, right? So what is the role of the signup? It is a heading.

Speaker A

So the role name is heading here. So for similarly for example, it's a checkbox. So here the checkbox is what the type attribute value. Input type is a checkbox. But here what is the role name? I have given checkbox and the name is equal to subscribe. So name equals subscribe. This name I have given

Speaker A

here and this is with a regular expression again. So button this is a button is a role. So name is also submit I have given because I is ignoring the case sensitivity. So I have given I. So if

Speaker A

I look at these statements heading, checkbox and button. So these are all called roles. So how we will know the role of the element? That's the main thing. So here the sign up this is the heading.

Speaker A

We already know that. But how? Here we specify the heading. So checkbox. Checkbox role is what?

Speaker A

Checkbox itself. Okay, we specified the button. For button ro is button itself. We specified. So these are straightforward. For checkbox, checkbox is a role. For button, button is a role. These are straightforward. But there are certain elements and uh we cannot directly find the role of the

Speaker A

element. So if I look at this H3 signup by seeing this element do you know this is the role of this element is heading do you know suppose if I don't look at the statement just by seeing this element

Speaker A

do you know the role of the statement is the role of the signup is heading don't know right we don't know but certain elements we will know so for example checkbox the role of the checkbox is checkbox the button the role of the button is button so we know that because this is implicit

Speaker A

ite elements. These are implicit. Implicit is nothing but what? The tag name and the role is exactly same. Implicit is nothing but what? The tag name and the role is exactly same. Here the tag name is button. The role is also button. Okay. And here you can see the tag name is

Speaker A

input but role is checkbox is a different. This is explicit. And here tag name is H3 but role is a different heading is a role. This is also explicit. So certain elements role is implicit.

Speaker A

For certain elements role is explicit. Now read the statement. Ro locators includes buttons, checkboxes, headings, links, list, tables, and many more. And follow W3C specifications for area role, area attributes, and accessible name. Note that many HTML elements like button have an

Speaker A

implicitly defined role. Implicitly defined role is nothing but what? If the tag name is button, even the role name is also button. So such type of things we can call them as implicitly defined role. Implicitly defined role is nothing but what the tag name of the element and the role name of

Speaker A

the element is exactly the same which are called implicitly defined role. And explicitly different roles are different. Means what? Here the sign up the tag name is different but the role name is different. Here the tag name is different input but the role name is different. So these

Speaker A

are explicitly defined roles. This is implicitly defined roles. Okay for implicitly defined roles. Okay we can identify something like button. Button is implicitly defined role. We specify the role.

Speaker A

But what about other elements? So how we will know the role name of signup is heading. How we will know this input element tag is input element role is checkbox. So to know that we have to refer this

Speaker A

documentation area role area attributes accessible names. If I open this link here they have provided the list of elements along with the different roles. Actually you need to refer all those links. So instead of referring all these links I have make a sim list. So you can just go through

Speaker A

the list and you will identify the elements along with the roles. Okay. So somewhere yeah so they have given some table somewhere I think. Okay I would just refer some other link and I've captured all the all of them. I will just share that in the document and you can easily refer

Speaker A

them. So this is simple document. Okay. Suppose these are the HTML elements and these are the area roles. For example, let us say for button and the role name is also button. So this type of element is called implicitly defined elements. So this is the terminology which we have to use

Speaker A

implicitly defined role. And uh similarly for link link anchor tag link this is explicitly defined for all types of H1 tags heading is a role name. Okay for img the role name is also img and this is again implicitly defined role and what else we have. So for all input tags depends on the

Speaker A

role they have different you can see input type is equal to button for the role name is button input type equal to for example checkbox the role name is checkbox suppose input type equal to email password input boxes for them role name is text box for radio button role name is radio

Speaker A

for range reset for everything they have different role names for the search box that is also input element but the role name is search box. So most of them are explicitly defined roles. And for li tag list item is a role. For option again role is also option. So this is again implicitly defined

Speaker A

role. Implicitly defined role. For table the role name is also table. So this is also implicitly defined role. So some of them are implicitly defined roles. Some of them are explicitly defined ro. So I have gathered this list by referring some links from this particular URL. I forgot

Speaker A

to capture the link somewhere. I've captured the table but you need to refer this links. Okay, that's what they have clearly saying here. So how to get this role name of the particular element based on this document. So you need to check what is the tag and what is the type

Speaker A

of element accordingly? You can use this role names inside the get by ro method. Okay. Now, so let us see how we can locate this element using get by ro method. page dot get by ro method. Go back to VS code editor. So this time I'm trying to find some element on the web page. So go to

Speaker A

the okay go to the web page. Okay. So in the homepage I have something called register link.

Speaker A

Is it interactable element or non-interactable element? links are there in this register login. So they are interactive or not interactive. They are interactive. Okay. So now I want to find this register link. I want to perform click action on it. Click action I want to perform. Okay. So that

Speaker A

is an interactive element right. So how we can do that? If I inspect this register element we have an anchor tag some HF attribute and there is class attribute and some text is also there.

Speaker A

register text is also there. So this is basically an element which is an interactive element. So if you have an interactive element get by ro method works for anchor tag and href is also available for this. What is a role name? For anchor tag href attribute is there this one right? The first

Speaker A

one what is the role name? Link is a role name. Link is a role name. So let me try to use that method. Get by ro page dot get by ro get by ro two parameters it will take okay first parameter is

Speaker A

name of the role. So name of the role is what link comma and which link we have to specify we need to click. So that we need to specify in the curly brace. The link name we have to specify. So if I

Speaker A

look at here what is the name of the link here the register. So the text we can specify. So here name colon the value which we need to specify. Okay. So name col. So name is mandatory. Okay. Name comm,

Speaker A

colon and specify the name of the link. That's it. So this will return get by ro. So these are all options. So what the get by ro method will return? Get by ro method also will return locator. Get by

Speaker A

ro als also will return locator. Okay, but I want to perform the click action. So what I can do?

Speaker A

I can directly say dot click. Click is an action method. So now you have to tell me is it required to keep await or not? Here aait is needed or not. In front of the page await is required or not.

Speaker A

You have to tell me now. Get by page by role. I'm getting this element based on the role and perform the click action. So is it required to keep await statement or not? Yes or no?

Speaker A

See when I say click, click is what? Action or not? Click is a action. So what this will return?

Speaker A

Click click method. Finally this will able to look at an element. But finally what we are doing?

Speaker A

We are doing click action. Click an element. The click will be performing a action on the element. Right? So if I look at here, it is not returning anything. So parameter options. Do you see any promise here? There is no promise. Yeah, here it is promise. It is returning the promise.

Speaker A

So obviously we have to use await statement in front of the page. Mandatory. Okay. So this will perform the click action on the register element. Okay. So after clicking on that element I want to do another thing. So after clicking on the register so I'll get some registration page.

Speaker A

Now I want to verify this header. I want to verify this register heading is displayed or not after clicking on the register. So is it interactable or not interactable? Is it interactable or not interactable? Register. If I inspect this element, you can see simple H1 tag. H1 tag header. So even

Speaker A

though it is not interactable, even though it is not interactable, we can still use get by role.

Speaker A

So if it is not interactable, what is a method? We prefer to use get by text. Get by text we can use.

Speaker A

But here alternatively I'm also showing get by roles because get by role is also used for headings. Get by role also we can use it for headings. Now I want to verify even though it is not inter non-interactable element. So I can just verify this register is visible or not.

Speaker A

So I don't have any attribute except register. So for headings what is the role for headings?

Speaker A

H1 H2 H3 H4 for all kinds of headings name of the role is what? heading only. Right? So let me try to write a statement page dot get by ro right what is the role name heading in the curly brace we have to specify the name. So what is the name we have? So whatever is visible

Speaker A

on the page you can specify that register is a name or you can capture from here register.

Speaker A

So that is a name. So name is mandatory. It can be the display name. Whatever is displayed on the page that you can specify. So page dot get by ro heading. So what we can do in this heading? We cannot do any action and uh we can verify like to be

Speaker A

visible. We can add some method. Let's say first close this bracket dot to be visible. So we can verify the visibility. And I think one more bracket is extra.

Speaker A

Okay, sorry. Page get by ro heading. So name, sorry guys, two visible we need to use along with expect. So this will return element actually. So get by role will return element. So that element everything I will keep inside the uh assertion. So here I have not applied any

Speaker A

assertion because I have just only done click action on the registration link. After clicking on the registration link I want to verify the registration uh the the heading is present or not I want to verify. So I will put this in the expect method. So await expect of sorry

Speaker A

await expect and inside the expect I'm passing the whole thing and one bracket close this bracket and then dot to be visible visibility I'm verifying this okay so I just click on the register link and then I'm verifying register heading is displayed or not on on that particular page.

Speaker A

So here can we use get by text method instead of get by ro can we use get by text? Yes, you can use you can still use get by text. Okay, but I just want to show you get by

Speaker A

role for heading. So that's the reason I'm giving here example. You can also use get by text. Okay, you can also use get by text. Earlier we have seen how to get the heading using get by text.

Speaker A

So this is a get by text. So this is exactly heading actually and we are able to get it.

Speaker A

Okay. So these are the two examples of get by role. Same if it is a button specify the role name specify the name like that. So in the coming sessions we will see so many examples because we are going to automate end to end test cases. You will see in many places how we can use

Speaker A

this get by role. Here we are mainly focusing only on the locator part. how we will able to locate elements. So this is get barrel. So let me run this code once again playright. Yeah.

Speaker A

So it is running in headless mode. Okay. Now it is successfully executed and passed. Now let us see the report.

Speaker A

So whatever assertion we put everything. So here expect to be visible pass. Here expect to be visible passed. Here get by role. Expected visible also is passed. Okay. So this is all about get by ro. So I'll share this document keep it with you. So because depends on the type

Speaker A

of elements you need to use proper role name. This applicable only for get by ro method guys.

Speaker A

and all other methods we don't need this role only for get by role method we need this role names okay so now we enter into the registration page so here I want to pass some input in the input boxes I want to pass some text inside the input boxes so here also we can use get by role

Speaker A

no problem but here I want to show you another method called get by label get by label fourth get by label.

Speaker A

There is no specific uh rule like where we have we have to use this method only in this particular place not like that. So based on your convenience you can use whichever method wherever you want it totally depend on type of element. Okay. All right. So now you can just look at

Speaker A

page dot get by label. So what is the label? locate especially we use this method for form controls. So form controls nothing but is nothing but this is simply a form. So you have multiple elements radio buttons, input box. So this is all comes under the one form. So most of the times we

Speaker A

can see login form, sign up form. So you can have set of elements we need to provide some data into those elements. Right? So such type of elements we can easily handle by using label. But what is a label here? This is a label. In front of this box there is a label. These are called labels.

Speaker A

So where we can see this only in the forms only in the forms we can see these labels. So if you want to pass some data in input box if you want to interact with these elements based on the

Speaker A

label or by using this label you can locate that element. So if I inspect this element first name element you can see the tag name is also label. So wherever you can see the tag name is label that

Speaker A

is label itself. Okay. Now let us try to locate these element first name last name email using label not using input boxes directly. If you want to locate input boxes directly you can do that you can use get ro method for these two three input boxes but alternatively I'm trying to use get by

Speaker A

label to locate these elements. So how to use get by? So ideal for form fields with visible labels.

Speaker A

So let's see how to use it. Page dot get by label. Page dot get by label. Simple. The label name you have to pass. That's it. So what is the label name is displayed here? First name colon. The full name

Speaker A

you have to pass including colon. This is your label. And to enter the value in the input box, we have a method called fill. Fill is a method through which we can enter the value in the input box. So here I'm passing some text inside the input box. That's it. And there is another method

Speaker A

also there uh type that is actually duplicated. Type is also there that is called duplicated.

Speaker A

So don't use the type method. So try to use fill method. So type is duplicated means what? In the pre in the coming versions it won't be available duplicated. So don't use this. So instead of type you can use fill. Okay this is the right one. So page dot get by label specify the label name and

Speaker A

fill. Similarly I will try to add last name. So this is the last name using label name also we can locate the element. So here I'll give it a different name and similarly email page get by label take this email specify this email inside the single quote fill okay simple ABC

Speaker A

atgmail.com okay so I just added some data into the fields using get by label it's very simple, very straightforward, very easy. Okay, let's execute this code and see. Ctrl C. So it is going to execute in the headed mode. So headless mode. So I want to make it as a headless mode

Speaker A

so that we can see the data is properly entering or not. So what I'll say headed.

Speaker A

See it is launching my page. Yeah. So now we got some error here. So first name page get by label first name dot fill John first name itself we got an error see what is an error whenever you get an error immediately it will give the report like

Speaker A

this okay here we can see that so waiting for get by label it is basically waiting for that label actually because after clicking on the registration link it is taking some time so here we are verifying is visible also right so to be visible

Speaker A

And after that what we are doing we are entering the first name last name and uh these things. So we don't have a send key method. This is a fill in selenium web driver we have a send keys method but

Speaker A

here we have a method called fill. Okay. Okay. So let me run one more time. Sometimes it will fail.

Speaker A

So let me just clear. Let me remove the headered mode and just try execute. Oh okay. Sorry. So we forgot to put await statement actually because await is required for every method, right? So that is the reason it is failing. Sorry. Await then await. So let me run one more time.

Speaker A

Okay. So launching the page. Okay. It is asking for human. So no problem. Yeah, it is failed because it is page is got interrupted actually. So that is the reason it is got failed. So what I can do instead of uh running in the UI mode just try to run in the headless mode so that you won't uh

Speaker A

get that error. Ctrl C because nowadays the pages are secured by uh the captures and everything. So through automation when you open the page it will ask you whether you're human or not. So we cannot avoid that through automation. So what I can do just try to execute in the headless mode.

Speaker A

Perfect. So if I run through headless mode it is working fine. So now let us see the report. NPE playright show report. And look at this.

Speaker A

See everything is executed. So go to visible is passed and to be visible. So these are the things fill method you can see. So these are the values we have entered.

Speaker A

Okay. So every step each and every step we are able to see that. So that capture issues you won't get here. Captures we cannot handle the first of all. Even captures is basically provided for security and privacy. Right? So if you break that through our automation what does it mean?

Speaker A

We are violating the privacy or we are violating the rule. So that's the reason captures and all we cannot automate. We can automate only the plain pages even in selenium or play rate or cypress whichever automation tool captures cannot be automated. Okay. So just run the test using headed

Speaker A

mode headless mode. So everything will go fine. Okay. and uh whenever whichever pages are asking captures and everything so don't try to use that page first of all this is just a demo page okay otherwise just ignore that so this is get by label this is get by label so at the time of execution

Speaker A

if you interrupted any page so your test obviously will fail so the next method fifth one get by placeholder So sometimes you can see placeholder is an attribute actually. Sometimes you can see the placeholder attribute for the elements. So you can handle those elements using placeholder

Speaker A

itself. Especially uh most of the times uh input boxes, search boxes are having placeholder attribute. Placeholder attribute. So let me show you how we can use this placeholder. Fifth one.

Speaker A

So finds an element with the given placeholder text. So placeholder is a an attribute of the element.

Speaker A

So best for inputs with without a label but having a placeholder. So for example, let's go to this page and here we have an input a search box here. Right? So when you inspect this element, this is basically an input element. There are certain attributes are there.

Speaker A

You can see the placeholder attribute is there. So you can handle this element using any of the locators. You can use by uh get by ro or you can use get by text or any other locators you can use.

Speaker A

But here the placeholder I want to show you. So placeholder attribute is there. So you can also use placeholder to locate this element. So what is the value of the placeholder? search store is a value of the placeholder. Now let us try to inspect this element and we'll pass some text

Speaker A

into the input box or search box. So page dot get by page holder just specify the page value simple page value and this is a text box. I just want to fill the text fill and I just pass some value

Speaker A

uh inside this text in strings you can keep in single quote or double quote that is up to your wish. So this is a statement. So here we need to keep the await. So get by placeholder this is a placeholder value. Fill fill is a method through which we can

Speaker A

pass the value in the input box. So this is the value provided. So let's execute and see.

Speaker A

Okay. So let me execute this. See in the testing environment you don't see any captures and all.

Speaker A

Okay. Only in the production applications you can see them. So developers don't keep all the captures. They can disable or they can enable. Okay. So placeholder value have submitted to the input box. Now if I look at this report once again you can see the value which is entered

Speaker A

in the input box. You can see in the search store we fill this value. So this step is successfully executed. Okay. So these are all five different methods. We have discussed five methods so far.

Speaker A

Get by alt text. Alt text is an attribute of an element. Get by text. Text is not an attribute.

Speaker A

It is a value. Get by role. Ro is a not attribute. Get by label. Get by placeholder. So get by label is a tag name actually. So label. Placeholder is again attribute. Okay. So far everybody's clear these five different locator methods. Alt text, get by text, get by ro, get by label, get

Speaker A

by placeholder. So now I will discuss about rest of the two methods. Get by title, get by test ID.

Speaker A

So you need to do a lot of practice. So I will give some assignment also. So then you will be familiar with these methods. Okay. So now let me explain get by title, get by test ID. So it is

Speaker A

very difficult to find these type of attributes uh in the multiple web pages. So I have created one simple local web page. So where I will demonstrate uh get my title, get my test ID very simple. So let me show you a web page which I have. So this is a HTML page which I have created my

Speaker A

own. So in this page there are different type of elements we have. So here I have given. So these all elements you can locate by using get by role and these elements you can locate by using get by text. Similarly, you can locate these form elements using get by label and you can locate

Speaker A

these elements get by placeholder and get by alt text. So here I will demonstrate how to locate the element using get by title. How to locate the element using get by test ID. Okay. So I will provide this HTML file. You just open that HTML file in your browser. So you will get this URL.

Speaker A

So this URL you have to pass in your automation. So your local application. Okay. So what I will try to do is after doing this. So fifth one is done. So placeholder now the sixth method get by title. It's very simple. Let me show you. So get by title to locate an element by

Speaker A

its title attribute. So title means what is an attribute. Again title is an attribute. If the element is having some title attribute, we can get the element. So when to use it when your element has a meaningful title attribute, then only you can use this get by title. Otherwise you cannot.

Speaker A

So this time I will open another page. So await page dot go to. So in one single application you can use any number of URLs. So I will try to open this URL. Okay. So this is my local HTML

Speaker A

file. I will provide that file. You can open that file in the browser. You can see all the elements. So I open this application. So once I open this application, so in this application I want to use get by title. So rest of them you guys can try your own. Get by title locator I want to

Speaker A

use. So I want to locate these elements. So home link HTML is a text, home is a link. And this is simple tool tip and this is a button. So how to ele how to locate this home? So I want to verify

Speaker A

uh the home here. So in this particular place I want to verify the home. Uh this particular link is having text home or not. If I inspect this element just observe what is the text here? Home is a text. What is the title? Homepage link. So by using this title I want to locate this element

Speaker A

home element. So what I can do capture this title of the element and write the statement page dot get by title and specify the title. So this is the title. Now what I want to verify in this uh this will return the element actually. So get by title this will return the element. If

Speaker A

you want to store that in a variable again you need to store basically it's a link. So you can just make it as a locator con locator but what I I want to do some action on this element get by title I captured the element I want to do some assertion on this link. So to

Speaker A

do the assertion what I can do I can say expect of this particular element to have text. This is one more assertion method. I want to verify this link should have some text. What is the text home? This is my assertion. Okay. This is my assertion. Can we write both in single

Speaker A

line? I want to combine this into single line. So I don't want to use this locator method.

Speaker A

So if you want to write in a single line how we can write. So instead of writing this link just put this whole thing inside the expect method. Okay. So do we need await here? Await to have text

Speaker A

method return promise. So we should definitely specify await. Okay. So this will able to locate the element based on the title and perform certain action. it will just check the link is having this text or not. Okay. Similarly, I will try to use another one in the same HTML. So when you place

Speaker A

the cursor on HTML here, this HTML is also having the same title some other title. So let's take the title and write the same thing again. So await expect page dot get by title sorry get by title and specify the title dot again same method to have text. So what is the

Speaker A

text we are expecting here? HTML uppercase character HTML. Okay. So if the element is having title attribute then we can get that element by passing the title like this. Okay. So this is get by title method. So let us try to execute and

Speaker A

see this. Control C show report. Okay. So what I'll try to do is I will try to comment this code. So because it is asking for capture because we can execute in headed mode. So this particular part I will commit. Okay. So later you can

Speaker A

uncomment and execute in uh headed mode. So only this particular one. it here. So these are the two methods I commented. So later you can just uncomment and execute.

Speaker A

So get by page role, get by page label. So these are the two things I just commented.

Speaker A

Right? So now let me execute in headed mode. iPhone headed So we are using two different application in one single script. Just observe first time it is launched envcommerce application and then it is launched second one it is going very faster. If

Speaker A

it is a selenium it is very slow actually see how much faster it is. So if I just look at the report npx playright show report. Now if we look at this. So first time we are opening this page and we have

Speaker A

done all the validation and then second time we open open this page and to have text and to have text both are passed. Okay. So this is how we can use get by text method. Similarly I'll show you

Speaker A

the last method which we have get by test ID. Get by test ID. So this is very rarely we use because the test ID you won't find many places. So test ID is different. So to locate an element based on

Speaker A

its data test ID attribute. So if the element is having data test ID attribute and then we can use this method get by test ID method will work. Data test ID attribute should be there. And one more advantage of this method is it is customizable. This property we can customize. Okay. I'll tell

Speaker A

you what is customization and everything. So if I go back and see get by test ID. So look at the picture. So here this is simple button I have and if I look at this HTML code this is one.

Speaker A

So data test ID is an attribute and the value of the test ID attribute is what directions and how we can use that method await page dot get by test ID and the value of the test ID is we passed and

Speaker A

we perform some action. This is the example. Okay. And the data test ID. Suppose currently the developer is written the code like this. And we have written the statement like this for our automation. Suppose tomorrow the developer is got changed this data test ID instead of test

Speaker A

ID. So they put something else. But the value is same. But this will definitely impact here.

Speaker A

Right? Because here this method works based on test ID but here instead of test ID they have given something else like a data p ID or beta dot some SID the property name the attribute name itself is got changed. So definitely that will impact this statement right because the data

Speaker A

test ID will get the value only from test ID but if the developer has got changed this attribute this method will not work right but even though the developer is changed this attribute still my statement should work that's how we can do that so that is called customizations we

Speaker A

can do I will show you practically you will able to understand this so what I will do is Let's go back and and the same application I'm doing this get paste title. The last one is get test ID.

Speaker A

So locate an element based on its data test ID attribute. Other attributes can be configured. Uh this is more customizable, more flexible method. Other attributes also you can customize. I'll tell you how to customize. So when the text or role based locators are unstable or not suitable, we

Speaker A

have a get by text get by RO methods. All right. Sometimes they are not stable. In those cases, we can go with get by test ID. Okay. So let me show you how we can use this. If I go back to

Speaker A

our page, this particular page. So here I have something called email. Let's go to the email.

Speaker A

So what I want to do is I want to verify or I want to verify this email address is correct or not. Exactly. If I inspect this element, see you can see data test ID attribute is there. Data test

Speaker A

ID attribute is there. And this is the value of the attribute. So I can I get this element using data.est ID? Yes. So let us capture this element. So what is the value of this profile email? profile- email. So go back page dot get by test id specify the value of the test

Speaker A

id and this will return the element. So again this will return the promise and we can store in the web element. But instead of that I'm directly keeping this inside the expect method. Await await expect await expect ID. So this is a element dot to have text. To have text I'm just verifying this

Speaker A

text. What is the text? it should have email address. So this is the email address should have in that element. So this is our validation point. So what exactly I'm doing? I'm capturing the element using test ID and to have this is the value and similarly I will also add another

Speaker A

recession for another element. So look at the name John do. So inspect this element and here the test ID is what? Profile name. Go back profile name. So what is the name here? John D. So let's copy this.

Speaker A

Okay. This is another validation. Okay. So John 2, right? So two assertions I put on by using get uh by test ID. So by using the test id capture the element and put some validation. So both are perfectly fine. So as of now the test ID is whatever I have given in

Speaker A

this data test ID data test ID everything is perfect. So now let me run this test.

Speaker A

So it is launched my page and done every operation. So now let us see the report and here you can look at this. So get by test ID we captured the two elements and the values what we expected is got passed. Okay. Now it is a customizable asset. So what is a customizable

Speaker A

means? For example, as of now, if I look at this element or inspect this element, we have a data- test ID attribute. Data test ID, data - ID. And here we have used get by test ID method. Okay,

Speaker A

perfectly suitable. So, we are using the method get by test ID and here also we have a test ID.

Speaker A

Data test ID. Suppose tomorrow the developer has changed instead of data test ID. Instead of data test ID suppose they put something called data p uh pw or something else instead of test ID they put something else then our automation code will work or not that won't work right that won't work.

Speaker A

So let me show you if developer is got changed that attribute how exactly it will behave. So I'm just trying to change as of now data test ID is there right? So now I'm trying to change that in my file. Just observe carefully. I'm trying to change the attribute but not the value.

Speaker A

I'm trying to change the attribute but not the value. Now just observe. So previously what we have here data test ID data test ID. Now I'm refreshing the page.

Speaker A

After refreshing the page again try to inspect these elements. Just a second you just a moment guys. http I comment this.

Speaker A

Okay. So now I have done some changes. Now refresh the page. After refreshing just try to locate these elements once again. See this. Previously what we have data. ID. Currently what we have data dot data pw is there. So now even for the second thing also I have changed the attribute. Now if

Speaker A

I look at the name for the name also data pw for email also data pw. So the attribute itself have changed the names are same but attribute itself have changed. So not only data pw you can put like ID or you can put like name. Suppose tomorrow the developer has changed this attribute. So now

Speaker A

will our automation work? Will this work now? Let us go and execute and see have changed now.

Speaker A

Right? After changing will it work or not with the same method? So definitely that will fail.

Speaker A

So it is failed. See timed out 5,000 millconds wait for expert locker to have expected. So definitely this has got failed. See this is got failed. So why it is got failed? Because attribute itself is got changed. Attribute itself is got changed. But my scenario is I don't want

Speaker A

to change my automation test script. Still I want to use get by test ID. Same value I want to use but I want to make it work. I want to make this to work. So how it is possible? So

Speaker A

it is possible. So how it is possible? If I go back and see this attribute what is an attribute we have previously test ID we have currently data pw is there. So to customize it we need to go to configuration file playrator.config.ts ts and inside the configuration file uh you can see

Speaker A

some option here. Let me show you that option just a bit. So there is something called yes here use go to this particular section. So in this particular section here you need to add that attribute. So in this particular section you need to add that

Speaker A

attribute. Okay. So what is the syntax? Let me show you that. So everything is provided in their own documentation in their official website. So only thing is we just referring the their official documentation that's it. So we need to do some configuration here.

Speaker A

Let me show you that configuration. Very simple statement we need to add for a single statement.

Speaker A

Just a second. This is our PW demo projects. Okay. So let's go to this file. So in this particular file, so wherever you have this particular trace on first retry, so in the next statement, you need to add this attribute. So test

Speaker A

id attribute test id attribute colon in the singular double quotation. So what is an attribute we have uh we have in our application data pw2. So that you need to replace that's it.

Speaker A

So simple configuration we need to do this. Okay. So test ID attribute colon data pw. So when I add this enter. So what we have done here we have additionally configured data - test ID value or data test actually data.est ID is there. So the data test ID instead of using data.est ID we have

Speaker A

just added this data pw2. So once I added this you can just save this file configuration file.

Speaker A

Now if I execute without changing any code I'm just running the code this time and see this will work this time it's just simple configuration you can also do this by writing the code but instead of again writing the code this is very simple to do that okay now you can see

Speaker A

my test is got passed okay so this is how we can simply customize the test ID if you want like this. Okay. So you can customize any locator like this. So you can customize any locator. So get by test ID method is same that value there. So you can also modify the value. So any locator

Speaker A

suppose if I look at here this particular page currently data ped suppose if you want to make it as a name you can just make it as a name or you can make it as ID. You can make it as ID.

Speaker A

So whichever name you have given some XY Z you can give whatever name you want but the same name you need to customize inside config.ts file. So the same name whichever name I have given to that you need to customize here. So you no need to change the method. Method is same get by test ID only.

Speaker A

So by default this method is created for test ID data if test ID that is customizable attribute or customizable property. Okay. So the method name won't change the value also won't change the what will be changed only the attribute is changed previously test ID so now I have

Speaker A

make it as a something else and tomorrow you can make it as a name or tomorrow you can make it as ID so whichever attribute you want to change you can customize so that you need to specify inside the config.ts TS file. Okay. So this is only the method which is customizable.

Speaker A

Rest of methods are fixed. You cannot customize it. Okay. So these are all built-in locators in playright. Get by all text, get by text, get by role, get by label, get by placeholder, title and test ID. Okay. So just do one round of practice and also I will provide this HTML page

Speaker A

uh play rate h locators.html and just open the page in the browser. So you will see all these elements and you can also explore other elements. You can try to locate these elements using get by role and you can try this as an assignment. So you can locate these elements by using get by text.

Speaker A

You can locate these elements by using label. All seven type of locators have covered in the single page. You can try them. Okay. Suppose uh I'll show you one more important thing. Suppose you are opening this page on the locally, right? On the C drive somewhere. But if you want to open this

Speaker A

page just like a real web page like with a proper URL. I want to run this page on the server local server just like how we are accessing website like wwwhttp something like that. So you want to access this on your server. So that is simply possible. How it is possible? I'll tell you simple

Speaker A

tip. You guys can try. Even though if you're not possible, no problem. Even if you're not done, no problem. So how to set up a local server? Because we have some extensions are available for VS code editor. By using those extensions, we can run the web pages locally just like how real

Speaker A

websites are running on the web page. In the similar way, we can run them. So to do that, what you need to do is just create uh HTML file. So whatever the page I have displayed here for this I have one HTML file. So I will create that HTML file here. You can create wherever you want.

Speaker A

Not a problem. So on the test itself I'm creating a new file. I'll name it as app do. HTML. HTML is an extension. Okay. So in this particular app HTML so I will copy the code and this code is generated

Speaker A

me for me some time back. So you can have this code as it is. Don't change anything. I'm saving the file app.html. So now I want to open that file on the browser itself. I want to run this

Speaker A

HTML file on the local machine local server. So to run this you need to just right click on HTML. You will see one option called open with live server. But you by default you won't see this option. Open

Speaker A

with live server. You won't see this option. So to get this option we need to install one extension.

Speaker A

So we have a free extension we have to install in VS code editor. So to install that extension what we need to do is we need to just go to settings here. You can see something called extension option. Extension here search for live server. I already searched earlier. So you can see live

Speaker A

server. So once you search for live server you will see this the first option and you can just look at the name also because there are so many live server extensions are there you can see ritic day he is an author created this live server. So once you click on that live server here you will

Speaker A

see install button because I already installed so it will show you only uninstalled in your case it will show install button. So once you click on install it will take just a few seconds. After installation, just restart your VS code editor. Restart. So once you restarted your VS code editor

Speaker A

again, go back to the app.html and right click on it. Then you will see this option. So once you have installed that extension and once you restart your VS code editor, then you will see this option open with live server. So once you click on this open with the live server now we can see

Speaker A

that HTML is open on the browser and it is using my local IP along with some port number HTML.

Speaker A

So what is an advantage of this? Suppose every time if I want to do some changes on the page, what I should do? I need to go and back and go back to my HTML here and I need to do some

Speaker A

modifications every time and then again I have to open the URL on the browser. Right? So instead of doing that I want to whenever I want I whenever I do some changes on the HTML and the runtime automatically the changes should apply on the web page. Okay, that is will happen automatically.

Speaker A

Okay. For example, let's say currently this page is running. So let me close other pages. So this is my live page. My website is running on the server, right? So here this is my code. This is my server. This is my code. So what I will do is as of now if I inspect this element again

Speaker A

uh this element I'm inspecting as of now what is the attribute? We have data - pwd. Again I want to change this immediately. So what I can do I can go back to the script go down and uh comment.

Speaker A

I have commented those statements here. I just remove those statements. You can see I remove the statements. I keep those statements here. See as soon as I have done this change here immediately it is reflecting on the web page. Again if you see I'm just refreshing the page. Just refreshing the

Speaker A

page and inspect the element. See this data test id is back. So at the runtime if you your changes should apply on the runtime. If you want to apply your changes at the runtime dynamically you can use this option live server option. So now your HTML page is running on the website. So now you

Speaker A

can use this URL in your application. So go back to your test cases and instead of using your local URL this one you can simply use a live URL await dot await page dot go to and specify the URL.

Speaker A

Okay. So instead of using your local URL you can use your live server URL. So that URL keeps running until you close your VS code editor. Once you your VS code editor is got closed then URL will stop running. Okay. So this is an advantage of

Speaker A

uh installing live server. So this is very very helpful to practice certain things on the web page because sometimes we won't find everything in the websites. We need to refer different websites. So everything is available in one place. All playright locators,

Speaker A

built-in locators you can practice in one single page. Okay. So you can try this as an assignment.

Speaker A

There are multiple elements are there. So I have given very clear information on this. You can just try practice. So whichever action you want you can do and whichever validation you want you can do. But ultimate goal is you should be able to locate the elements using appropriate methods.

Speaker A

Okay. Yes. So as I said if the developer has changed this attribute. Okay. For example, instead of test ID, they made some other attribute. Then obviously what you need to do, you don't need to change your automation script. You can just go to config.ts and

Speaker A

whatever attribute the developer is got changed, just add that attribute here which is customizable. So simply you can avoid to change your automation script. So this feature is not there in automation or selenium. Okay, this is playright specific feature. Okay,

Speaker A

this is a customizable any attribute you can customize using get by test ID method. Okay, so that's it. So just do one round of practice all the methods. These are the methods are preferable by playright and secondary is CSS and third priority is XPath. So next classes

Speaker A

we will try to understand XPath and CSS. Okay. So we'll stop here. We'll continue in the next class.

Topics:PlaywrightTypeScriptlocatorsgetByRolegetByTextgetByLabelauto-waitingtest automationexpect assertionsQA

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