1
00:00:00,180 --> 00:00:06,930
All right, just in this section and a couple of other section in this cause, I'm going to be discussing

2
00:00:06,930 --> 00:00:10,140
fuel concepts of playwrite in my Windows machine.

3
00:00:10,530 --> 00:00:16,470
So I've been working with the MacBook Pro, with Apple and one power chip in my earlier sections.

4
00:00:16,470 --> 00:00:21,300
But in this section, just to show some of the cross platform ability, like how you can run the exact

5
00:00:21,300 --> 00:00:26,340
same code on the windows as well as in the Mac, I'm going to be using Mac this time.

6
00:00:26,370 --> 00:00:30,260
So there is no reason why I have switched to the Windows machine.

7
00:00:30,270 --> 00:00:32,000
It's exactly the same idea.

8
00:00:32,010 --> 00:00:36,270
I'm going to be using it in my windows so you can I mean, for the Windows user, if you're going to

9
00:00:36,270 --> 00:00:40,920
run the test and you're going to use it, you will see that I'm not going to do any code change and

10
00:00:40,920 --> 00:00:45,450
the code is going to work pretty much exactly how it works on my MacBook Pro as well.

11
00:00:45,840 --> 00:00:51,390
But as I said, I have already done under the code from our earlier section where we discussed about

12
00:00:51,390 --> 00:00:53,520
some of the basics of the playwright.

13
00:00:53,640 --> 00:00:57,660
And now I have the dual dependency of the play right over here.

14
00:00:57,750 --> 00:01:03,690
And now I also need to install the playwright, a test runner so far doing that.

15
00:01:03,690 --> 00:01:06,840
I'm just going to open the terminal.

16
00:01:06,850 --> 00:01:10,380
I'm going to do and probably search for.

17
00:01:12,890 --> 00:01:26,900
Playwright IFN, I test this guy and I'm just gonna say it, and then I'm going to do an NPM install.

18
00:01:28,460 --> 00:01:33,440
And you can see that this insulation is going to be pretty much exactly like how I did in my Mac and

19
00:01:33,440 --> 00:01:36,620
one that's also happening in my Windows machine as well.

20
00:01:36,630 --> 00:01:43,040
I have installed the record notice and all of the things the insulation is going to be pretty much exactly

21
00:01:43,040 --> 00:01:45,710
like how it happens in in my Mac and one as well.

22
00:01:46,140 --> 00:01:50,720
So the first thing which I'm going to do this time is I'm going to create a folder and then I'm going

23
00:01:50,720 --> 00:01:52,630
to call this as just a runner.

24
00:01:54,380 --> 00:01:58,100
And then within this test, I'm going to create a file.

25
00:01:58,130 --> 00:02:04,280
So basically, I'm just trying to isolate the existing test with the code that we'll be discussing in

26
00:02:04,310 --> 00:02:07,010
this section, because it's going to be an all new section.

27
00:02:07,130 --> 00:02:09,410
And we have a lot of things to discuss in the section.

28
00:02:09,620 --> 00:02:11,570
So I'm just creating a new folder there.

29
00:02:11,780 --> 00:02:20,480
And then I'm going to create a very, very simple test this time and we'll see how we can run our test

30
00:02:20,480 --> 00:02:23,840
using the test runner of playwrite.

31
00:02:24,050 --> 00:02:31,310
So far doing that, I'm just going to do this test run a demo doc spec and you can see that I'm actually

32
00:02:31,310 --> 00:02:33,380
using a key word there spec.

33
00:02:33,590 --> 00:02:37,570
This is pretty much like how we did with our just test runners.

34
00:02:37,820 --> 00:02:42,280
So that's exactly the way that you can use this to run the test.

35
00:02:42,290 --> 00:02:47,240
And then for the first time in this course, we are going to be using the typescript.

36
00:02:47,240 --> 00:02:51,020
So I'm intentionally using the typescript because this is what the team recommends.

37
00:02:51,170 --> 00:02:54,830
And I guess we should be slowly moving towards the typescript area.

38
00:02:54,830 --> 00:02:59,600
And I have already covered many of the details on the typescript in my YouTube series are probably I

39
00:02:59,600 --> 00:03:03,260
can pay that particular video as in section in the scores.

40
00:03:03,260 --> 00:03:05,530
But yes, TypeScript is really, really cool.

41
00:03:05,540 --> 00:03:07,430
So we are going to be using the typescript this time.

42
00:03:07,640 --> 00:03:10,490
So this is the file that it has created right now for the typescript.

43
00:03:10,610 --> 00:03:16,520
And all I want to do is I'm going to start writing a super, super simple test and we'll see how it

44
00:03:16,520 --> 00:03:17,240
actually works.

45
00:03:17,360 --> 00:03:20,330
So as I told you before, it is very, very simple, guys.

46
00:03:20,330 --> 00:03:28,760
All we have to do is we have to just do an import, let's do an import, see here import.

47
00:03:29,180 --> 00:03:32,780
And then I'm just going to open and close the.

48
00:03:34,280 --> 00:03:39,970
Is there and then I'm going to do this ad and you can see that once I open the double because it tells

49
00:03:39,970 --> 00:03:42,970
me that playwrite hyphen playwright's test.

50
00:03:43,360 --> 00:03:49,060
So this is the one which we are looking for and we can just import it over here.

51
00:03:49,240 --> 00:03:52,010
So this is the image I'm talking about.

52
00:03:52,210 --> 00:03:59,740
So if you just type described piquancy that describes comes in and then you can see expect comes in

53
00:03:59,740 --> 00:04:00,220
as well.

54
00:04:00,220 --> 00:04:06,190
If you want to do and expect verification there, you can do all sorts of things using this particular

55
00:04:07,090 --> 00:04:08,200
import statement.

56
00:04:08,470 --> 00:04:15,000
And then we can write a simple code, as I told you before, so we can do this ID and then we're going

57
00:04:15,000 --> 00:04:25,810
to say that first test for simple demo and I'm just going to do a open or close parenthesis over here.

58
00:04:26,260 --> 00:04:31,210
And then if you don't really specify anything, that test will just exit without any problem.

59
00:04:31,210 --> 00:04:41,620
I mean, you can just do a console dialog and then you can just try to see, hello, uh, test something

60
00:04:41,620 --> 00:04:42,160
like this.

61
00:04:42,280 --> 00:04:48,070
You can specify that and then you can run the test by going to this particular directly, which is going

62
00:04:48,070 --> 00:04:50,320
to be the code of the test runner.

63
00:04:50,680 --> 00:04:57,880
And then as I told you, in order to execute this test, you need to use this command NPCs and then

64
00:04:58,390 --> 00:04:59,220
Foleo.

65
00:04:59,650 --> 00:05:07,120
So if you specify the NPCs Foleo, it is going to run the test pretty quickly and pretty instantly.

66
00:05:07,120 --> 00:05:15,250
You can see that it tells told you that it is going to run the test and it ran the test using one worker.

67
00:05:15,370 --> 00:05:18,400
And then you will be asking what is this one worker is all about?

68
00:05:18,830 --> 00:05:19,740
Just hold tight.

69
00:05:19,750 --> 00:05:21,130
We're going to talk about that in a minute.

70
00:05:21,310 --> 00:05:25,450
But yes, this is how it actually executes the test.

71
00:05:26,490 --> 00:05:31,950
Using this particular command, NPCs are folia, so you can see that I have not even specified the file

72
00:05:31,950 --> 00:05:38,760
name, if there are five or six different files, is going to execute all the files with that spec dot

73
00:05:38,760 --> 00:05:40,100
these extensions.

74
00:05:40,470 --> 00:05:46,560
So if you have another file, the extension is going to execute all the test files for you.

75
00:05:46,920 --> 00:05:53,490
So you can also do like this or NPCs Foleo and then you can give the file name and if you execute that,

76
00:05:53,670 --> 00:05:55,980
then it is going to exist only that particular file.

77
00:05:56,100 --> 00:05:58,350
So this is another way that you can do it.

78
00:05:59,070 --> 00:06:05,760
But now comes word as we really fit this with our playwrite itself, because this is just a disgruntled

79
00:06:05,760 --> 00:06:06,750
demo that we have seen.

80
00:06:06,930 --> 00:06:09,380
But where is the playwright comes in again?

81
00:06:09,720 --> 00:06:10,620
That's a good question.

82
00:06:11,040 --> 00:06:18,330
So in order for that, what I'm going to do is I'm just going to do a copy and paste over here and I'm

83
00:06:18,330 --> 00:06:26,360
going to say first test to navigate a site demo.

84
00:06:26,790 --> 00:06:30,980
And over here, I'm just going to do this, I think.

85
00:06:31,230 --> 00:06:35,640
Now you can see that I'm just bringing in the, I think context the keyword here.

86
00:06:35,640 --> 00:06:37,980
And then I'm just going to bring in the context.

87
00:06:37,980 --> 00:06:44,010
And once you want to type this context, you can see that automatically it brings context, context,

88
00:06:44,010 --> 00:06:46,950
factory, context, options is chrome.

89
00:06:46,950 --> 00:06:51,420
I mean, there are these things coming from and how does it knows that I'm actually going to be playing

90
00:06:51,420 --> 00:06:53,000
around with these things right now.

91
00:06:53,340 --> 00:07:00,090
So let me just put this context over here and let me just do a control click and you can see that it

92
00:07:00,090 --> 00:07:06,260
brings me up a whole new index dart deducts file or a type definition's file.

93
00:07:06,720 --> 00:07:10,590
So this type definition file has been created by Microsoft Corporation.

94
00:07:10,770 --> 00:07:18,510
And you can see that it has a type four browser browser context of conduct options, prototype launch

95
00:07:18,510 --> 00:07:21,080
options and page from playwrite.

96
00:07:21,450 --> 00:07:30,720
So basically they are going to be using playwrite for actually importing all these important types that

97
00:07:30,720 --> 00:07:36,960
we have been using in our existing test, or pretty much exactly how we used in our puppeteer's and

98
00:07:36,960 --> 00:07:37,250
stuff.

99
00:07:37,530 --> 00:07:40,640
So this is exactly what comes for the playwright as well.

100
00:07:41,160 --> 00:07:45,720
And then they actually has a type for playwrite parameters.

101
00:07:45,720 --> 00:07:48,480
So they have different types of Fatimata like browser name.

102
00:07:48,660 --> 00:07:55,770
So it tells you that Chrome, Firefox and Webcke and they have had full a Boolean type and you can see

103
00:07:55,770 --> 00:08:00,750
lots of entry to Linux or Darrion platforms, screenshots and stuff.

104
00:08:01,050 --> 00:08:05,640
Similarly, playwright to worker fixtures and playwrite test fixtures.

105
00:08:05,650 --> 00:08:11,430
And this is the one which we actually got about the context option, right in the context.

106
00:08:11,820 --> 00:08:17,490
So basically we use this particular context when we ran this test fixture, and it is basically a browser

107
00:08:17,490 --> 00:08:18,030
context.

108
00:08:18,300 --> 00:08:23,670
So if I just go over here and if I hoer there, you can see that it tells me that the content is basically

109
00:08:23,670 --> 00:08:27,480
a browser context and that's what it came over here.

110
00:08:27,870 --> 00:08:34,230
And similarly, Foleo and now you can see that it says in portfolio and it gets a lot of details about

111
00:08:34,230 --> 00:08:34,400
it.

112
00:08:34,410 --> 00:08:35,880
I mean, don't worry about it.

113
00:08:35,880 --> 00:08:40,290
We are going to be talking about this folios, you know, upcoming videos of this course.

114
00:08:40,500 --> 00:08:45,560
But yeah, this is what is the context and this is how it actually gets this particular context.

115
00:08:45,600 --> 00:08:50,340
So we discuss really a lot deeper into how the interior functionality works.

116
00:08:50,560 --> 00:08:56,250
But let me quickly show you how we can spawn a browser page and how we can use it.

117
00:08:56,520 --> 00:09:01,140
And because we have this particular browser context and we know what browser basically does.

118
00:09:01,140 --> 00:09:01,370
Right?

119
00:09:01,370 --> 00:09:07,450
I mean, we discussed about that in our earlier videos of our course, like Playwrite, our Firefox

120
00:09:07,450 --> 00:09:09,030
that launched the new context.

121
00:09:09,300 --> 00:09:13,260
Basically, this new context is a browser context options.

122
00:09:13,560 --> 00:09:16,680
And this is what we discussed in our earlier videos as well.

123
00:09:16,680 --> 00:09:20,440
And that's exactly what we'll be doing in this particular page as well.

124
00:09:20,460 --> 00:09:22,770
So what I'm gonna do is I'm going to create a page.

125
00:09:23,280 --> 00:09:28,430
I'm going to do, in a way out of the context DOT new page.

126
00:09:28,440 --> 00:09:29,700
We know this one, right?

127
00:09:29,700 --> 00:09:35,730
I mean, it creates a new page and it is very helpful while we try to use it with a multipage options

128
00:09:35,730 --> 00:09:36,210
and stuff.

129
00:09:36,480 --> 00:09:44,070
So that's exactly the same kind of code that we are using over here and we are going to do and a way

130
00:09:44,070 --> 00:09:46,260
weight of page dot.

131
00:09:46,440 --> 00:09:52,980
We can do a go to here and then we can specify the website that you want to go.

132
00:09:53,310 --> 00:10:05,940
For example, has a DB column, double slash, let's say Neo in dot net, and then we can also probably

133
00:10:05,940 --> 00:10:09,560
get a value or maybe click anything over there.

134
00:10:09,570 --> 00:10:10,920
I mean, we can do a lot of things.

135
00:10:10,920 --> 00:10:11,250
I mean.

136
00:10:11,400 --> 00:10:11,850
Right.

137
00:10:11,850 --> 00:10:13,950
I mean those things are something which we know already.

138
00:10:14,100 --> 00:10:15,870
We discussed about it a lot in this course.

139
00:10:16,140 --> 00:10:17,580
So I'm just going to leave it as it is.

140
00:10:17,880 --> 00:10:21,880
And I'm just going to run this particular test and I will show you what it happens.

141
00:10:21,900 --> 00:10:25,710
And you can see that this time it tells me it's running for test.

142
00:10:26,250 --> 00:10:29,350
Using for workers, what does it really mean?

143
00:10:29,820 --> 00:10:36,570
So if you remember the slide, right, I told you that every time if you call the Foleo Inpex Foleo,

144
00:10:36,750 --> 00:10:41,100
it will actually run the test using three different browsers.

145
00:10:41,100 --> 00:10:47,300
One is on the chrome, one is on the Firefox, and another one is on the chromium.

146
00:10:47,490 --> 00:10:52,410
So it actually executed all the test on three different browser this time.

147
00:10:52,620 --> 00:10:57,380
And that is why it was back for test using for the workers.

148
00:10:57,990 --> 00:10:59,610
And this is another test that we have.

149
00:10:59,640 --> 00:11:02,040
So this is one, two, three test basically.

150
00:11:02,040 --> 00:11:03,480
And this one is like one test.

151
00:11:04,140 --> 00:11:11,760
And now if I want to specify, maybe if I just want to run just with the browser as probably like Firefox

152
00:11:11,760 --> 00:11:19,650
so I can just specify something like iPhone hyphen programs, which is going to be, I guess, its browser

153
00:11:19,650 --> 00:11:26,820
name as Firefox or something like that, or the name is equal to Firefox.

154
00:11:26,820 --> 00:11:27,930
Sorry, I don't remember that.

155
00:11:28,380 --> 00:11:30,090
Let me just go here.

156
00:11:31,590 --> 00:11:31,830
Yeah.

157
00:11:31,830 --> 00:11:34,400
Browser name is sequel to Firefox.

158
00:11:36,420 --> 00:11:39,510
Just going to specify Präsident sequel to Firefox hit Enter.

159
00:11:40,620 --> 00:11:42,810
I guess it's Perram, not prom's.

160
00:11:45,320 --> 00:11:51,380
And you can see that this time it's only running to test using two workers, so basically this is one

161
00:11:51,380 --> 00:11:56,830
test and this is another test and it is working with just one browser, which is the Firefox browser.

162
00:11:57,200 --> 00:12:04,040
But you can see that it is currently not showing us the browser coming up over here because I don't

163
00:12:04,040 --> 00:12:07,810
really have specified the headless more to be fun.

164
00:12:07,830 --> 00:12:09,860
I mean, I would make it like headful.

165
00:12:10,250 --> 00:12:16,520
So, you know that by default the behavior of the puppeteer or playwrite is headless.

166
00:12:16,740 --> 00:12:19,710
So we need to specify the headful or whatever it is.

167
00:12:19,730 --> 00:12:26,120
So now I have specified Headful State and now you can see that there is a browser being pond and it's

168
00:12:26,120 --> 00:12:32,810
going to the niobium dot com website for us and it's waiting for the page to fully load.

169
00:12:32,990 --> 00:12:36,120
And once this fully loaded, the test is completed.

170
00:12:36,710 --> 00:12:37,280
Awesome.

171
00:12:37,730 --> 00:12:45,670
So this is how we could see that we could able to use this tester runner in playwrite much, much simpler.

172
00:12:45,680 --> 00:12:47,090
And this is pretty awesome.

173
00:12:47,240 --> 00:12:51,020
So we'll be discussing even more detail or upcoming videos of this course.

174
00:12:51,200 --> 00:12:53,350
Stadion, talk to you in our next video.