1
00:00:00,300 --> 00:00:07,320
Hi, guys, welcome back to another section of our course into test automation with playwrite, as you

2
00:00:07,320 --> 00:00:11,820
can see that this section is going to be a complete Hands-On lab section.

3
00:00:12,180 --> 00:00:13,920
I don't even have a slide at this time.

4
00:00:14,130 --> 00:00:17,270
I mean, I have completely stopped showing any presentation slide.

5
00:00:17,370 --> 00:00:20,760
At least I'm not showing any presentation slide in this whole course.

6
00:00:20,940 --> 00:00:26,250
And I'm not going to show you on a single slide in this particular section, because this section is

7
00:00:26,250 --> 00:00:28,140
going to be a complete hands on section.

8
00:00:28,530 --> 00:00:35,310
So in the section, we are actually going to see how we can perform a Hands-On operation of creating

9
00:00:35,310 --> 00:00:41,910
our own ad blockers are working with cookies, intercepting the network request even more further away,

10
00:00:41,910 --> 00:00:47,580
like more advanced way, and also how we can perform the testing, the creation of our site and how

11
00:00:47,580 --> 00:00:50,820
we can interact with the site and even more better way and things of that nature.

12
00:00:51,030 --> 00:00:56,070
I mean, all these days we have been working too much towards the feature of the playwright or understanding

13
00:00:56,070 --> 00:00:57,660
the basics of the playwright and stuff.

14
00:00:57,660 --> 00:01:00,180
But this section is going to be more like an Hands-On.

15
00:01:00,330 --> 00:01:06,220
And this is very, very important to understand that I'm going to be covering a lot of advanced concepts

16
00:01:06,220 --> 00:01:08,310
at this time, not too much of basic.

17
00:01:08,320 --> 00:01:14,940
So you will be seeing a bit of a combination of the basic JavaScript and a bit of advanced JavaScript

18
00:01:14,940 --> 00:01:16,020
in this particular section.

19
00:01:16,030 --> 00:01:17,130
So please bear with me.

20
00:01:17,220 --> 00:01:19,020
You can easily know what I'm doing.

21
00:01:19,020 --> 00:01:23,670
But if you have some questions or things of that nature, just Google it or send me a question.

22
00:01:23,670 --> 00:01:25,220
You will be fine with those answers.

23
00:01:25,230 --> 00:01:29,730
You should be having all the understanding pretty quickly while I'm completing this particular section.

24
00:01:30,180 --> 00:01:30,660
All right.

25
00:01:30,670 --> 00:01:37,500
So without it wasting our time, I'm going to start working with creating our new Section six project.

26
00:01:38,260 --> 00:01:45,570
So I'm just going to go to a are you Udemy Section six?

27
00:01:50,420 --> 00:01:56,510
All right, so now that you can see that, how could it a simpler project once again and I have a folder

28
00:01:56,720 --> 00:02:02,020
called Network then that I'm creating a new file called Adblock Blocker Dodgiest.

29
00:02:02,360 --> 00:02:08,150
So this time we are actually going to be doing the network interception like we did in our earlier video

30
00:02:08,150 --> 00:02:10,750
while we were talking about the network interceptions and stuff.

31
00:02:10,970 --> 00:02:15,830
I'm going to be doing exactly the same kind of code this time, but just that we are going to be intercepting

32
00:02:15,830 --> 00:02:19,250
the network request in an even more advanced way this time.

33
00:02:19,280 --> 00:02:21,600
I mean, it's going to be video to simplify, understand the concept.

34
00:02:21,620 --> 00:02:22,880
It's not a rocket science at all.

35
00:02:23,030 --> 00:02:26,900
But I will show you how you can actually use it for your work and stuff.

36
00:02:27,170 --> 00:02:31,490
So I'm just going to copy some of the code that we wrote in our earlier section.

37
00:02:31,940 --> 00:02:37,640
So I'm just going to copy this and I'm going to go open the Section six once again so that I don't really

38
00:02:37,640 --> 00:02:40,770
need to keep writing the code again and again.

39
00:02:41,300 --> 00:02:41,850
There you go.

40
00:02:41,910 --> 00:02:42,770
A of that.

41
00:02:43,010 --> 00:02:48,200
And if you remember, we are actually blocking the resources in our last video.

42
00:02:48,500 --> 00:02:52,640
But this time I'm not actually going to be interested in blocking the resources.

43
00:02:52,640 --> 00:02:58,280
Rather, I'm interested in blocking the ads, which is being loaded on a page.

44
00:02:58,610 --> 00:03:05,180
For example, if I could able to show you this particular website, the new dot net website, if I just

45
00:03:05,180 --> 00:03:10,940
try to refresh this particular page, you could see that there are a lot of other Desmonte running on

46
00:03:10,940 --> 00:03:11,750
this particular website.

47
00:03:11,780 --> 00:03:14,420
You can see that there's an ad for this guy.

48
00:03:14,750 --> 00:03:23,180
And if I just scroll a bit and you can see that there is going to be an ad over here, there's a Christmas

49
00:03:23,180 --> 00:03:26,720
card and there are some deals, I think deals are not an ad.

50
00:03:26,720 --> 00:03:28,820
So these are related to this particular website.

51
00:03:28,820 --> 00:03:30,110
So we can't really blog that.

52
00:03:30,590 --> 00:03:36,440
And if we just go all the way down like that, sometimes there will be ad in the middle of this particular

53
00:03:36,440 --> 00:03:37,280
page itself.

54
00:03:38,060 --> 00:03:43,340
If you just scroll, probably you will know there is some ad coming up on the middle of this pages as

55
00:03:43,340 --> 00:03:43,560
well.

56
00:03:43,970 --> 00:03:49,850
So so, yes, I mean, these are some of the places you can actually blog the ads and you can make sure

57
00:03:49,850 --> 00:03:52,670
that the page is not loading with so many ads.

58
00:03:52,940 --> 00:03:54,850
You can actually see these ads as well.

59
00:03:54,860 --> 00:03:57,950
If you just do the inspect, go to the security.

60
00:03:58,310 --> 00:04:07,520
And if you try to refresh now, do you see that there are so many users loading up and there are many

61
00:04:07,520 --> 00:04:09,310
ads actually loading up as well?

62
00:04:09,650 --> 00:04:14,570
Some of the ads are like, you can see that Google ads dot, dot net.

63
00:04:15,230 --> 00:04:19,730
Similarly, there is a static dart ad safe product or dot com.

64
00:04:20,060 --> 00:04:26,270
And I think there are so many ad Web site which you can you can easily see like Amazon's ad system,

65
00:04:26,270 --> 00:04:27,320
dot com, something like that.

66
00:04:27,600 --> 00:04:32,810
So they have so many ads and you can see that there is in the middle suddenly on the page, there is

67
00:04:32,810 --> 00:04:34,770
one more ad coming up as well.

68
00:04:34,790 --> 00:04:36,160
So there are a lot of ads.

69
00:04:36,560 --> 00:04:42,550
So we need to block all these ads and make this particular site more like like an ad blocker.

70
00:04:42,770 --> 00:04:47,690
So if I want to create an ad blocker for the site, I actually need to intercept all this request,

71
00:04:47,690 --> 00:04:53,000
which is highly impossible because I don't really have any database of all these ad side and things

72
00:04:53,000 --> 00:04:53,550
of that nature.

73
00:04:53,720 --> 00:04:59,450
So if I want to do that, for example, if I need to do that, I'm actually going to write a code which

74
00:04:59,450 --> 00:05:03,530
I actually extracted like a mini ad database.

75
00:05:03,530 --> 00:05:14,990
So I'm going to say a mini ad database and I'm going to say const mini ad DB, which is going to be

76
00:05:14,990 --> 00:05:16,010
looking something like this.

77
00:05:16,010 --> 00:05:20,360
You can see that I have ad services at Google Earth Service or Google that are in there because I'm

78
00:05:20,360 --> 00:05:21,020
living in NZ.

79
00:05:21,020 --> 00:05:28,340
So that's why they have this ad service as well and some normal generic ad ads, which are something

80
00:05:28,340 --> 00:05:29,000
we can block.

81
00:05:29,420 --> 00:05:34,480
And then we need to intercept the network request and we'll see how we can do that.

82
00:05:34,580 --> 00:05:37,820
I mean, we can do the exact same thing based on drought.

83
00:05:38,120 --> 00:05:46,370
And instead of the resource or something like this, we can actually do a asterisk dot asterisk, which

84
00:05:46,370 --> 00:05:53,150
means sorry, slash at asterisk, which means you can actually intercept all the request, which is

85
00:05:53,150 --> 00:05:54,740
going to come in over here.

86
00:05:55,130 --> 00:05:55,490
Right.

87
00:05:55,710 --> 00:06:01,400
And I'm going to make this guy around instead of a request, because that makes even more sense here.

88
00:06:01,550 --> 00:06:07,490
And I'm going to say that if the request dot instead of resource type, this time I'm going to use a

89
00:06:07,490 --> 00:06:14,360
U r and then I'm going to say probably I'm just remove this guys and I'm going to say consed probably

90
00:06:14,370 --> 00:06:18,100
will create some u r, which is going to be something I will be using.

91
00:06:18,110 --> 00:06:22,400
So road dot request dot.

92
00:06:23,340 --> 00:06:28,980
You are so I'm just going to store all the jewels over here, which I can get it from the request,

93
00:06:29,250 --> 00:06:35,310
and then I'm going to say if Minnie Adibi arbitration here of some.

94
00:06:36,450 --> 00:06:44,660
Of D says that the you are a lot starts with that you are, which is available within this particular

95
00:06:44,660 --> 00:06:44,940
area.

96
00:06:44,990 --> 00:06:51,440
So if any of the you are just going to start with this particular array is there, then just do and

97
00:06:52,130 --> 00:06:54,410
roud dot apart.

98
00:06:54,560 --> 00:06:57,530
Remember the one that we were doing in our last section?

99
00:06:57,840 --> 00:06:58,880
That's exactly it is.

100
00:06:59,210 --> 00:07:00,700
So you can do an about here.

101
00:07:01,160 --> 00:07:04,610
Yells You can continue with that particular round.

102
00:07:04,610 --> 00:07:06,740
So just say that's it.

103
00:07:07,130 --> 00:07:13,550
So this way, what happened is basically you are actually doing an interception of the network of all

104
00:07:13,550 --> 00:07:14,030
these.

105
00:07:14,870 --> 00:07:15,340
You are.

106
00:07:15,710 --> 00:07:20,180
And if any of this, you all comes in, just try to block those.

107
00:07:20,180 --> 00:07:22,220
You are all over here.

108
00:07:22,520 --> 00:07:25,120
If not, just continue with your execution.

109
00:07:25,280 --> 00:07:25,870
That's it.

110
00:07:26,240 --> 00:07:27,080
That's the only thing.

111
00:07:27,440 --> 00:07:34,370
And of course, the site is Neoh with dot net, something like that.

112
00:07:34,640 --> 00:07:35,540
That's going to stay with us.

113
00:07:36,240 --> 00:07:36,700
That's it.

114
00:07:37,640 --> 00:07:40,760
And if you do that, it is going to intercept the network right now.

115
00:07:41,090 --> 00:07:50,420
So now I'm going to just go to the network folder and I'm going to do node of the network about Dargis.

116
00:07:52,120 --> 00:07:58,060
You can see that the site is being loaded and you see that that particular site doesn't really have

117
00:07:58,060 --> 00:08:00,480
any ads on the top, it was displayed before.

118
00:08:00,820 --> 00:08:05,370
And if I just keep scrolling down all the way, there is not what I meant here as well.

119
00:08:05,380 --> 00:08:07,210
It's been blocked, very intelligent.

120
00:08:07,670 --> 00:08:12,370
And if I just keep scrolling all the way down, there is no indictment here as well.

121
00:08:12,880 --> 00:08:15,250
And there is no entertainment in the middle of the page.

122
00:08:15,250 --> 00:08:17,950
And this site looks pretty good right now, guys.

123
00:08:17,960 --> 00:08:19,430
I mean, this is cool, right?

124
00:08:19,750 --> 00:08:24,330
I mean, we don't really have any Diceman at least less advertisement than before.

125
00:08:24,610 --> 00:08:33,070
So if I just go and inspect and if I just go to the security, probably you can see that there will

126
00:08:33,070 --> 00:08:34,120
be some entertainment.

127
00:08:34,120 --> 00:08:37,800
But I could also see there is no advertisement being loaded, which is pretty cool.

128
00:08:37,990 --> 00:08:45,280
So we have in fact built our own in-house ad blocker this time and we have blocked all the network request

129
00:08:45,580 --> 00:08:49,510
using a very, very super simple ad blocker.

130
00:08:49,510 --> 00:08:54,850
But this ad blocker may not work for your site if you try to use it, because these are the Adblock

131
00:08:54,850 --> 00:09:00,040
ads, which is being used on probably this site, but maybe that is going to be different for different

132
00:09:00,040 --> 00:09:00,460
sites.

133
00:09:00,640 --> 00:09:09,280
So if you tried to use one of the of the site which with which has so much of ads, this guy, I'm not

134
00:09:09,280 --> 00:09:10,660
sure how many ads they got.

135
00:09:10,860 --> 00:09:12,700
I think they have got a lot of ads as well.

136
00:09:12,940 --> 00:09:16,870
So I probably will try to see if we could able to block some of the ads from this particular website.

137
00:09:16,870 --> 00:09:20,020
So you can see that they have this particular ad over here.

138
00:09:20,410 --> 00:09:21,880
They have some ads here.

139
00:09:21,880 --> 00:09:26,730
They have this ad, um, definitely they have a lot of ads, of course.

140
00:09:27,160 --> 00:09:29,140
So I'm just going to close this.

141
00:09:29,740 --> 00:09:36,610
And instead of from your Internet, let's say I'm going to use the MacRumors and I'm just going to run

142
00:09:36,610 --> 00:09:40,510
that and see if these ads are being blocked as well.

143
00:09:41,240 --> 00:09:44,680
I could see that the main ad has been blocked, which is quite intelligent.

144
00:09:45,070 --> 00:09:50,380
And this ad is also being blocked over here.

145
00:09:50,470 --> 00:09:52,930
As you can see, it's empty, just quite cool.

146
00:09:53,470 --> 00:10:00,340
And they have just the articles, but they have no sign of any ads here.

147
00:10:00,340 --> 00:10:02,290
And they're just quite nice guys.

148
00:10:02,290 --> 00:10:09,460
We have really, in fact, built a very super simple ad blocker using a super cool mini ads database.

149
00:10:09,460 --> 00:10:14,070
So if you're trying to use this guy in any of your website, probably that'll work.

150
00:10:14,080 --> 00:10:18,400
I mean, I'm not guaranteeing that this is going to work for all the site because there will be a lot

151
00:10:18,400 --> 00:10:19,300
of new ads out.

152
00:10:19,300 --> 00:10:20,620
So the world might change.

153
00:10:20,890 --> 00:10:25,510
So but yes, I could see that it is working fine for now so that this guy this is how we can build a

154
00:10:25,510 --> 00:10:28,660
simple ad blocker using our network interception.

155
00:10:28,840 --> 00:10:29,050
No.

156
00:10:29,050 --> 00:10:35,380
Next video, we will discuss even further about the interception while we can actually intercept the

157
00:10:35,380 --> 00:10:39,670
network on any of the APIs and we can work with those jasen data.