All right, so in this lecture, we're going to talk about the tracing operation, so if you just open
the Google Chrome browser and if you just go to any one of the site, let's say you mapped out Solmi
dot com website.
It's a very, very lightweight application, as you know.
And if you go to the inspect element and if you go to the performance tab over here, you can actually
see a lot of performance metrics.
Basically, all you want to do is if you hit this record button, it will start profiling the website.
So if any operation that you do over here, it's going to be recorded.
So if I just go over here and if I typed my username and password and if I hit the login, you can see
that it is actually doing all the performance metrics for you over here, like how much time it is taking
for you to login to that particular website and what's happening behind the scenes and things of that
nature.
So all these things are being recorded and every operation that you do is going to be available for
you on the profiling section over here.
So this is one of the cool thing.
That is something available already in the Chrome browsers, and that is also called a lighthouse.
We'll be talking about that in our next section, probably, but not in this section.
But, yes, these are something which is already available for you.
So this is going to be generating a massive amount of data once the profiling is being done.
And it's going to show you like how much time the page is loading, like 10 milliseconds and the scripting,
it's taking 101 milliseconds and the rendering is taking 49 milliseconds and stuff.
So it's going to tell you all those details.
And it also tells you, like the interactions and stuff, you can also see there is something called
as a screenshot.
If you just scroll over there, you can see that all the screen shots comes in for you.
So these are some of the cool things that you can actually see visually, like what's happening.
So this is one way of doing it.
So this is the best thing that you can do for your site testing.
And you can see how much time it is going to take, just like not the normal are loading and stuff,
but also the performance of the site and stuff.
So this is really, really cool.
It is already there in Chrome browser for a long time right now, and that's exactly what we'll be doing
in our playwrite and we'll see if we could be able to extend that in the playwright as well.
So for doing that, I'm just going to create a new file called us Stress Dot.
I mean, you can use TypeScript if you want.
I'm just going to go with the JS.
I mean, it's pretty much the exact same like how we saw in our testers demonstration.
So it's exactly the same thing.
So I'm just going to do that today as Dages and I'm just going to go over here and, you know, the
rest of the things like how are we going to do the site openings and stuff?
So I'm just going to copy paste some of the code that I have already written, because those things
are pretty much exactly the same thing that we always used to do.
So I'm just going to do that.
And I'm also going to copy some of the code on our site loading, which is going to be pretty much exactly
the thing that we always try to do.
So I'm just going to do that as well.
There you go.
So now we have the whole code over here.
So this is something we always try to do and we know this is going to work as well.
But now we are going to introduce this tracing option and we'll see how it actually works.
So for that, all I want to do is I am going to do a stock tracing option available on the browser level.
So if you go to this particular browser, sorry.
This particular Chrome browser, and if you go to the types of the Chrome browser or something like
that, and if you go to the browser and if you just search for something like TREIS, you can see that
there are many different trading available.
The one which we looking at is the top trading, this one.
So this start raising is actually going to start the tracing of your application.
And it's telling that only one trace can be accurate at a time per browser so you can start to start
trading.
So you need to have only one start trading.
If not, the test is going to fail.
You can also include a screenshot of the given page.
That's exactly what we saw over here.
So if the screenshot checkbox is enabled or you can actually capture the screenshot as you are seeing
in here, that is exactly what you can do on the trading as well.
So we can do that over here as well and we can see how it actually works.
So for doing that, all I'm going to do is the line of code that I'm going to include is going to be
much, much smaller.
I mean, very, very lesser.
So if I just go over here and if I just do something like a great browser dot start trading, that's
it.
And then you can see that there is something called a stop raising as well.
So if I just put a stock trading and I'm just going to put the page, which I'm going to be trading,
so this is going to be our page.
And then we also need to include the pad and the path is going to be.
The name of the file, so I'm just going to call this as Trace Dot John or something like that.
So this is going to generate the performance tracing for us.
And what is this is standard.
You can stop at any point of time.
I mean, you can just capture the browser loading if you want, or you can just trace just until the
login click and stuff, or you can generate the tracing for the whole operation that you're performing
and you should close this crazing before the browser quit.
Yeah.
So you're going to do something like stop raising here.
So once you do that, it is going to generate the whole tracing information for you.
Let me try to quickly run this and see how it actually works for doing that.
I'm just going to go north, Trace Dargis, and I'm gonna hit run so you can see that it is going to
start the browser and it's going to do all the usual stuff, which actually does.
For some reason, I could see that the site is going pretty slow.
There you go.
It's done.
And then it should have started recording the trace and it's closing the browser.
So now you can see that if you should get a JSON file, which is nothing but the truth is Dages on file
and this stage is on file, as you can see over here, has got enormous amount of data.
I mean, a lot of data, which is like usually completely pretty hard to look at.
And the Universal Studios complaining that the Taser, Jason, has a performance.
The reason they have limited to just five thousand, uh, documents personal because it is super big.
So this particular design file is now something available for us.
And we can actually view this file as well, like how we did over here.
So all they're going to do is you can see there is something called a lower profile in our browser.
You can use this lower profile and you can actually go to the location of the file that we are actually
working with.
So which is nothing but Udemy playwrite.
And then there is the state's Dages on file this whole year and file comes in, you can see the site
is actually 1736 M.B.
That is huge.
And if I open that do you see that.
It just brings me up the exact same information that I was looking for, like all those information
which comes in over here, but just that we don't really have a screenshot at the moment because we
have not captured any screenshot, but it gives you all the information, like what are the things that
you are looking for?
I mean, I know, right?
I mean, there are so many things that we need to be worrying about.
It's a lot of information over here.
It tells you, like all the information that is actually coming in, like these informations.
And also there are some information on the country and the event logs and stuff.
So there are so many different informations available.
And which information we really require is something depends on what developers of your team is going
to tell you to look at.
But there are some places where you can look at exactly what you should be looking for.
So, for instance, if you want to categorize it, to just look for a specific data, then you can look
at that as well.
So if you just maybe just find something like that or maybe just cat column, you can see there is a
lot of categories coming in.
So this category looks pretty much exactly the same.
But there are some category, for example, the top level categories or dual timelines and stuff probably.
I mean, the search for you can see that this category is by disabled, by default dev tools, our timeline.
And similarly, you can just search for tool start timeline.
Uh, if I just do something like that and if I had YANTO or maybe I just need to put the cat there.
Yo, you can see that the cat of the timeline comes in.
So this is something that you can view as well.
So you can specifically choose which category that you want and then you can look for that particular
stuff as well.
So a lot of things you can do with the Trace Dages on file, a lot of things you can actually play around
with the strategies and things of that nature.
So the last thing which I'm probably going to do in this particular lecture is I can actually also add
the screenshot asatru.
So if I just see a screenshot as probably true, which means it is going to capture the screenshot for
me.
So I'm just going to run this test and see hopefully the site is going to load as expected.
And we'll see if it is captured on the screen chart for us, which we can actually see from the chromed
Dodo's performance tab.
Oops.
For some reason, the site is just breaking up just as it's already given up because the test is not
working as expected, but that makes perfect sense.
We could be able to see that it is failing.
All right.
So let's see if that is Dages and File has a different data at this time.
I'm highly doubting if that's going to be there.
No, I don't see it's been recorded so I can disclose the stress is on file and I will try it on this
once again.
Let's give a second shot of our website.
All right, it's actually failing.
I think there is something wrong with the hosting provider because it's something going wrong with that.
But next video, I can show you how to actually run along with the screenshot.
And we also need to discuss a lot more detail on the different trading informations, because this information
is Leser.
They can actually trace based on the category and stuff, which I can show you in our next video.
But as of now, you can see that this is what it is and this is how you can do it.
Raising's me our next video after fixing this Salmi dot com website.