1
00:00:01,830 --> 00:00:07,200
All right, so we're back once again, and we all know that the application that we're going to automate

2
00:00:07,200 --> 00:00:10,410
is mostly on the Abdulsalam website.

3
00:00:10,650 --> 00:00:18,660
So we need to somehow write the code in such a way that we need to grab those details from the from

4
00:00:18,660 --> 00:00:23,260
the UI and we're going to create an abstraction of the complete DOM element over here.

5
00:00:23,640 --> 00:00:23,970
So.

6
00:00:27,350 --> 00:00:33,500
If we go to this particular page, the Abdah Tommy dot com website, so we have a login button over

7
00:00:33,500 --> 00:00:37,430
here, we need to click this Amedee under the username and password over here.

8
00:00:37,670 --> 00:00:45,530
And the user name can be identified to using it's using its name or ID, whatever it is, and then we

9
00:00:45,530 --> 00:00:51,220
can perform an operation over there so we can write the exact same code over here as well.

10
00:00:51,620 --> 00:01:00,080
So as we all know that the page object model, we used to write the whole page element within a class

11
00:01:00,080 --> 00:01:08,030
file so that we can access just that element like an operation element on this particular page, so

12
00:01:08,030 --> 00:01:12,830
that we can actually hold all the elements as well as the operation that we perform on the particular

13
00:01:12,830 --> 00:01:13,180
page.

14
00:01:13,190 --> 00:01:20,570
For example, in the login page, I'm probably going to have the login link as well, or a link login,

15
00:01:21,380 --> 00:01:28,100
and then I'm going to write a async method because we know that everything in the.

16
00:01:29,810 --> 00:01:35,900
JavaScript is actually a thing that the playwright is fully using, so I need to write everything in

17
00:01:35,900 --> 00:01:44,750
an asynchronous operation, so I'm going to identify the login link using its text identifier, something

18
00:01:44,750 --> 00:01:46,280
like this.

19
00:01:51,290 --> 00:01:58,130
And you can see that because this page is going to be basically an asynchronous page, as we all know

20
00:01:58,550 --> 00:02:05,300
over here, and I need to somehow get this particular page and its value into an asynchronous method

21
00:02:05,300 --> 00:02:07,520
which is going to store the value on this particular.

22
00:02:08,970 --> 00:02:14,280
Login page so that he can resolve the promise for the element handles as well, and that's exactly what

23
00:02:14,280 --> 00:02:16,800
I'll be doing for the username as well.

24
00:02:17,180 --> 00:02:20,890
For example, for the username, which I am going to be writing.

25
00:02:21,180 --> 00:02:29,490
I'm going to create an asynchronous arrow function method, which is going to hold the page of I'm going

26
00:02:29,490 --> 00:02:32,670
to identify the particular element, probably using its input.

27
00:02:34,490 --> 00:02:35,090
Of.

28
00:02:36,180 --> 00:02:42,960
Name is equal to I guess it's user name like that.

29
00:02:44,010 --> 00:02:44,520
That's it.

30
00:02:44,790 --> 00:02:47,790
So this is the way that I can identify the user name as well.

31
00:02:48,090 --> 00:02:53,220
Similarly, I can identify the password and the submit button, something like this.

32
00:02:53,670 --> 00:03:04,740
So you can see that we are actually creating an abstraction of all the UI elements of the page in one

33
00:03:04,740 --> 00:03:13,020
place, because so far, all these days, while you write any test, we write all the test on one single

34
00:03:13,860 --> 00:03:17,390
one single class file, something like these.

35
00:03:17,400 --> 00:03:17,830
Right.

36
00:03:17,850 --> 00:03:19,980
This is how we used to write and.

37
00:03:23,190 --> 00:03:29,230
You see or hear all the corsets over here, which is the way that we were writing all these days under

38
00:03:29,260 --> 00:03:35,740
the intent of and with the test and with the designers were able to abstract it a bit.

39
00:03:35,950 --> 00:03:40,810
But using the space of the model, we can abstract even more something like this, and then we can just

40
00:03:40,810 --> 00:03:42,880
write all the operations that we are looking for.

41
00:03:43,360 --> 00:03:50,740
And now, because this is a login page, we also need to do a click on the link for the login button

42
00:03:51,520 --> 00:03:52,380
or the login link.

43
00:03:52,390 --> 00:04:00,910
So I'm just going to do a public, a sing of click login, something like that, probably.

44
00:04:01,810 --> 00:04:06,940
And then I'm going to do and I'll wait and you can see that this is where the coding goes even more

45
00:04:06,940 --> 00:04:07,420
crazy.

46
00:04:08,110 --> 00:04:15,100
And because it should return an upgrade and our property itself is an, I think, property.

47
00:04:15,430 --> 00:04:20,110
So we need to make this like a log EnLink, something like this.

48
00:04:20,680 --> 00:04:25,810
And then we need to call a click method, which is sitting within our.

49
00:04:27,070 --> 00:04:29,010
Playwright, right?

50
00:04:29,140 --> 00:04:33,870
So this looks a bit more weird coding, but, yeah, this is how you can actually do so.

51
00:04:33,880 --> 00:04:38,050
This is the element that you want to perform a click operation.

52
00:04:38,320 --> 00:04:44,100
And because this click is going to end a raid as well to perform using an array to operation.

53
00:04:44,950 --> 00:04:51,730
And similarly, we need to perform the logging operation as well, which I'm going to do something like

54
00:04:51,730 --> 00:04:58,870
public, I think of login and that is the power of the typescript.

55
00:04:58,870 --> 00:04:59,090
Right.

56
00:04:59,110 --> 00:05:01,770
I mean, you can define the type as well if you want to.

57
00:05:02,140 --> 00:05:06,750
Something like name string and password string.

58
00:05:06,760 --> 00:05:08,830
So you're defining the types over here.

59
00:05:09,280 --> 00:05:12,250
And then we're going to perform the same operation.

60
00:05:12,250 --> 00:05:14,250
I need to perform a Senaki operation.

61
00:05:14,590 --> 00:05:18,390
So this start to use a name.

62
00:05:19,060 --> 00:05:24,270
Um, so the second is nothing but the type operation in in playwrite.

63
00:05:24,760 --> 00:05:26,950
So if I just do something like this.

64
00:05:28,680 --> 00:05:34,680
You can see that it is automatically going to cast it for us, which is pretty nice, and then I need

65
00:05:34,680 --> 00:05:43,110
to type the name and similarly, I want to do for the password and I need to perform a click submit

66
00:05:43,110 --> 00:05:44,630
button, something like this.

67
00:05:44,640 --> 00:05:48,150
So I'm sorry about that, to perform a D.

68
00:05:48,600 --> 00:05:54,120
D and submit quite good.

69
00:05:55,250 --> 00:06:03,290
So that is the click operation, and once everything is done, we then need to start writing our test

70
00:06:03,920 --> 00:06:04,650
over here.

71
00:06:05,210 --> 00:06:12,520
So for writing the test, we actually need to use our fixture of our playwright astronaut.

72
00:06:12,890 --> 00:06:17,710
So this way is going to make things more easier, which we'll be doing in our next video.