1
00:00:03,090 --> 00:00:04,480
All right, guys.

2
00:00:04,680 --> 00:00:10,200
So in this election, I'm back to my Windows 10 machine from Mac and one.

3
00:00:10,650 --> 00:00:14,790
So I just wanted to show you because we left off the.

4
00:00:16,550 --> 00:00:21,890
Test runner in this particular machine and I have been switching many machines just to showcase that

5
00:00:21,890 --> 00:00:26,600
our code actually works in all the platforms like Mac Operating System Assemblies and Windows operating

6
00:00:26,600 --> 00:00:26,970
system.

7
00:00:27,290 --> 00:00:33,710
And this time I'm going to actually show you how we can actually make use of our.

8
00:00:35,710 --> 00:00:40,390
And in this section, we are actually going to write a small framework kind of code, probably I don't

9
00:00:40,390 --> 00:00:45,180
really want to call it as like a framework kind of code because it is not even a framework code.

10
00:00:45,190 --> 00:00:52,180
But still, as you all know, that the idea of the framework is something many people really like,

11
00:00:52,390 --> 00:00:55,870
at least in the JavaScript world, the framework is not that great.

12
00:00:56,050 --> 00:01:00,190
I mean, in terms of writing it for the test automation, because you don't really require it at the

13
00:01:00,190 --> 00:01:04,570
moment because playwrite already taking care of everything in the JavaScript binding.

14
00:01:06,570 --> 00:01:11,370
But if you really want right, like a kind of scenarios like using Convergys, then that's a different

15
00:01:11,370 --> 00:01:12,390
ballgame altogether.

16
00:01:12,600 --> 00:01:17,100
Again, for that, you don't really require a framework as such, but just that you need to organize

17
00:01:17,100 --> 00:01:21,600
the core like a featureless folder or step forward or something like that.

18
00:01:21,810 --> 00:01:26,820
But you don't really require something like a separate framework as such, because playwrite itself

19
00:01:26,820 --> 00:01:33,260
is a very mature framework and they already know the pain points of the testers and they don't really

20
00:01:33,270 --> 00:01:34,140
want to burden you.

21
00:01:34,140 --> 00:01:36,290
Try one more framework right on the top of it.

22
00:01:36,300 --> 00:01:41,910
So basically you can directly use playwrite without writing any page update model kind of code.

23
00:01:42,060 --> 00:01:49,230
But this but as we all are coming from the background of selenium, sometimes the concept of page opposite

24
00:01:49,230 --> 00:01:51,960
model is really required by the students.

25
00:01:52,140 --> 00:01:55,790
And they wanted me to create a video on the page of that model.

26
00:01:55,800 --> 00:01:59,280
So I just wanted to cover that up in this cause as well.

27
00:01:59,310 --> 00:02:03,210
So this section is all about the page opposite models of the.

28
00:02:06,600 --> 00:02:11,460
Playwright coding, and again, I'm going to mark this as a framework as well a bit, because if you

29
00:02:11,460 --> 00:02:15,150
want to extend it from this particular piece of code, you could extend it.

30
00:02:15,420 --> 00:02:21,020
But I don't really see any need for having a framework altogether because you be able to do it.

31
00:02:21,180 --> 00:02:27,150
But in the upcoming lectures of this, but in the upcoming section of this course, while we talk about

32
00:02:27,150 --> 00:02:34,460
different language bindings like Java and C Sharp, you really see that the framework can be written

33
00:02:34,470 --> 00:02:37,980
much, much easily because the nature of the language like it's a common language.

34
00:02:37,980 --> 00:02:44,730
And you would have already got a lot of ideas of how to create a small organized code like that.

35
00:02:45,000 --> 00:02:48,420
I mean, in those areas, you could able to design a framework as such.

36
00:02:48,420 --> 00:02:52,980
But all here, I don't really see any reason for you to have a framework as such.

37
00:02:53,400 --> 00:02:55,620
So I've already downloaded the.

38
00:02:59,870 --> 00:03:08,360
So I have already downloaded the code from our test on our section, and I'm just going to start working

39
00:03:08,360 --> 00:03:11,210
from here, so I'm going to open the visual studio code.

40
00:03:11,510 --> 00:03:17,870
And this code is going to be exactly the same code that we actually saw in our earlier section.

41
00:03:18,170 --> 00:03:21,340
And I'm actually going to make use of this guy as well.

42
00:03:21,350 --> 00:03:28,150
So I'm just going to do an IBM install and it's going to install all the dependencies and stuff.

43
00:03:28,160 --> 00:03:30,920
So no change on those areas at least.

44
00:03:31,220 --> 00:03:37,860
And we are going to start creating the framework which so-called framework over here.

45
00:03:38,390 --> 00:03:43,310
So I'm going to create a folder and I'm going to name this as probably a framework.

46
00:03:44,120 --> 00:03:51,110
And within this particular framework folder, I'm going to create a new folder and I'm I to call this

47
00:03:51,110 --> 00:03:52,330
as maybe pages.

48
00:03:52,490 --> 00:03:57,680
So because we can write some page optimal kind of code, I'm actually going to create something like

49
00:03:57,680 --> 00:04:05,660
a page and then I'm going to create a login page, dot this file just, you know, down that I'm actually

50
00:04:05,660 --> 00:04:07,730
creating a typescript file this time.

51
00:04:08,210 --> 00:04:12,650
And I also need to create a new folder under framework.

52
00:04:12,950 --> 00:04:20,830
I'm going to call this as a tester data or something like that, where we used to hold our test data,

53
00:04:21,620 --> 00:04:28,430
uh, basically someone to create a new file called Call This, as probably did our dart.

54
00:04:29,790 --> 00:04:34,440
And Jason, remember these things we already did in our earlier section of this course, I'm just going

55
00:04:34,440 --> 00:04:40,740
to bringing in the same ideology over here, but I'm not going to really cover a lot of details because

56
00:04:40,740 --> 00:04:42,220
we have already covered these shooters.

57
00:04:42,240 --> 00:04:47,070
I'm just going to copy paste some of the course from that, and then I'm actually going to create one

58
00:04:47,070 --> 00:04:49,170
more folder under the framework.

59
00:04:49,170 --> 00:04:54,930
And I'm going to call this as probably tests, which is going to have all our tests which are going

60
00:04:54,930 --> 00:04:55,460
to be using.

61
00:04:55,740 --> 00:04:56,430
That's it.

62
00:04:56,820 --> 00:05:01,080
And let's call this test as probably a.

63
00:05:03,410 --> 00:05:09,440
Login to start specked dark days, so if you remember your earlier section, while we're discussing

64
00:05:09,440 --> 00:05:13,070
about astronomer's, we use this spectators concept.

65
00:05:13,310 --> 00:05:16,360
So I'm just going to use the exact same concept over here as well.

66
00:05:17,060 --> 00:05:22,280
And you may be wondering what is going to be the login page start going to look like?

67
00:05:22,760 --> 00:05:26,100
Well, guys, it is going to be very, very simple.

68
00:05:26,150 --> 00:05:29,090
All I'm going to do is I'm just going to do an import.

69
00:05:29,090 --> 00:05:37,370
And because we are using typescript like we used in our test runner over here, I'm just going to use

70
00:05:37,400 --> 00:05:46,670
the playwright, something like this, and then I'm going to create a class I want to call this as login

71
00:05:46,670 --> 00:05:47,240
page.

72
00:05:47,990 --> 00:05:55,490
And within this login page, I'm actually going to create a page, something like this, which is something

73
00:05:55,490 --> 00:05:59,060
I can use within my constructor over here.

74
00:05:59,060 --> 00:06:05,420
So I'm probably going to run this section itself very quickly because this is mostly towards the JavaScript

75
00:06:05,420 --> 00:06:13,070
kind of coding practices, which you can write something like a constructor's and the other classes

76
00:06:13,070 --> 00:06:13,520
and stuff.

77
00:06:13,520 --> 00:06:19,610
I'm already covered about the constructors classes and everything on my typescript.

78
00:06:20,750 --> 00:06:25,970
The basic cause I mean, you can go ahead and watch that on YouTube, it's already there for free.

79
00:06:26,030 --> 00:06:29,000
You can go and watch how the contractors work and type scripts and stuff.

80
00:06:29,300 --> 00:06:36,230
But over here, I'm just going to write a very, very super simple course code, something like this.

81
00:06:36,590 --> 00:06:43,520
So what I'm doing in here is I'm creating constructor for the page and we need to start getting our

82
00:06:43,640 --> 00:06:45,290
start using this particular page.

83
00:06:45,310 --> 00:06:48,140
So basically, this page is nothing but our playwrite page.

84
00:06:48,530 --> 00:06:51,680
And within this page we are going to start write our code.

85
00:06:51,960 --> 00:06:56,930
So you got the idea right, because we have the pages over here and we have the test and this is the

86
00:06:56,930 --> 00:06:57,490
test data.

87
00:06:57,500 --> 00:07:01,700
So we are going to write a code which is going to look more like a page object model code.

88
00:07:01,940 --> 00:07:04,250
And this is what we'll be doing in this section.