So far you have seen how to mark API

request and how to mark API response in

playrite. In this video I will discuss

how to mark APIs from HR file. So

firstly we will see how to record the HR

file and how to modify the HR file and

how to reply from the HR file as a

response to the API.

So recording the HR file is it is very

easy and simple. So simply we have to

use the browser context object dot root

from HR method. So we have to call to

this method and then we have to pass the

two object first sorry two parameters.

The very first one is the location where

we want to generate the HR file and

second one is the object and inside this

object so we are passing the URL and

then we are passing the another flag as

true or false. So when we are recording

the HR file so we have to set this flag

as true and second time no need to set

for the true you can pass it as a false

when you are running in the like if you

do not want to generate the another hr

file. So let's look at the whole test

how exactly it looks like. So firstly

here we are mocking the API by using the

HR file and then so after navigating to

this URL we are

verifying this particular text is

visible in the web page or not. So when

you record the HR

file so in this particular location or a

folder so you'll be seeing the two

files.

The first one is dot bin fold sorry bin

file and second one is HR file. Dot bin

file contains the webpage data and uh HR

file contains the web application

information. So we will be adding the

mocked test data inside the bin file. If

you if I scroll a little bit down. So

we'll be adding

the marked test data inside the bin bin

file like

this. Right? So let's see how to

automate

the API marking from the HR file. Let's

quickly create a spec

file under the chapter

6. So here I will give the spec file

name

as

11ore. So here I'll say

mock

from HR

file dotspec dot

ts. So that's it. So here I will go to

the one of the previous spec file. So

simply I will copy the test from the

previous spec file. So I'll paste it. So

let me maximize this window. So I will

delete all the stuff which is not

required for us and then let's update

the title here. So here I'll say mock

API

from HR file in

playright. So firstly we have to

generate the HR file right. So here I'll

use the await followed by page dot.

Then here I'm calling to the method

called root from HR. So here we have to

pass the two parameter. First one is the

location where we want to generate the

HR file and the bin file. Then next one

is the object. Correct? So here we have

to set the two property. one is the

URL and

then second we have to set the update

flag. So first time you need to set this

flag as true to generate the HR file. So

if you want to generate the new HR file

every time that means you can use the

that means you can set the update as

true. If you do not want to generate the

HR file every time, so you can set this

flag for the

false. So let's pass the URL here. So it

will say star slash

star and then here I'll say slash. So

let's copy the

URL. So as well we are using this same

web

application demo.dev/

play.dev/ API- mocking. So here we are

using this fruits API. So let's copy

the this API

URL and let's add the URL

here. And here we have to say where we

want to generate

the HR file. So here I'll

said

current project root folder. So that's

the reason I here I'm saying dot

slash. So I will say create HR folder

and inside this you create a

fruits dot HR

file. So that's it guys. So here we are

mocking from the means here we are

recording

the recording a HR

file. So next

step. So here we have

to go to the URL.

Then at the end we need to validate the

text. So that's it. Let's navigate to

the URL by

using go to method. So it will say go to

and here we need we have to pass the

URL. So let's get the URL from here.

and I will paste it inside the go to

method.

Then so let's validate the text by using

the expect. So it will say

expect and inside the

expect. So we have to pass the element

right. So it will say page dot get

by

text. And here we have to pass the text

and I'm checking whether it is visible

or not. So it will set to be

visible. So let's pass the text. So

after navigating to this URL, so I want

to

validate very first fruit name called

strawberry. So this text should be there

in this web page. That's what I'm trying

to validate here.

So that's it guys. We are done with

writing

the simple test where we

are doing the API marking from the HR

file. Now it's a time to run the this

particular text. Right? So by using this

terminal I'm going to run the this spec

file. So here I'll say

npx followed by

playright test and here I will specify

the location of

the spec file. So here I'll copy the

relative path and I'll paste it here. So

after running the test and you'll be

able to see you'll be able to see the HR

folder here. Under that HR folder you'll

be able to see the two files. one is the

HR and second one is a bin file. So

let's run the

test. So our test is working now and if

you see here so our test is passing and

on the left side so here you can see

that so HR file is generated sorry

folder is generated and inside

that so we have the one is a bin file

which contains the data from the web

page and second one is

the HR file which contains the

information about the API or a web

application. So once you record the HR

file, so you need to set this update

flag as a

false. So that's it. Now let's run the

same test once again and it should get

pass without any issues.

And if you see here, so our test is

perfectly working fine and we are able

to record the HR file. Now let's add the

mocked test data inside the bin file. So

so far we are validating the only one

data which

is strawberries present or not in the

web application. Right? So let's add the

mocked test data or a mocked data and

then we will verify that marked data is

present in the web page or not. So here

I'll

pass the very first mock data

as playright type

script

by tester

stock and

similarly I will add three set of test

data. So it will say playrate JavaScript

by tester stock. Then here I'll say

third one

as Cyprus by tester stock. Then fourth

one

is API testing

by tester

stock. So that's it guys. So I will keep

only three set of data in the web

application.

So rest I will delete

it. So let's validate all the data. So

as of now we are valid validating just

strawberry as a fruit. So let's assert

the another four

text. So simply I will go to the spec

file

here. So let me maximize this.

So in the line number 20 just we are

validating the strawberry is present or

not. So let's validate the

another four texts are present in the

web page or not. So let's copy

the text from the bin bin file.

So here I'm making sure that mocked data

is present in the web

page by using the

assertions. So I'm adding the second

assertion. Let's add the third

assertion. And then let's add the last

assertion as API testing

by test

stock. That's it guys. So let me format

this code and then we will run the

code. So that's it guys. So let's run

the

test. And if you see

here, so if I see my VS code, our test

is passing. And if I open the browser,

so we are able

to mock the four set of test data here,

right? So strawberry is already present

in the web

page right and on top of that so we are

marking the four set of test data or

four texts we have added here correct.

So let's check out the report

also. So if I go to the index.html

report here also our test is

passing and if I see the screenshot

also so it is the it is it has captured

from the our test case execution. Right.

So this is how you can do the API

mocking from HR files and playright.