1
00:00:00,240 --> 00:00:07,200
All right, so now, just in case, if you are using a apple in one Chip Mac at the moment, if you

2
00:00:07,200 --> 00:00:13,140
are using version one, dot six, dot one, you may be getting some sort of issues basically even ironed

3
00:00:13,140 --> 00:00:14,100
out of some issue.

4
00:00:14,120 --> 00:00:18,660
But I mean, while installing it was working fine because I have already installed a playwright in this

5
00:00:18,660 --> 00:00:25,800
machine before I was trying out and showing you because some of the files like Chromium and Firefox

6
00:00:25,800 --> 00:00:28,590
were already sitting in my cash file and it was working fine.

7
00:00:28,800 --> 00:00:34,410
But if you don't really have like you are using everything fresh on an Apple MacBook and one pro, you

8
00:00:34,410 --> 00:00:35,400
probably get an error.

9
00:00:35,640 --> 00:00:37,910
So I'll quickly show what I really mean.

10
00:00:37,920 --> 00:00:44,070
So if I tried to do and npm install at the moment using this particular version, you can see that I

11
00:00:44,070 --> 00:00:44,990
get this error.

12
00:00:45,000 --> 00:00:50,760
So basically I have removed those cache information directly from my cache and that's why I'm getting

13
00:00:50,760 --> 00:00:51,560
this error right now.

14
00:00:51,750 --> 00:00:56,220
It says that this error is outdated by throwing inside an arcing function without a catch block.

15
00:00:56,460 --> 00:01:02,470
And it also says that error playwrite does not support chromium on Mac dot one.

16
00:01:02,490 --> 00:01:08,130
Basically, it says that it is not going to support this particular version of Apple M1.

17
00:01:08,170 --> 00:01:11,660
So this is one of the issue that the player actually has got.

18
00:01:11,910 --> 00:01:17,110
So if you tried to use version 1.0 seven to zero, this issue will be resolved.

19
00:01:17,130 --> 00:01:21,540
Basically, this is the very, very simple, straightforward bug which the team has created.

20
00:01:21,540 --> 00:01:22,830
But now it's been fixed.

21
00:01:23,430 --> 00:01:31,200
So if you just try to move or delete these files from here and now, if you try to do an NPM install,

22
00:01:31,500 --> 00:01:36,120
you could see that the installation is going to happen and the chromium is going to be downloading for

23
00:01:36,120 --> 00:01:38,070
you and it's going to install the browsers for you.

24
00:01:38,100 --> 00:01:38,370
Yes.

25
00:01:38,380 --> 00:01:41,910
So I didn't show you on the earlier video because I already had those in the cache.

26
00:01:42,120 --> 00:01:46,960
But I realized that if you use this particular version, you may be encountering this kind of error.

27
00:01:47,130 --> 00:01:50,370
I mean, the time when I'm recording this video, these issues are actually happening.

28
00:01:50,370 --> 00:01:55,920
But by the time while you use this or maybe watching this after like six months or seven months, this

29
00:01:55,920 --> 00:02:00,690
version will be already very, very obsolete and these issues would have already been resolved.

30
00:02:01,090 --> 00:02:01,370
Yes.

31
00:02:01,380 --> 00:02:06,450
So this is the one of the issue that I wanted to show you before I could actually really move forward

32
00:02:07,050 --> 00:02:08,100
with this particular course.

33
00:02:08,940 --> 00:02:09,580
Well, that's it, guy.

34
00:02:09,600 --> 00:02:10,760
This is what is going to happen.

35
00:02:10,780 --> 00:02:15,000
So once you do the installation, you can see that that is going to be like three browser is going to

36
00:02:15,000 --> 00:02:17,680
be downloaded for you on the cache file.

37
00:02:18,090 --> 00:02:25,380
So if I just go over here, you can see that in the most playwrite I actually has got I've got the chrome

38
00:02:25,380 --> 00:02:29,620
for the Mac, like the chromium browser and similar for the Firefox.

39
00:02:29,620 --> 00:02:33,330
So you can see that the Firefox likely browser is sitting similarly for the Web kit.

40
00:02:33,510 --> 00:02:38,750
You can see that the Apple Safari has got the Web browser sitting over here as well.

41
00:02:38,760 --> 00:02:45,540
So everything is actually downloaded for you and then you can start using these browsers for the testing,

42
00:02:45,570 --> 00:02:46,800
which is pretty, pretty cool.

43
00:02:46,830 --> 00:02:51,540
So this is a brilliant idea because the team has already got well, as I said, the installation is

44
00:02:51,540 --> 00:02:53,730
already done with no the video itself.

45
00:02:54,030 --> 00:02:59,040
You're going to start writing a simple code and we'll see how the test actually works and how the code

46
00:02:59,040 --> 00:02:59,670
actually works.

47
00:02:59,700 --> 00:03:07,280
So for doing that, I'm going to create a new file I want to call as simple test dart JS.

48
00:03:07,290 --> 00:03:12,540
So basically I'm going to write everything in the JavaScript language as of now and I'm going to start

49
00:03:12,540 --> 00:03:13,900
writing the code over here.

50
00:03:13,980 --> 00:03:21,240
So the first thing I'm gonna do is I'm going to create a constant of maybe, let's say chromium.

51
00:03:21,240 --> 00:03:25,650
So see a small letter and I will show you what I really mean here.

52
00:03:25,980 --> 00:03:30,540
And then I'm just going to do a required of playwrite.

53
00:03:31,390 --> 00:03:31,890
That's it.

54
00:03:32,280 --> 00:03:36,450
So what is this chromium and why should I create a constant of chromium in here?

55
00:03:36,540 --> 00:03:43,530
So basically, this is one of the concerns which has been exposed as a browser type from the playwright

56
00:03:43,530 --> 00:03:44,480
library itself.

57
00:03:44,490 --> 00:03:51,330
So if you go to the playwright, if I just hit the control and click in Windows and in Mac, it is the

58
00:03:51,330 --> 00:03:57,870
command and click, you can go, you can see that it just highlights and it shows you Intellisense of

59
00:03:57,870 --> 00:04:00,520
all the different concerns, has being exported.

60
00:04:00,540 --> 00:04:05,000
So if I just click this guy, so basically it's going to take you to the index started out as something

61
00:04:05,010 --> 00:04:12,300
but the type definition file and it's going to tell you that it's going to be a constant of chromium,

62
00:04:12,810 --> 00:04:18,480
which is being exposed for any of the JS find that you're going to be importing.

63
00:04:18,630 --> 00:04:23,190
It tells the exact types of the browser type of the browser, which is something about the chromium

64
00:04:23,190 --> 00:04:23,630
browser.

65
00:04:23,880 --> 00:04:29,130
So if you click the chromium browser, you can see that this particular interface extends the browser

66
00:04:29,490 --> 00:04:30,580
interface itself.

67
00:04:30,870 --> 00:04:32,670
So this is what is basically happening.

68
00:04:32,670 --> 00:04:37,200
So you can do all sorts of things, which is available within this particular browser is nothing but

69
00:04:37,470 --> 00:04:38,370
the chromium browser.

70
00:04:38,400 --> 00:04:38,690
Right.

71
00:04:38,950 --> 00:04:40,080
I'm just going to close this.

72
00:04:40,110 --> 00:04:44,400
So basically, you can see that these are the different constants that you can use at the moment.

73
00:04:44,400 --> 00:04:48,420
As of today, when I'm recording this video, like three different modern browsers.

74
00:04:48,720 --> 00:04:54,840
So I'm just going to use the chromium browser over here in the playwright and then I need to actually

75
00:04:54,960 --> 00:04:56,270
start running the code.

76
00:04:56,460 --> 00:04:59,700
So in order to run the code in C Sharp, we use the.

77
00:04:59,990 --> 00:05:04,670
Main method in a class file, similar in Java, we use a main method.

78
00:05:04,910 --> 00:05:09,710
Similarly in JavaScript, because everything is going to be an asynchronous programming language, we

79
00:05:09,710 --> 00:05:15,050
need to somehow create an asynchronous block so that the code can be really executed because this is

80
00:05:15,050 --> 00:05:16,350
an interpreted language.

81
00:05:16,370 --> 00:05:17,540
It's not the compiler language.

82
00:05:17,810 --> 00:05:22,510
We should tell the code that, hey, this is an asynchronous code that I need to be executing.

83
00:05:22,700 --> 00:05:28,370
So I'm just going to create a block of code, something like I think that this block is responsible

84
00:05:28,370 --> 00:05:33,650
for running the code, which is sitting inside this block.

85
00:05:34,040 --> 00:05:39,360
So this block, which I'm talking about, is where the code is going to be executed.

86
00:05:39,710 --> 00:05:46,010
So this is the place where we're going to do all sort of codings of our browser launch or running the

87
00:05:46,010 --> 00:05:48,950
test like opening a page or something like that.

88
00:05:48,950 --> 00:05:51,320
All operations are going to sit inside here.

89
00:05:51,710 --> 00:05:58,210
So I'm just going to create a const, let's say, a browser where I'm going to say chromium, which

90
00:05:58,220 --> 00:06:01,450
is anything but this constant chromium dot.

91
00:06:01,460 --> 00:06:07,240
If I just do that, you can see that automatically the intelligence comes in from this studio, which

92
00:06:07,250 --> 00:06:10,840
is nothing, but it is coming from the type definition file that we just saw.

93
00:06:11,150 --> 00:06:17,090
And it tells you all the method like connect, executable part launch, launch, persistent context,

94
00:06:17,360 --> 00:06:19,480
launch server name and things.

95
00:06:19,730 --> 00:06:25,430
So I'm just going to use the launch method that I'm going to launch the browser so you can specify different

96
00:06:25,430 --> 00:06:26,510
options in here.

97
00:06:26,750 --> 00:06:31,340
Something like you can set some launch options so you can see that it automatically tells you that launch

98
00:06:31,340 --> 00:06:36,920
options so you can set the launch options if you want or you can just leave this guy as it is.

99
00:06:37,190 --> 00:06:41,660
If you want to set the launch options, you can put like two braises there.

100
00:06:41,840 --> 00:06:47,540
If I just do a controlled space, you can see different properties comes in something like argument's

101
00:06:47,930 --> 00:06:56,420
sandbox, chromium sandbox dev tools, download pod environment and then ignore our headless and things

102
00:06:56,420 --> 00:06:57,010
of that nature.

103
00:06:57,320 --> 00:07:00,260
So we'll talk about these things later in this course.

104
00:07:00,260 --> 00:07:06,800
But as of now, yes, this is going to be the default thing that you can do just for the launch and

105
00:07:06,830 --> 00:07:07,550
going to save this.

106
00:07:07,820 --> 00:07:11,900
And then I'm just going to do a page launch there.

107
00:07:11,900 --> 00:07:16,750
I'm just going to be performing are opening a page within that particular browser.

108
00:07:16,760 --> 00:07:23,510
So basically I will talk about the browser browser context and then frames and stuff in the next section

109
00:07:23,510 --> 00:07:24,410
of this picture, of course.

110
00:07:24,410 --> 00:07:29,630
But as of now, just be aware that once you create a browser, you also need to create something called

111
00:07:29,630 --> 00:07:33,230
as a page where you're going to open the actual page itself.

112
00:07:33,240 --> 00:07:37,400
So this is like a Chrome browser that you have opened and then you need to open a page, which is nothing

113
00:07:37,400 --> 00:07:41,140
but your extradimensional automation page, our Google page, something like that.

114
00:07:41,390 --> 00:07:47,750
So I'm just going to create a concept of page where I'm going to Maeterlinck that browser.

115
00:07:48,020 --> 00:07:53,030
Can you just open me a new page or something like that?

116
00:07:53,390 --> 00:07:57,800
You can also create new content or new browser, CDPR, CPD sessions.

117
00:07:57,800 --> 00:08:03,130
I mean, we talk about that later, but for now, in this first couple of videos, we can talk about

118
00:08:03,320 --> 00:08:04,580
new page, something like that.

119
00:08:04,910 --> 00:08:11,330
And you can see that once I hit a new page of Enter, it automatically puts on a wait for me over there,

120
00:08:11,330 --> 00:08:12,400
which is pretty nice.

121
00:08:12,410 --> 00:08:17,570
I mean, the intelligence is actually doing it for us because this new page is actually and I think

122
00:08:17,570 --> 00:08:17,990
method.

123
00:08:17,990 --> 00:08:20,270
And you should always, always use an update.

124
00:08:20,270 --> 00:08:23,620
If not, the test is going to fail or it's not going to execute.

125
00:08:23,630 --> 00:08:25,700
So it's telling me automatically.

126
00:08:25,910 --> 00:08:31,130
So those things were not there like long time before, but now everything is there for you within Visual

127
00:08:31,140 --> 00:08:32,360
Studio Code itself.

128
00:08:32,810 --> 00:08:36,980
And you also need to put on a weight or hear if I'm on, forget it.

129
00:08:37,550 --> 00:08:38,150
That's it.

130
00:08:38,150 --> 00:08:40,070
And you can see that there is a three dot coming in.

131
00:08:40,310 --> 00:08:46,190
So if you see that particular bulb symbol, it says remove unnecessary of it if you really want to.

132
00:08:46,190 --> 00:08:47,420
But that's wrong.

133
00:08:47,420 --> 00:08:49,160
I mean, you need to have an operator over there.

134
00:08:49,730 --> 00:08:56,400
And then once the page is created, we then need to do and go to to that particular page, I mean,

135
00:08:56,630 --> 00:08:57,940
to navigate that particular page.

136
00:08:57,950 --> 00:08:59,600
So I'm just going to do a page dot.

137
00:08:59,900 --> 00:09:01,700
You can see all the different method comes in.

138
00:09:02,000 --> 00:09:09,770
And the CO two is the method which I'm interested in, which I'm going to say has is execute automation

139
00:09:09,770 --> 00:09:19,040
dot com, I'm going to save and then I'm just going to maybe close the browser, something like a wait

140
00:09:19,040 --> 00:09:22,190
of the browser dot closed.

141
00:09:22,190 --> 00:09:26,510
So I'm going to open the browser, I'm going to navigate to the page, I'm going to close the browser.

142
00:09:26,600 --> 00:09:29,240
So if I run this test, basically the test is going to run.

143
00:09:29,240 --> 00:09:30,350
I mean, the code is going to run.

144
00:09:30,710 --> 00:09:36,620
But problem is, you don't see anything happening behind the scene because it's going to run by default

145
00:09:36,620 --> 00:09:37,630
and headless mode.

146
00:09:37,910 --> 00:09:41,950
So we should run this in and headful more so that you can see that particular operation.

147
00:09:41,960 --> 00:09:43,250
So don't believe me what I'm saying.

148
00:09:43,520 --> 00:09:51,260
I'm just going to go over here and then I'm just going to type the node of simple test.

149
00:09:51,290 --> 00:09:54,800
Dargis You can see that just like that.

150
00:09:55,070 --> 00:09:59,590
And as a best practice of this code execution, I always prefer to use the word.

151
00:10:01,010 --> 00:10:06,650
Not in this fashion, I just use something like that, which is a correct way of doing as well.

152
00:10:06,980 --> 00:10:15,230
So this makes the code even more civilized, like how the code is defined to be written on a JavaScript.

153
00:10:15,530 --> 00:10:19,510
So I'm just going to do something like that so you can see that everything is looking good right now.

154
00:10:19,820 --> 00:10:25,700
And because we didn't see any browser came in, the easiest thing we were going to do is go to the launch

155
00:10:25,700 --> 00:10:33,500
method and then or here we can just type a property called Hitless by default is true, which I'm going

156
00:10:33,500 --> 00:10:35,480
to change too fast.

157
00:10:35,480 --> 00:10:39,940
So I'm just going to tell that this hurdlers is false, which means it's going to be headful more.

158
00:10:40,850 --> 00:10:44,810
So I'm just going to leave this guy as it is and then run the test.

159
00:10:44,850 --> 00:10:45,110
Oops.

160
00:10:45,110 --> 00:10:51,870
I just forgot this process as well and I'm just going to run that and you can see that now the test

161
00:10:51,890 --> 00:10:57,860
is actually running and you can see that it's opening the extra dimension dot com page and it just closed

162
00:10:57,860 --> 00:10:58,010
it.

163
00:10:58,010 --> 00:11:04,130
So basically because it's a launch operation, which is the hitless are false, it is actually executing

164
00:11:04,130 --> 00:11:06,330
for you without any problem, which is pretty cool.

165
00:11:06,740 --> 00:11:15,080
So this way we can actually see that we could able to run a code which is sitting inside this particular,

166
00:11:15,230 --> 00:11:21,560
I think, arrow function, which is going to run the test for us or the code for us that we have specified.

167
00:11:22,070 --> 00:11:27,560
We can also do some more things like we can take a screenshot and stuff within this particular page,

168
00:11:28,340 --> 00:11:36,020
something like a weight off page dot screenshot of is nothing, but it's going to take a screenshot

169
00:11:36,020 --> 00:11:38,990
for the page that is going to be appearing.

170
00:11:39,260 --> 00:11:45,320
And then over here, we can specify the part of where this particular file is going to be saved.

171
00:11:45,560 --> 00:11:49,850
So I'm just going to see a dart and something like that.

172
00:11:50,240 --> 00:11:54,410
So if I specify that, then it's going to say in this particular file name.

173
00:11:54,980 --> 00:11:56,480
So let's see what's going to happen.

174
00:11:56,490 --> 00:12:00,050
So once I run this, you can see that the page has been sponte.

175
00:12:00,470 --> 00:12:02,930
And let's go over here.

176
00:12:03,500 --> 00:12:05,780
You can see that there is a year PMG file.

177
00:12:06,260 --> 00:12:09,600
It takes a screenshot and it's kind of showing us for us, which is pretty cool.

178
00:12:09,620 --> 00:12:14,180
So this is how we can run or write a simple code with playwrite.