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.