All right, so in this lecture, we're going to talk about how we can do network interception.
I mean, this is one of the another great feature that you can actually do as a part of your modern
Web app testing.
I mean, this network interception is a really, really cool concept.
I'm in I'm going to cover a lot in our next section about network interception in even more detail,
like not only network interception, but also how you can manage cookies and how you can hijack your
network in terms of creating your own one ad blocker kind of things.
I mean, that's going to be something that we'll be talking about in our next lecturer's as a lab section.
But today we're going to talk about a bit of what network interception is all about, because in this
section, we actually talking about the modern way of doing the testing on high level.
But yes, you need to know about network interception so that we can actually talk a lot about it in
our next section.
So an interception is actually a very good concept in terms of how you intercept the network before
the page is going to be rendered on the dome and how you are going to block some of the content or how
you're going to change the content of the page, or how you can intercept in a way that you can also
put your own resources off your machine or how you can set or proxies for the network and how you can
block that you are on and stuff.
I mean, you can do a lot.
I mean, imagination is your only place where you can keep the limitation of the network interception.
It is really, really cool because as you know, any time you actually go to your browser, let's say
if I go to Amazon.com website.
So this is the page which has been rendered on the Amazon.com website right now.
And you can see that there are so many resources available on this particular page at the moment, not
only just the DOM element that is so many images, the images can be of an image as we manage our image
or whatever it is.
And there will be a lot of resources loading behind the scene, not just the data of the image or something
like that, but also you could see if I go to the application, you can see that there are so many items
being loaded.
And if you go to the network, let me try to refresh this.
You can see that a lot of resources are being pulled behind the scene.
These are just exegete.
I'm just pulling.
If I just put all you can see, there are so many data.
And if I go to the security, you could see that there will be a lot of other data loading up as well
from Secure Origin that are so many data's been loading up.
So there are so many things that this particular website is loading behind the scene.
And that's why Apple is trying to block many of these pages, like some ad resources every time in their
safari browser.
So if I just open Safari browser and if I just put Amazon.com over here, you can see that there is
a shield coming in.
And if I click this shield over here, you can see that it tells that Amazon.com, one tracker implemented
from the profile from profiling you and this tracker is the Amazon ad system dot com.
So similarly, I mean, this Amazon is more legit.
I mean, they don't really need to do a lot of tracking on you because their ad system itself is more
than enough for tracking.
But if you go to some other website, let's say your Internet, and if you see the ad trackers that
are for the 19 trackers have been prevented profiling you.
And you can see that there are so many trackers running behind the scene just to trackers.
So these kind of things we can actually block using mini software like safari sites are doing it for
us.
But similarly, Chrome, you can put some plugins like ad blockers and things.
I mean, you can intercept these kind of network traffic and you can also do all sorts of things yourself
if you want to.
But in this lecture, we are actually going to see how we can actually interest a basic image.
But the next section, we'll see how we can build our own ad blockers kind of stuff.
So what I'm going to do is because as long as I can see here that there are going to be a lot of resources,
which is like JPEG file like that.
So these are image files.
So if I want to block all these contents over here, I could be able to intercept the network.
So I'm just going to call this network intercept and over here I'm actually going to copy paste the
code that we have already written, probably from the trade start JS So this code probably I'm not going
to use this whole quarter, by the way, but I just wanted this at the moment for the basic coding.
And what I'm going to do is I'm just going to remove all these code.
And over here I actually need just the Amazon.com website here and I'm actually going to do the interception
of the network.
So in order to intercept the network in Puppeteer, there is a method called on method, but in playwrite
they have changed this to around.
So you can just do.
Something like a wait page dot, there is something called a shroud, so if you use the root method,
you could actually intercept the nature of using that.
So you could put something like a star star star, like a wild card.
And then you can put all the images, which is sitting inside that like PMG or GBG or GBG or SWG, things
of that nature.
So you can intercept all these images that is coming up.
And then you can also put a request here like this.
So whatever cross which is coming under this particular extension, like the images, you can actually
intercept that.
So it'll be coming over here.
And then I'm going to use a symbol and over here I'm just going to do and condition.
So if the request request dot, there is something called a resource type.
So you can see there are many different methods available.
The one which I'm going to be using this time, it's going to be the resource type.
But we'll talk about the other things later in this course, in our next section.
But as of now, just let it be.
This is what we'll be discussing and this is going to be the image and within this image.
So if you see a resource type image, then what you can do is just do this request, dot a board.
So if you see any of the resource type estimates, just about the particular request, if not, you
can just do an LS off request dot continue something like this.
So if you do that, then it is going to block all the images within the page.
So I'm just going to put a problem and a common despicable piece of code that's going to save this.
And then I'm going to do node of network intercept or just run the test run can see that is opening
the browser and you can see that within this particular Amazon.com, there is no image being loaded.
So if I try to inspect the element at the moment, they can see that all the images are not loaded.
And so all it's telling that is a fail to load the resource.
And there is an error failed because we have intercepted the network and we have blocked all the request,
which is sent from the browser, and it is blocked because we have blocked it over here on our client
site.
So it's just blocked at the online site.
I mean, the server side is still going to so the images for you, but we have blocked it in on browser.
So this is how we can do the network interception.
This is not just the image interception that we can do.
We can also intercept the network request.
We can also intercept the user that we want to intercept and stuff.
I mean, we can talk about that in our next section.
But yes, this is what the network interception in playwrite.