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.