1
00:00:00,120 --> 00:00:05,280
All right, so in this lecture, we're going to talk about the tracing operation, so if you just open

2
00:00:05,280 --> 00:00:10,880
the Google Chrome browser and if you just go to any one of the site, let's say you mapped out Solmi

3
00:00:10,890 --> 00:00:11,910
dot com website.

4
00:00:12,170 --> 00:00:14,100
It's a very, very lightweight application, as you know.

5
00:00:14,280 --> 00:00:19,800
And if you go to the inspect element and if you go to the performance tab over here, you can actually

6
00:00:19,800 --> 00:00:21,690
see a lot of performance metrics.

7
00:00:21,960 --> 00:00:27,340
Basically, all you want to do is if you hit this record button, it will start profiling the website.

8
00:00:27,390 --> 00:00:30,560
So if any operation that you do over here, it's going to be recorded.

9
00:00:30,600 --> 00:00:36,540
So if I just go over here and if I typed my username and password and if I hit the login, you can see

10
00:00:36,540 --> 00:00:41,730
that it is actually doing all the performance metrics for you over here, like how much time it is taking

11
00:00:41,730 --> 00:00:46,500
for you to login to that particular website and what's happening behind the scenes and things of that

12
00:00:46,500 --> 00:00:46,830
nature.

13
00:00:47,130 --> 00:00:52,410
So all these things are being recorded and every operation that you do is going to be available for

14
00:00:52,410 --> 00:00:54,510
you on the profiling section over here.

15
00:00:54,540 --> 00:00:56,100
So this is one of the cool thing.

16
00:00:56,100 --> 00:01:02,020
That is something available already in the Chrome browsers, and that is also called a lighthouse.

17
00:01:02,040 --> 00:01:05,180
We'll be talking about that in our next section, probably, but not in this section.

18
00:01:05,370 --> 00:01:08,230
But, yes, these are something which is already available for you.

19
00:01:08,250 --> 00:01:13,350
So this is going to be generating a massive amount of data once the profiling is being done.

20
00:01:13,560 --> 00:01:19,350
And it's going to show you like how much time the page is loading, like 10 milliseconds and the scripting,

21
00:01:19,350 --> 00:01:25,470
it's taking 101 milliseconds and the rendering is taking 49 milliseconds and stuff.

22
00:01:25,480 --> 00:01:27,360
So it's going to tell you all those details.

23
00:01:27,700 --> 00:01:32,220
And it also tells you, like the interactions and stuff, you can also see there is something called

24
00:01:32,220 --> 00:01:33,030
as a screenshot.

25
00:01:33,030 --> 00:01:37,750
If you just scroll over there, you can see that all the screen shots comes in for you.

26
00:01:38,070 --> 00:01:42,120
So these are some of the cool things that you can actually see visually, like what's happening.

27
00:01:42,480 --> 00:01:44,510
So this is one way of doing it.

28
00:01:44,520 --> 00:01:48,810
So this is the best thing that you can do for your site testing.

29
00:01:48,810 --> 00:01:54,720
And you can see how much time it is going to take, just like not the normal are loading and stuff,

30
00:01:54,720 --> 00:01:56,970
but also the performance of the site and stuff.

31
00:01:57,000 --> 00:01:58,320
So this is really, really cool.

32
00:01:58,560 --> 00:02:03,990
It is already there in Chrome browser for a long time right now, and that's exactly what we'll be doing

33
00:02:04,110 --> 00:02:08,420
in our playwrite and we'll see if we could be able to extend that in the playwright as well.

34
00:02:08,640 --> 00:02:13,800
So for doing that, I'm just going to create a new file called us Stress Dot.

35
00:02:15,060 --> 00:02:17,450
I mean, you can use TypeScript if you want.

36
00:02:17,460 --> 00:02:18,630
I'm just going to go with the JS.

37
00:02:18,630 --> 00:02:23,270
I mean, it's pretty much the exact same like how we saw in our testers demonstration.

38
00:02:23,400 --> 00:02:24,740
So it's exactly the same thing.

39
00:02:24,750 --> 00:02:31,920
So I'm just going to do that today as Dages and I'm just going to go over here and, you know, the

40
00:02:31,920 --> 00:02:35,970
rest of the things like how are we going to do the site openings and stuff?

41
00:02:35,970 --> 00:02:39,360
So I'm just going to copy paste some of the code that I have already written, because those things

42
00:02:39,360 --> 00:02:43,340
are pretty much exactly the same thing that we always used to do.

43
00:02:43,590 --> 00:02:44,850
So I'm just going to do that.

44
00:02:45,150 --> 00:02:50,670
And I'm also going to copy some of the code on our site loading, which is going to be pretty much exactly

45
00:02:50,670 --> 00:02:52,580
the thing that we always try to do.

46
00:02:52,770 --> 00:02:54,600
So I'm just going to do that as well.

47
00:02:54,660 --> 00:02:55,270
There you go.

48
00:02:55,290 --> 00:02:57,720
So now we have the whole code over here.

49
00:02:58,410 --> 00:03:02,160
So this is something we always try to do and we know this is going to work as well.

50
00:03:02,520 --> 00:03:07,510
But now we are going to introduce this tracing option and we'll see how it actually works.

51
00:03:07,830 --> 00:03:14,460
So for that, all I want to do is I am going to do a stock tracing option available on the browser level.

52
00:03:14,730 --> 00:03:19,490
So if you go to this particular browser, sorry.

53
00:03:20,700 --> 00:03:29,490
This particular Chrome browser, and if you go to the types of the Chrome browser or something like

54
00:03:29,490 --> 00:03:36,420
that, and if you go to the browser and if you just search for something like TREIS, you can see that

55
00:03:36,420 --> 00:03:38,670
there are many different trading available.

56
00:03:38,940 --> 00:03:42,180
The one which we looking at is the top trading, this one.

57
00:03:42,690 --> 00:03:48,000
So this start raising is actually going to start the tracing of your application.

58
00:03:48,030 --> 00:03:53,260
And it's telling that only one trace can be accurate at a time per browser so you can start to start

59
00:03:53,260 --> 00:03:53,730
trading.

60
00:03:53,910 --> 00:03:55,530
So you need to have only one start trading.

61
00:03:55,530 --> 00:03:56,680
If not, the test is going to fail.

62
00:03:57,030 --> 00:03:59,730
You can also include a screenshot of the given page.

63
00:04:00,030 --> 00:04:01,830
That's exactly what we saw over here.

64
00:04:01,860 --> 00:04:06,420
So if the screenshot checkbox is enabled or you can actually capture the screenshot as you are seeing

65
00:04:06,420 --> 00:04:10,130
in here, that is exactly what you can do on the trading as well.

66
00:04:10,320 --> 00:04:14,280
So we can do that over here as well and we can see how it actually works.

67
00:04:14,610 --> 00:04:18,900
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

68
00:04:18,900 --> 00:04:20,430
much, much smaller.

69
00:04:21,250 --> 00:04:22,710
I mean, very, very lesser.

70
00:04:23,160 --> 00:04:31,080
So if I just go over here and if I just do something like a great browser dot start trading, that's

71
00:04:31,080 --> 00:04:31,260
it.

72
00:04:31,260 --> 00:04:33,930
And then you can see that there is something called a stop raising as well.

73
00:04:34,260 --> 00:04:42,920
So if I just put a stock trading and I'm just going to put the page, which I'm going to be trading,

74
00:04:42,930 --> 00:04:44,280
so this is going to be our page.

75
00:04:44,670 --> 00:04:49,830
And then we also need to include the pad and the path is going to be.

76
00:04:50,790 --> 00:04:58,760
The name of the file, so I'm just going to call this as Trace Dot John or something like that.

77
00:04:58,780 --> 00:05:02,690
So this is going to generate the performance tracing for us.

78
00:05:03,060 --> 00:05:04,680
And what is this is standard.

79
00:05:04,690 --> 00:05:06,330
You can stop at any point of time.

80
00:05:06,330 --> 00:05:11,040
I mean, you can just capture the browser loading if you want, or you can just trace just until the

81
00:05:11,040 --> 00:05:16,350
login click and stuff, or you can generate the tracing for the whole operation that you're performing

82
00:05:16,500 --> 00:05:19,630
and you should close this crazing before the browser quit.

83
00:05:19,890 --> 00:05:20,210
Yeah.

84
00:05:20,460 --> 00:05:22,620
So you're going to do something like stop raising here.

85
00:05:22,750 --> 00:05:26,430
So once you do that, it is going to generate the whole tracing information for you.

86
00:05:26,880 --> 00:05:30,960
Let me try to quickly run this and see how it actually works for doing that.

87
00:05:31,260 --> 00:05:37,500
I'm just going to go north, Trace Dargis, and I'm gonna hit run so you can see that it is going to

88
00:05:37,500 --> 00:05:42,690
start the browser and it's going to do all the usual stuff, which actually does.

89
00:05:44,460 --> 00:05:47,420
For some reason, I could see that the site is going pretty slow.

90
00:05:48,390 --> 00:05:49,060
There you go.

91
00:05:49,080 --> 00:05:49,620
It's done.

92
00:05:49,950 --> 00:05:54,250
And then it should have started recording the trace and it's closing the browser.

93
00:05:54,810 --> 00:06:00,180
So now you can see that if you should get a JSON file, which is nothing but the truth is Dages on file

94
00:06:00,240 --> 00:06:06,010
and this stage is on file, as you can see over here, has got enormous amount of data.

95
00:06:06,030 --> 00:06:12,180
I mean, a lot of data, which is like usually completely pretty hard to look at.

96
00:06:12,180 --> 00:06:16,470
And the Universal Studios complaining that the Taser, Jason, has a performance.

97
00:06:17,100 --> 00:06:23,580
The reason they have limited to just five thousand, uh, documents personal because it is super big.

98
00:06:24,150 --> 00:06:28,770
So this particular design file is now something available for us.

99
00:06:28,770 --> 00:06:32,660
And we can actually view this file as well, like how we did over here.

100
00:06:33,060 --> 00:06:36,900
So all they're going to do is you can see there is something called a lower profile in our browser.

101
00:06:37,110 --> 00:06:43,500
You can use this lower profile and you can actually go to the location of the file that we are actually

102
00:06:44,160 --> 00:06:44,820
working with.

103
00:06:44,820 --> 00:06:46,890
So which is nothing but Udemy playwrite.

104
00:06:47,190 --> 00:06:51,870
And then there is the state's Dages on file this whole year and file comes in, you can see the site

105
00:06:51,870 --> 00:06:54,210
is actually 1736 M.B.

106
00:06:54,390 --> 00:06:55,350
That is huge.

107
00:06:55,710 --> 00:06:57,690
And if I open that do you see that.

108
00:06:57,690 --> 00:07:02,790
It just brings me up the exact same information that I was looking for, like all those information

109
00:07:03,090 --> 00:07:07,470
which comes in over here, but just that we don't really have a screenshot at the moment because we

110
00:07:07,470 --> 00:07:12,210
have not captured any screenshot, but it gives you all the information, like what are the things that

111
00:07:12,210 --> 00:07:12,930
you are looking for?

112
00:07:13,200 --> 00:07:14,730
I mean, I know, right?

113
00:07:14,730 --> 00:07:17,490
I mean, there are so many things that we need to be worrying about.

114
00:07:17,490 --> 00:07:20,360
It's a lot of information over here.

115
00:07:20,370 --> 00:07:25,830
It tells you, like all the information that is actually coming in, like these informations.

116
00:07:25,980 --> 00:07:30,390
And also there are some information on the country and the event logs and stuff.

117
00:07:30,390 --> 00:07:32,700
So there are so many different informations available.

118
00:07:32,700 --> 00:07:37,560
And which information we really require is something depends on what developers of your team is going

119
00:07:37,560 --> 00:07:38,730
to tell you to look at.

120
00:07:39,030 --> 00:07:43,980
But there are some places where you can look at exactly what you should be looking for.

121
00:07:44,250 --> 00:07:51,870
So, for instance, if you want to categorize it, to just look for a specific data, then you can look

122
00:07:51,870 --> 00:07:52,880
at that as well.

123
00:07:53,160 --> 00:07:59,850
So if you just maybe just find something like that or maybe just cat column, you can see there is a

124
00:07:59,850 --> 00:08:01,310
lot of categories coming in.

125
00:08:01,320 --> 00:08:03,690
So this category looks pretty much exactly the same.

126
00:08:03,990 --> 00:08:12,120
But there are some category, for example, the top level categories or dual timelines and stuff probably.

127
00:08:12,120 --> 00:08:18,860
I mean, the search for you can see that this category is by disabled, by default dev tools, our timeline.

128
00:08:18,870 --> 00:08:22,020
And similarly, you can just search for tool start timeline.

129
00:08:22,390 --> 00:08:28,890
Uh, if I just do something like that and if I had YANTO or maybe I just need to put the cat there.

130
00:08:28,890 --> 00:08:32,140
Yo, you can see that the cat of the timeline comes in.

131
00:08:32,160 --> 00:08:34,140
So this is something that you can view as well.

132
00:08:34,140 --> 00:08:38,910
So you can specifically choose which category that you want and then you can look for that particular

133
00:08:38,910 --> 00:08:39,640
stuff as well.

134
00:08:39,810 --> 00:08:44,550
So a lot of things you can do with the Trace Dages on file, a lot of things you can actually play around

135
00:08:44,550 --> 00:08:46,620
with the strategies and things of that nature.

136
00:08:47,010 --> 00:08:52,350
So the last thing which I'm probably going to do in this particular lecture is I can actually also add

137
00:08:52,350 --> 00:08:53,790
the screenshot asatru.

138
00:08:53,800 --> 00:09:00,480
So if I just see a screenshot as probably true, which means it is going to capture the screenshot for

139
00:09:00,480 --> 00:09:00,690
me.

140
00:09:00,990 --> 00:09:05,760
So I'm just going to run this test and see hopefully the site is going to load as expected.

141
00:09:06,900 --> 00:09:13,530
And we'll see if it is captured on the screen chart for us, which we can actually see from the chromed

142
00:09:13,530 --> 00:09:15,030
Dodo's performance tab.

143
00:09:16,470 --> 00:09:17,100
Oops.

144
00:09:17,290 --> 00:09:23,190
For some reason, the site is just breaking up just as it's already given up because the test is not

145
00:09:23,190 --> 00:09:27,020
working as expected, but that makes perfect sense.

146
00:09:27,330 --> 00:09:28,920
We could be able to see that it is failing.

147
00:09:29,190 --> 00:09:29,670
All right.

148
00:09:29,970 --> 00:09:33,270
So let's see if that is Dages and File has a different data at this time.

149
00:09:33,420 --> 00:09:36,290
I'm highly doubting if that's going to be there.

150
00:09:38,970 --> 00:09:45,150
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

151
00:09:45,150 --> 00:09:45,690
once again.

152
00:09:47,120 --> 00:09:48,950
Let's give a second shot of our website.

153
00:09:53,780 --> 00:09:55,380
All right, it's actually failing.

154
00:09:55,700 --> 00:10:00,020
I think there is something wrong with the hosting provider because it's something going wrong with that.

155
00:10:00,150 --> 00:10:04,460
But next video, I can show you how to actually run along with the screenshot.

156
00:10:04,460 --> 00:10:10,520
And we also need to discuss a lot more detail on the different trading informations, because this information

157
00:10:10,520 --> 00:10:11,660
is Leser.

158
00:10:11,870 --> 00:10:17,240
They can actually trace based on the category and stuff, which I can show you in our next video.

159
00:10:17,250 --> 00:10:21,760
But as of now, you can see that this is what it is and this is how you can do it.

160
00:10:21,770 --> 00:10:26,510
Raising's me our next video after fixing this Salmi dot com website.