1 00:00:00,220 --> 00:00:04,810 So far we've been using ids in CSS selectors to locate elements within 2 00:00:04,810 --> 00:00:05,590 a page. 3 00:00:05,590 --> 00:00:09,040 Those are usually the best and most stable ways to find elements. 4 00:00:09,040 --> 00:00:12,170 But sometimes an element doesn't have a usable id and 5 00:00:12,170 --> 00:00:15,510 there's no good way to select it with CSS either. 6 00:00:15,510 --> 00:00:18,890 In that event, web driver has a by JS locator 7 00:00:18,890 --> 00:00:22,140 to that's let you use JavaScript code to find the element. 8 00:00:22,140 --> 00:00:26,280 When using the by JS locator you can write ordinary JavaScript code 9 00:00:26,280 --> 00:00:28,290 just like you might write as part of any web page. 10 00:00:29,290 --> 00:00:33,010 In this last video of the course, Ill show you how it works. 11 00:00:33,010 --> 00:00:35,500 To use the by JS locator effectively, 12 00:00:35,500 --> 00:00:38,150 you'll need to be familiar with writing JavaScript for the web. 13 00:00:39,160 --> 00:00:43,260 If you're not and you'd like to learn more, see the teacher's notes. 14 00:00:43,260 --> 00:00:47,200 We want to create a form that submits its data via AJAX without reloading 15 00:00:47,200 --> 00:00:48,490 the whole page. 16 00:00:48,490 --> 00:00:52,450 Right now, we just have Cancel and Save buttons for the form. 17 00:00:52,450 --> 00:00:57,560 When we click Save, we update the text of a span element with an id of status 18 00:00:57,560 --> 00:00:59,090 to show that the form has been saved. 19 00:01:00,150 --> 00:01:03,740 Let's write a test to ensure that the status always gets updated when we click 20 00:01:03,740 --> 00:01:04,460 the Save button. 21 00:01:06,020 --> 00:01:08,290 We start our test just like all the others, 22 00:01:08,290 --> 00:01:11,580 importing the WebDrivers objects and functions we need. 23 00:01:11,580 --> 00:01:14,420 We also import the page object class we're going to set up. 24 00:01:15,500 --> 00:01:19,327 Our test is going to ensure that the status text gets updated when we click 25 00:01:19,327 --> 00:01:20,277 the Save button. 26 00:01:25,198 --> 00:01:28,312 The test itself won't be much different from the ones we defined in 27 00:01:28,312 --> 00:01:29,450 previous videos. 28 00:01:29,450 --> 00:01:32,660 We call a method that we're going to define on our page objective to click 29 00:01:32,660 --> 00:01:33,370 the save button. 30 00:01:34,440 --> 00:01:38,132 Once that's done, we locate the span element that shows the status. 31 00:01:44,260 --> 00:01:46,228 We get the status element's text. 32 00:01:50,231 --> 00:01:54,809 Finally, we assert that the status includes the string saved, 33 00:01:54,809 --> 00:01:56,180 let's save that. 34 00:01:57,440 --> 00:02:00,080 Not much different than previous test, right? 35 00:02:00,080 --> 00:02:01,390 But writing those methods for 36 00:02:01,390 --> 00:02:03,850 the page object, is going to be a little more difficult. 37 00:02:05,010 --> 00:02:07,198 Let's go back to our browser, and I'll show you what I mean. 38 00:02:07,198 --> 00:02:14,700 If I right-click on the buttons and choose inspect, it will show their html code. 39 00:02:14,700 --> 00:02:17,230 You can see that they don't have any ids or any or 40 00:02:17,230 --> 00:02:21,560 any other attributes that we can use to easily tell them apart using WebDriver. 41 00:02:21,560 --> 00:02:24,460 If we just select any old button element we could wind up with 42 00:02:24,460 --> 00:02:26,390 a cancel button instead of the save button. 43 00:02:27,490 --> 00:02:30,540 Writing HTML in this way isn't really best practice, but 44 00:02:30,540 --> 00:02:33,120 sometimes the app is just coded the way it's coded. 45 00:02:33,120 --> 00:02:35,498 It's not really within the QA team's control. 46 00:02:35,498 --> 00:02:37,010 That's okay though, 47 00:02:37,010 --> 00:02:40,990 we can use a JavaScript locator to help us find the right button. 48 00:02:40,990 --> 00:02:43,300 Let's go into our page object class and add one. 49 00:02:44,430 --> 00:02:45,170 The locator for 50 00:02:45,170 --> 00:02:48,760 this status span will be pretty simple, we can locate that by its ID. 51 00:02:50,480 --> 00:02:54,750 To write a locator for the Save button, we'll use the By.js locator. 52 00:02:54,750 --> 00:02:56,660 You call the By.js method and 53 00:02:56,660 --> 00:03:00,800 pass it a callback function that returns the element you want to select. 54 00:03:00,800 --> 00:03:01,900 Within that function, 55 00:03:01,900 --> 00:03:05,380 we can use JavaScript code just like we would in the web page itself. 56 00:03:07,340 --> 00:03:12,560 Just like in ordinary JavaScript code, the document object represents the web page. 57 00:03:12,560 --> 00:03:16,030 And as always, it has a getElementsByTagName method 58 00:03:16,030 --> 00:03:18,380 that we can use to find all the button elements. 59 00:03:19,490 --> 00:03:23,320 All the other features of ordinary JavaScript are available to us too. 60 00:03:23,320 --> 00:03:26,580 Here we write a for loop to loop over the array of button elements, 61 00:03:26,580 --> 00:03:28,020 and find the button we want. 62 00:03:30,379 --> 00:03:34,660 We test whether the current button has text content of save. 63 00:03:34,660 --> 00:03:36,688 If it does, we've found our element. 64 00:03:39,030 --> 00:03:41,572 We return that element from the function, and 65 00:03:41,572 --> 00:03:44,190 that becomes the result of the By.js locator. 66 00:03:47,250 --> 00:03:51,366 Now we need to add a clickSave method, which will actually click the save button. 67 00:03:53,836 --> 00:03:57,260 Since we already have the locator written, this part is easy. 68 00:03:57,260 --> 00:04:00,066 We just call the driver's find element method, and 69 00:04:00,066 --> 00:04:02,118 pass it the locator we defined above. 70 00:04:06,779 --> 00:04:09,440 Then we call the click method on the button it returns. 71 00:04:11,390 --> 00:04:15,546 Let's save that, and let's go to our terminal and try running it. 72 00:04:18,196 --> 00:04:19,330 Our test passes. 73 00:04:20,440 --> 00:04:26,571 Let me go back to the test and comment out the portion that quits the driver browser, 74 00:04:26,571 --> 00:04:31,311 save that and try re-running it so I can show you what happened. 75 00:04:34,930 --> 00:04:37,840 The driver launched the test page, and click the save button. 76 00:04:38,840 --> 00:04:42,530 Then it checked the status element to make sure its text was updated. 77 00:04:43,780 --> 00:04:45,290 It looks like everything's working. 78 00:04:46,310 --> 00:04:49,317 Now you know how to automate your testing, using Mocha and 79 00:04:49,317 --> 00:04:53,190 Selenium WebDriver If you need to write your test in a different language, 80 00:04:53,190 --> 00:04:55,045 check the teachers notes for this video. 81 00:04:55,045 --> 00:04:58,710 We'll have links that will help you use WebDriver with other languages and 82 00:04:58,710 --> 00:05:00,370 testing frameworks there. 83 00:05:00,370 --> 00:05:02,720 Be sure to check the teachers notes for next steps and 84 00:05:02,720 --> 00:05:05,840 further reading as well, thanks for watching.