1
00:00:00,100 --> 00:00:04,100
In the previous video, we showed you how
to use the then keyword on the promises

2
00:00:04,100 --> 00:00:06,870
returned by various Selenium
webdriver methods, but

3
00:00:06,870 --> 00:00:09,210
the results in code was kind of a mess.

4
00:00:09,210 --> 00:00:12,450
In this video, we'll show you a better
way to handle those promises,

5
00:00:12,450 --> 00:00:14,735
a way that we'll use for
the rest of this course.

6
00:00:14,735 --> 00:00:19,610
Node.js supports the async and
await keywords, which are a couple

7
00:00:19,610 --> 00:00:24,685
recent additions to the JavaScript that
make working with promises much easier.

8
00:00:24,685 --> 00:00:27,510
Async marks a function as asynchronous.

9
00:00:27,510 --> 00:00:32,170
Within asynchronous functions, you can use
the await keyword, before function calls,

10
00:00:32,170 --> 00:00:33,685
to return a promise.

11
00:00:33,685 --> 00:00:34,660
Await waits for

12
00:00:34,660 --> 00:00:38,500
the promise to resolve, then returns
the promise's resulting value.

13
00:00:38,500 --> 00:00:42,040
It's a much cleaner way to
write code that uses promises.

14
00:00:42,040 --> 00:00:45,171
So let's go through our test and
update it to use async, and await.

15
00:00:46,230 --> 00:00:50,800
In order to use the Await keyword, we need
to indicate this function is asynchronous.

16
00:00:50,800 --> 00:00:56,000
We do that by adding the async
keyword before the function keyword.

17
00:00:56,000 --> 00:00:59,820
Calling build to build the driver is
still going to return a promise, but

18
00:00:59,820 --> 00:01:01,920
instead of calling then on that promise,

19
00:01:01,920 --> 00:01:06,670
we can place the await keyword right
before the call that returns the promise.

20
00:01:06,670 --> 00:01:10,750
So let's take our call
to emv.builder.build and

21
00:01:10,750 --> 00:01:14,120
put the await keyword right before it.

22
00:01:14,120 --> 00:01:17,562
When JavaScript sees the await keyword,
it will pause the execution

23
00:01:17,562 --> 00:01:21,150
of the asynchronous function and
wait for the promise to resolve.

24
00:01:21,150 --> 00:01:24,670
When it does, await will return
the resolved promise's value.

25
00:01:24,670 --> 00:01:26,850
That is the new driver object.

26
00:01:26,850 --> 00:01:30,390
We can then assign that object
to a variable named driver.

27
00:01:32,820 --> 00:01:35,180
So let's get rid of these
promises callbacks.

28
00:01:35,180 --> 00:01:39,910
Driver.get is still going to
return a promise as well, but

29
00:01:39,910 --> 00:01:44,320
typing await before the call will pause
execution until the page is retrieved and

30
00:01:44,320 --> 00:01:45,388
the promise is resolved.

31
00:01:45,388 --> 00:01:52,880
Await driver.get(url).

32
00:01:52,880 --> 00:01:54,765
So again we can get rid of the old code.

33
00:01:54,765 --> 00:01:59,260
Driver.find elements is going
to return another promise.

34
00:01:59,260 --> 00:02:01,658
So we'll make use of
the await keyword again.

35
00:02:01,658 --> 00:02:06,059
Await driver.find elements

36
00:02:06,059 --> 00:02:11,519
(By.id('invitedList')).

37
00:02:16,544 --> 00:02:20,900
And now instead of another promise, we
should have our actual list of elements.

38
00:02:20,900 --> 00:02:23,021
So we can just check to
ensure that it's not empty.

39
00:02:28,026 --> 00:02:33,581
And finally we can just tell the driver
to close the browser, driver.quit();.

40
00:02:35,929 --> 00:02:39,969
Whoops, it looks like I forgot to
assign the elements that were found

41
00:02:39,969 --> 00:02:41,580
to the elements variable.

42
00:02:41,580 --> 00:02:45,030
Let me go back and
do that right here, there we go.

43
00:02:46,235 --> 00:02:50,520
Okay, save our changes and go to
the terminal and let's try running it.

44
00:02:53,780 --> 00:02:55,240
And we get the same result.

45
00:02:55,240 --> 00:03:00,670
Web driver connects to our website and
checks to make sure invitee list is there.

46
00:03:00,670 --> 00:03:02,970
This code looks a lot cleaner, right.

47
00:03:02,970 --> 00:03:05,700
Async and await are a new
edition to the JavaScript so

48
00:03:05,700 --> 00:03:07,610
they're not deported everywhere yet.

49
00:03:07,610 --> 00:03:11,660
A lot of the Selenium JavaScript examples
out on the web still use then, but

50
00:03:11,660 --> 00:03:14,490
async and await will be everywhere soon.

51
00:03:14,490 --> 00:03:18,330
The Selenium maintainers are strongly
encouraging developers to start using

52
00:03:18,330 --> 00:03:20,060
them, so now is the time to switch.

53
00:03:21,120 --> 00:03:24,340
By the way, one little change I'm
going to make for upcoming videos.

54
00:03:24,340 --> 00:03:28,060
The output of all the tests thus far has
included results of running the test in

55
00:03:28,060 --> 00:03:30,040
both Chrome and Firefox.

56
00:03:30,040 --> 00:03:34,011
To make the output of upcoming
tests easier to read,

57
00:03:34,011 --> 00:03:40,330
I'm going to uninstall the Gecko driver
package from my system now, npm uninstall

58
00:03:40,330 --> 00:03:47,092
-g geckodriver But
you can and should leave as

59
00:03:47,092 --> 00:03:51,530
many browser drivers as possible installed
on your system when following along.

60
00:03:51,530 --> 00:03:54,144
So you can see how everything
works with the different browsers.