1
00:00:00,150 --> 00:00:06,420
In this video, we're going to talk about Foleo in much greater detail, as I told you before, Foleo

2
00:00:06,420 --> 00:00:11,100
is a customizable test framework to build your own custom test framework as well.

3
00:00:11,340 --> 00:00:14,270
And this is the foundation for the playwright Destra.

4
00:00:14,640 --> 00:00:18,540
Well, as I said, Foleo is based on the concept of test fixtures.

5
00:00:18,990 --> 00:00:24,510
The test fixtures are used to establish an environment for each test, giving the test everything it

6
00:00:24,510 --> 00:00:25,850
needs and nothing else.

7
00:00:25,860 --> 00:00:26,160
Right.

8
00:00:26,430 --> 00:00:33,180
That's the that's the uses of test fixtures, because if you see any unit or J unit are test in G,

9
00:00:33,360 --> 00:00:35,610
they actually has something called a test picture.

10
00:00:35,820 --> 00:00:42,270
We try to use this before test or after test, especially to set up the things that is required for

11
00:00:42,270 --> 00:00:43,650
the test to basically execute.

12
00:00:43,800 --> 00:00:49,050
And that's exactly is the idea of the test fixture, and that's exactly what this folio is also going

13
00:00:49,050 --> 00:00:49,440
to be doing.

14
00:00:49,740 --> 00:00:52,380
So this is how this is going to be setting things up for us.

15
00:00:52,560 --> 00:00:59,700
And we can extend our own test fixture based on this particular folio of the example of extending our

16
00:00:59,700 --> 00:01:01,920
own fixture is going to look something like this.

17
00:01:02,410 --> 00:01:12,240
As you can see, I'm actually creating a simper extended test fixture or a browser fixture in this place

18
00:01:12,420 --> 00:01:17,180
where it is going to give me a different path of different browsers.

19
00:01:17,190 --> 00:01:18,210
It's very, very simple.

20
00:01:18,210 --> 00:01:25,590
Basically, what it does is it has an import folio as base from playwrite and export expect from the

21
00:01:25,590 --> 00:01:26,070
folio.

22
00:01:26,070 --> 00:01:32,370
As you can see, I'm just trying to get these details and then I'm creating my own type as browsers

23
00:01:32,640 --> 00:01:36,660
where I'm specifying Chrome, Firefox and edge of type string.

24
00:01:37,020 --> 00:01:44,850
And then I'm going to extend the browser type in such a way that if you're going to call the Chrome

25
00:01:45,090 --> 00:01:51,710
from the fixture, then it is going to give me the path of that particular browser.

26
00:01:51,990 --> 00:01:52,500
That's it.

27
00:01:52,530 --> 00:01:53,790
That's what it is doing.

28
00:01:53,800 --> 00:01:56,200
There is no intelligent thing happening over here.

29
00:01:56,430 --> 00:02:01,590
So this browser tab that I have specified can be of any type.

30
00:02:01,590 --> 00:02:04,320
I mean, it can be your own browser options.

31
00:02:04,320 --> 00:02:09,840
It can be of your own page or it can be of your own context options.

32
00:02:09,840 --> 00:02:11,100
It can be of anything.

33
00:02:11,310 --> 00:02:16,350
I mean, this browser options or the context options are actually from the playwright.

34
00:02:16,350 --> 00:02:22,590
So we can extend these types over here in the fixtures and then we can modify its behavior and then

35
00:02:22,590 --> 00:02:24,390
we can set things up for it.

36
00:02:24,630 --> 00:02:29,770
And then we can give that particular data to the caller, which is nothing but our test.

37
00:02:29,790 --> 00:02:35,190
So basically these fixtures are going to be consumed by our test and then we are going to be ensuring

38
00:02:35,190 --> 00:02:36,850
that our test runs start any problem.

39
00:02:36,870 --> 00:02:42,470
So this is what the whole idea or the purpose of extending our own fixtures.

40
00:02:42,750 --> 00:02:49,140
So as you can see over here, I have created a very, very super simple file with the fixture where

41
00:02:49,140 --> 00:02:52,350
I'm going to specify the or get the part.

42
00:02:52,500 --> 00:02:58,050
But only thing, as you can see here, this is the terminology to follow while you called it in it is

43
00:02:58,050 --> 00:03:00,510
that you need to run.

44
00:03:01,050 --> 00:03:07,710
You want to call this a where in the return this particular value or the value that you have set over

45
00:03:07,710 --> 00:03:09,450
here, which is very, very simple.

46
00:03:09,630 --> 00:03:13,890
And then once everything has been done in this particular fixture, you need to build it and then you

47
00:03:14,010 --> 00:03:17,670
to return different constant that you are going to be returning to your test.

48
00:03:17,680 --> 00:03:22,230
So as you can see, I've done it here, but I have not returned that describe.

49
00:03:22,380 --> 00:03:27,330
So the describe is not going to be available for your test if you're going to be consuming this particular

50
00:03:27,330 --> 00:03:27,850
fixture.

51
00:03:28,710 --> 00:03:35,610
So one more thing is that if this particular fixture is now available while you consume it, you need

52
00:03:35,610 --> 00:03:42,570
to consume this particular fixture rather again, consuming the add puppeteer slash test like how we

53
00:03:42,570 --> 00:03:43,710
did in our earlier video.

54
00:03:44,040 --> 00:03:50,520
So the consumption or the accessing this particular extended fixture is going to look something like

55
00:03:50,520 --> 00:03:50,880
this.

56
00:03:51,060 --> 00:03:59,040
As you can see, I'm going to be importing it and expect from the fixture, rather, the at playwrite

57
00:03:59,040 --> 00:03:59,880
slash test.

58
00:04:00,420 --> 00:04:05,420
And then I'm actually going to be getting the pad, as you can see over here.

59
00:04:05,430 --> 00:04:08,100
So I'm going to be doing and expect as well over here.

60
00:04:08,580 --> 00:04:10,540
And it just works fine without any problems.

61
00:04:10,540 --> 00:04:15,270
So if I call the Crome, then it's going to give me the pad and then I can match if the pad actually

62
00:04:15,270 --> 00:04:20,050
matches, like how it is specified in my existing fixture setup.

63
00:04:20,520 --> 00:04:27,570
So this is the simplest way that we can actually write our code and see how it actually works using

64
00:04:28,140 --> 00:04:34,500
the test fixtures functionality of the folio as you see everything in action and listen to how things

65
00:04:34,500 --> 00:04:34,830
work.

66
00:04:35,010 --> 00:04:38,010
The file that I'm going to flip to my business record.

67
00:04:38,790 --> 00:04:39,420
All right.

68
00:04:39,450 --> 00:04:44,460
So before even going to this particular code that we have been discussing so far, I'm just going to

69
00:04:44,460 --> 00:04:47,270
show you how the folio is going to look like.

70
00:04:47,280 --> 00:04:52,890
And as you can see, if you come down a bit or here, the test run, initially, it tells that there

71
00:04:52,890 --> 00:04:54,200
is a Foleo parameter.

72
00:04:54,210 --> 00:04:55,320
So what is this folio?

73
00:04:55,350 --> 00:04:59,730
So if I just open this folio, you can see that the folio is a separate project.

74
00:05:00,040 --> 00:05:07,000
Created by the Microsoft team and this foliar tell us it's a customizable test framework to build your

75
00:05:07,000 --> 00:05:13,510
own test framework and it has some of the basic concepts, as you can see or hear, to tell you how

76
00:05:13,510 --> 00:05:15,640
you can create your own.

77
00:05:15,730 --> 00:05:20,700
I mean, without fixtures, you need to do a lot of things like before and after.

78
00:05:20,830 --> 00:05:21,550
Before each.

79
00:05:21,550 --> 00:05:23,980
After each, for each and every test.

80
00:05:23,980 --> 00:05:26,560
In each and every files that you will be working.

81
00:05:26,740 --> 00:05:32,740
But using this fixtures, you can just call the particular file and then you can keep extending it pretty

82
00:05:32,740 --> 00:05:37,930
much easily without having to have all these different extra options that you need to be doing.

83
00:05:38,200 --> 00:05:40,120
So that is really a pain.

84
00:05:40,330 --> 00:05:43,920
And those things are taken care of by this particular fixture.

85
00:05:44,170 --> 00:05:48,430
And there are many different options, many different details available here.

86
00:05:49,480 --> 00:05:51,740
And again, those are very, very simple.

87
00:05:51,760 --> 00:05:56,560
We are going to be talking about most of them in this particular section of this course.

88
00:05:56,860 --> 00:05:58,620
But yeah, this is what is Foleo.

89
00:05:59,560 --> 00:06:02,190
So now we are going to be working with Foleo.

90
00:06:02,200 --> 00:06:08,380
So I'm going to do one more thing because I'm just going to create a new folder and I'm going to call

91
00:06:08,380 --> 00:06:17,950
this as a Foleo example, because this is going to be a FOLIA specific, not the one which we were discussing

92
00:06:17,950 --> 00:06:18,460
before.

93
00:06:18,850 --> 00:06:21,940
So it's aren't astronauts of Foleo specific?

94
00:06:22,040 --> 00:06:27,040
I'm just deviating a bit from the test or to the Foleo is because you need to understand what is Foleo

95
00:06:27,040 --> 00:06:34,300
and how to to work with Foleo in more detail, because without having the knowledge of Foleo and the

96
00:06:34,300 --> 00:06:40,210
test fixtures, if I directly tell about the fixtures, then it's like an half baked information, which

97
00:06:40,210 --> 00:06:44,260
I don't really need or want you to understand.

98
00:06:44,560 --> 00:06:47,390
So this way it is easier to understand as well.

99
00:06:47,950 --> 00:06:52,380
So I'm just going to create a file name a fixture, Dods.

100
00:06:52,390 --> 00:06:58,270
And again, the filename can be anything but I'm just giving a file name as a fixture here so that it's

101
00:06:58,270 --> 00:06:59,400
more meaningful as well.

102
00:06:59,920 --> 00:07:07,520
And I'm just going to do an import here and I'm going to do something I import from.

103
00:07:07,840 --> 00:07:13,330
And again, I'm just going to use it as playwrite test, which is the one which we used in our early

104
00:07:13,330 --> 00:07:14,140
video as well.

105
00:07:14,650 --> 00:07:20,130
And over here, I'm just going to do this Foleo as base.

106
00:07:20,130 --> 00:07:27,100
I mean, you can use directly as Foleo if you want, but this is something looks like more a better

107
00:07:27,100 --> 00:07:29,430
way of doing it in terms of the practices.

108
00:07:29,860 --> 00:07:35,590
So I'm just going to do exactly the same code that we saw in our slide there.

109
00:07:36,010 --> 00:07:44,800
Like, I'm just going to create different variables for this particular type, like Firefox, Chrome

110
00:07:45,160 --> 00:07:49,480
and Etch like this.

111
00:07:50,230 --> 00:08:01,000
And then I'm just going to create a const fixtures that I'm just going to say because dot extend of

112
00:08:01,000 --> 00:08:03,670
the type, which is nothing but the browsers.

113
00:08:07,300 --> 00:08:13,300
And after that I'm just going to say, all right, fixtures, if I hear Dot, you can see that it brings

114
00:08:13,300 --> 00:08:19,110
me up automatically this chrome edge in Firefox, which is pretty cool.

115
00:08:19,120 --> 00:08:26,740
So now it knows that I'm actually going to be extending this particular this particular types that I

116
00:08:26,740 --> 00:08:28,530
have over there.

117
00:08:28,840 --> 00:08:34,120
So I'm just going to say chrome dot init method where I'm just going to say.

118
00:08:34,120 --> 00:08:34,480
All right.

119
00:08:34,480 --> 00:08:42,670
Is think of the because I'm not going to really pass anything there on the parameter side, so I'm just

120
00:08:42,670 --> 00:08:45,810
going to leave them as it is and I'm going to tell.

121
00:08:45,820 --> 00:08:46,240
All right.

122
00:08:46,420 --> 00:08:51,100
So I am going to wait for run.

123
00:08:51,490 --> 00:08:55,600
I'm just going to give you a part if somebody calls the chrome for me.

124
00:08:56,080 --> 00:08:58,180
So the part is going to be very, very simple.

125
00:08:58,180 --> 00:09:00,960
All I'm going to do is like I'm just going to create a dummy part.

126
00:09:01,480 --> 00:09:04,230
Um, I'm just going to use something like this.

127
00:09:04,630 --> 00:09:05,200
So that's it.

128
00:09:05,230 --> 00:09:12,910
So if I do call the chrome from some of my test, it is going to return me or run this thing for me,

129
00:09:13,040 --> 00:09:16,680
returns me this particular part in a string type.

130
00:09:17,080 --> 00:09:25,750
So if I specify if I have like a Firefox or the browser, then I can do something like this and just

131
00:09:25,750 --> 00:09:26,840
worse find that only problem.

132
00:09:26,860 --> 00:09:29,770
So this is the very, very super simple code that we saw in the slide.

133
00:09:29,980 --> 00:09:32,890
And that's exactly what I'm going to be doing over here as well.

134
00:09:33,340 --> 00:09:43,390
But just that we also need to use this constant as Foleo, because this is what is going to be the FOLIA

135
00:09:43,390 --> 00:09:49,270
parameter, which is going to be used within our consumption end, which is going to be our test.

136
00:09:49,570 --> 00:09:54,700
So we need to create this constant where I'm going to tell that Fixer's dot build.

137
00:09:57,280 --> 00:10:06,990
And I also need to export the constant of it as Foleo DARD, I guess it's it.

138
00:10:07,600 --> 00:10:12,660
And if I don't specify the described and the describe, it's not going to be available.

139
00:10:12,910 --> 00:10:19,270
So if I just specify that describe then just to describe as well something like this.

140
00:10:20,080 --> 00:10:31,390
And we also need to export the they expect so you can create something like the export of the concept

141
00:10:32,080 --> 00:10:43,480
of X expect is equal to Foleo dot expect or you can also do something like this.

142
00:10:43,510 --> 00:10:46,140
You can do anything however you want.

143
00:10:46,570 --> 00:10:46,980
Yep.

144
00:10:47,320 --> 00:10:57,420
And this is how we can actually create a fixture file from the Folio and so we can then create and consumption

145
00:10:57,470 --> 00:11:03,910
end and we can see how we can consume this particular test that we have created or the fixes that we

146
00:11:03,910 --> 00:11:07,480
have created and see how it actually works, which will be doing in our next video.