1 00:00:00,210 --> 00:00:06,040 All right, in this lecture, we're going to talk about how we can do page emulation on playwrite. 2 00:00:06,060 --> 00:00:11,190 I mean, if you remember, we already discussed about the simulation while we were talking about broader 3 00:00:11,190 --> 00:00:12,180 context and stuff. 4 00:00:12,420 --> 00:00:15,280 That's exactly what we're going to be doing in this particular video aspect. 5 00:00:15,420 --> 00:00:21,570 What I'm going to do is I'm just going to create a concept here and then I'm going to do something like 6 00:00:21,570 --> 00:00:26,550 Devizes where I'm just going to do a required of playwrite. 7 00:00:27,240 --> 00:00:34,690 Or you can also do a come off for Devizes over here, which does the exact same thing. 8 00:00:34,710 --> 00:00:37,670 You don't have to do like two requires over here. 9 00:00:38,010 --> 00:00:42,660 And once you have this, you can then set the devices that you want to emulate for. 10 00:00:42,690 --> 00:00:49,230 So if you remember in our earlier video when we were working, we actually set the simulation over here. 11 00:00:49,230 --> 00:00:58,180 Something like concept of iPhone is equal to Devizes of iPhone, Leverne Pro or something like that. 12 00:00:58,200 --> 00:01:02,710 So you can choose that particular option and then you can set the devices. 13 00:01:03,000 --> 00:01:09,310 So in order to set the simulation, you actually need to set the simulation on the context level. 14 00:01:09,330 --> 00:01:13,770 So if you remember that something very, very important, you need to set that on the context level 15 00:01:14,100 --> 00:01:16,390 and not on the browser level or something like that. 16 00:01:16,830 --> 00:01:23,610 So for doing that, you're going to actually do it over here on this particular context that specify 17 00:01:23,940 --> 00:01:27,770 the device as the iPhone, which is quite good. 18 00:01:28,170 --> 00:01:32,070 And once you have this, you can also specify the video part if you want to. 19 00:01:32,070 --> 00:01:36,930 If you remember, we already have this particular video iPod where we can do things. 20 00:01:36,930 --> 00:01:42,210 So I can just do a video iPod and I'm going to specify. 21 00:01:44,820 --> 00:01:48,500 Video over here. 22 00:01:50,840 --> 00:01:56,750 Or you can just specify a folder name that you want to choose so you can do that as well, which is 23 00:01:56,750 --> 00:01:57,200 quite good. 24 00:01:57,230 --> 00:02:04,400 So this way you can actually do the emulation of the browser page based on the device landscape that 25 00:02:04,400 --> 00:02:05,120 you are looking for. 26 00:02:05,810 --> 00:02:08,630 So I'm just going to do a node of. 27 00:02:11,000 --> 00:02:16,880 The PDF Dages I'm actually doing it everything on the PDF itself instead of just. 28 00:02:17,780 --> 00:02:23,870 Creating a new one, because this makes much better sense, you can see that on this particular Malaysian, 29 00:02:23,870 --> 00:02:29,180 it really didn't find that particular that particular login username and password does actually have 30 00:02:29,180 --> 00:02:30,700 to scroll that a bit. 31 00:02:30,950 --> 00:02:34,430 So we actually need to see how we could able to do that. 32 00:02:35,040 --> 00:02:42,620 But instead of the landscape, probably I'm just going to go with the Permax and if I try running it 33 00:02:42,620 --> 00:02:43,160 once again. 34 00:02:45,420 --> 00:02:50,400 You can see that now the browser is launching on a perfect size, but we actually need to click the 35 00:02:50,850 --> 00:02:56,430 username and password, something like this, because this is where it holds those information for you. 36 00:02:56,950 --> 00:02:57,470 Uh. 37 00:02:59,390 --> 00:03:07,100 I think that's it and once again, the PIDF is not going to work because you remember it's because of 38 00:03:07,100 --> 00:03:08,810 the Headful mode. 39 00:03:09,140 --> 00:03:12,870 Yeah, but you can see that it is actually working fine as expected. 40 00:03:12,890 --> 00:03:17,330 So this is how you can actually see that the emulation can be done. 41 00:03:17,480 --> 00:03:21,550 But there are many different other things that you can do on the same emulation site. 42 00:03:21,560 --> 00:03:27,640 You can also not only just change the size of the screens, but you also can set the location. 43 00:03:27,650 --> 00:03:37,370 You can also set the view boards and you can set the time zones, permissions and user agents, et cetera. 44 00:03:37,400 --> 00:03:40,890 So, I mean, you can set everything you want on this particular level. 45 00:03:40,910 --> 00:03:46,710 So all these things, you can easily do it from this particular emulation options. 46 00:03:47,030 --> 00:03:52,510 So what I'm going to do is I'm actually going to probably because it's going to be ruining our PDF dodgiest 47 00:03:52,520 --> 00:03:52,840 file. 48 00:03:52,850 --> 00:04:02,270 I'm just going to call this Ghias emulate Dargis file, and I'm just going to probably remove these 49 00:04:02,270 --> 00:04:04,280 things, which we have it over here. 50 00:04:07,710 --> 00:04:15,420 From the PDF so that you will have a pristine state code that's going to save this, also the headless 51 00:04:15,420 --> 00:04:23,450 something in the moon and on the Immler charges filed, what we can do is we can try doing the options 52 00:04:23,460 --> 00:04:25,530 of working with the immolations itself. 53 00:04:25,860 --> 00:04:28,800 So you can see that this code is pretty legal, which we know that. 54 00:04:29,010 --> 00:04:33,520 And if you want to set the viewport, you can set the viewport as well. 55 00:04:33,540 --> 00:04:39,630 So this is the iPhone and this is the iPhone level set on the context. 56 00:04:39,880 --> 00:04:48,330 We can also set something called as viewport that within this viewport, you can specify how much size 57 00:04:48,330 --> 00:04:50,880 that you need to set the viewport for. 58 00:04:51,180 --> 00:04:56,490 And because we know that for the iPhone, the viewport is going to be a bit different then compared 59 00:04:56,490 --> 00:04:57,500 to the browser itself. 60 00:04:57,840 --> 00:05:04,110 If I tried to set like a viewport of a huge size, probably then the the way it is going to render is 61 00:05:04,110 --> 00:05:05,140 going to be different as well. 62 00:05:05,160 --> 00:05:09,090 So if I try to run the emulator JS file. 63 00:05:11,510 --> 00:05:16,790 You can see that the iPhone has been overridden, but the viewport has taken into presidents this time. 64 00:05:17,060 --> 00:05:23,180 So basically, if you set the viewport, you should insert the iPhone because it doesn't really make 65 00:05:23,180 --> 00:05:28,100 sense, because iPhone screen size is not like two thousand twenty thousand two and a half thousand 66 00:05:28,100 --> 00:05:28,620 twenty four. 67 00:05:28,660 --> 00:05:28,870 Right. 68 00:05:29,120 --> 00:05:34,400 So you need to make sure that you don't do two combo at the same time, because basically it's like 69 00:05:35,240 --> 00:05:36,410 riding the particular option. 70 00:05:36,740 --> 00:05:44,780 And you can also set the scale and the time zone off your side if you want to test the side based on 71 00:05:44,930 --> 00:05:46,470 the different time zones, if you want to. 72 00:05:46,790 --> 00:05:48,710 So those things you can do as well. 73 00:05:48,980 --> 00:05:54,080 So you can do something like location and the time zone just like that. 74 00:05:54,170 --> 00:05:58,220 And if you try to run that, it is going to run based on that particular time zones. 75 00:05:58,310 --> 00:06:05,750 And you can also set something like geo locations and permissions, like how we saw in our earlier video 76 00:06:05,750 --> 00:06:07,670 while discussing on the browser context. 77 00:06:07,700 --> 00:06:12,940 So those things you can do on the browser context level while doing the emulations. 78 00:06:12,950 --> 00:06:18,080 So these things are something which is available on the playwright for you to do a different modern 79 00:06:18,080 --> 00:06:21,570 way of testing on the browsers and see how it actually works.