Detailed Notes
Selenium is a popular way to automate browser activity, record sessions, and setup testing scripts. In this series of tutorials we look at using Java and Selenium for all your browser automation needs.
Transcript Text
[Music] all right so once we have our locator we now need to use that locator to actually retrieve that web element so we can actually do something so for that we need a web element class and here we will call this item search and we will say equal now in order to find the web element you need to use the web driver that we instantiated so we want to actually now connect to using the driver go to the browser and we want to use the find element method to pass in our locator to actually go look up that web element that's on the page and once we find the element we want to do something so if we if we look at the methods for web element you can do things like clear an input field you can click the field or button or link uh you can also find elements within the element so if you were dealing with like ordered lists or linked or ordered lists or unordered lists you could actually grab the list itself and then loop through all the elements inside of the list if you want to interact with each list item other things you can do you can get the size you can get the location you can get the text if there's text you can get the tag name and so on you can also get the attribute so you can actually go pull out the specific attribute values uh or attribute ids to get the values that's associated with it so if for example with the walmart we have all these additional attributes inside of our tag here so we have the area autocomplete so we can actually look for these attributes and make sure that they are there and make sure that they are set to the correct value okay now for this particular case i want to just type in the text playstation so in order to simulate a user typing you would use the method send key and here you can pass in a character sequence so we will type in play station now right now this will just put in the text playstation now we could look for the additional web element of this little magnifier which is our search button which if we inspect it we see it is a image wrapped with a link inside of a button here so if we were to hover over and click this we're actually clicking the button which will do a submit to our form however i don't want to look up another web element here i just want to make sure that i can type in playstation and hit the enter key which should do the search for playstation so to simulate that over here in our code we will do our item search again for our web element and we are going to send another set of keys but this time we're going to use the keys class which comes in cylinder which gives you access to all the additional keys that are not standard text so you have the plus you have the minus you have the alt key the arrow keys you also have the enter key we will simulate passing in enter and then we will give the page time to load and then it should open up another page with our search so we should see something like this so we should see a list of playstation items pop up in our window here that's what we should see now over here on the left we also notice that when we started out we didn't have the navigation on the left to filter out our search criteria so if we start here with playstation then we get a filter list over here on the left so what i want to do for my next step is i want to look for this link playstation so if i in if i just copy that just copy the text we're going to look at the other two methods that you can use with by so here this will be filter locator and this will be by dot link text or partial link text so we'll start with length text and we'll actually put in the full text playstation is for console but we could also simplify this and actually just look for ps4 now there's a catch to this if you use the link text or partial link text you have to make sure that this text is only assigned to one link if you have more than one link or more than one location where this text is attached to a link you're going to get back more than one element or locator when you actually look it up okay again we want to come back out here we want to inspect this guy to bring up our development console make sure we do our control f to bring up our search and we will type in the text we're looking for all right so we see it's here it's in one location here where it's text oh it's in another location down here in text so this looking for this particular one might not work uh here it is inside of text here so that guy should work because he is a link this one actually won't be a problem because if you look at the div tag not a link tag first one as well was also a div not a link and this guy's just in some javascript so we're okay there so we should be all right with that and what should happen is we should see it click the playstation 4 and then we should see the identification here the filter on the left change right so we have our search and then we will need another web element and again we will use driver find element we'll use our search filter this time now this time because it's a link we just want to click we just want to actually click our webinar now we just want to simulate a user click then again we'll add a little short pause here now if you actually do start creating uh your own selenium test or automated tests do not use thread dot sleep this is just for presentation purposes only you would want to actually look up how to use the weights class a book we can cover that in another topic if you guys find this interesting all right so we'll run this guy so we should see it type in playstation it did we clicked enter and we should see the filter over here change and it did so so far we've navigated through we've clicked a few things so now let's try one additional step let's add uh an actual validation so let's make sure that the first item in our list here uh contains the sony playstation 4 terabyte one slim gaming so here we'll do inspect now this is where uh this is a good example of where xpath is going to come in handy or css selectors if you notice this text is just inside of a span tag here but it does not have any attributes whatsoever no id no name no link so we can't really use any of the simple locator methods like name id class name or even link text we have to actually do xpath or css selector so here we want to probably go up and find the very first place where we actually have an id or some type of identifier now i'm going to show you a cheat way to do this so you can do ctrl f or you can right click on the element go back to inspect get to the actual element so we're inside of here actually i want the span because i want the whole text so we want this guy you can right click in the element code and copy now gives you the option to copy your css selector full xpath or expat so we will copy the x path and we will paste it in here now the reason i didn't just take this x back and run is because as you see here it's got a whole bunch of pathways to get to our particular span so we're doing div div div one two three um this could get tricky because if they actually change uh any of the paths information in here you're gonna break your look up for this test so my recommendation is actually to get the search product results which gives you this guy here and then we want to walk down and get the div here and actually i want the span all the spans and we have our search results we have our list view so this guy is really not that clean we want to get down to this guy here so we come down here project image span our divs still not quite where we want so if we do inspect again so what we could do is we can look for the search product title for list view here so let's actually change this up so a chance to do it by class and look for this oh look now we actually get the 20 items so we have 20 results returned to us so this is going to give us our list of 20. and now here we could then walk into that list so we can take the first one and we can go okay expand so as you can see it's now returning me all the spans so it's going to return me all the titles here all right so let's take this one and let's actually use the other find method so once we are on this page once we have our results we can do another buy locator and this is going to be search results equals by dot xpath now since this locator is going to return us multiple elements we need to create a list of web elements this will be our locator [Music] again we do use the driver class but instead of the find element method we're going to use the find elements method which returns us a list of web bills you use this guy when you are going to be retrieving more than one and you want to make sure that you import the java util list not the awt that one won't work and then we want to look for the text sony playstation 4 one terabyte splint or let's look for one this text here all right if i come back over here we're going to be looking for the string expected text okay and now let's actually loop through our search results and find the expected text now because text is actually text here this is inside of our tag we can use the get text method to actually get the text inside of our tag to do the comparison so here we'll create a for loop web element and we will do search result and we'll do the search results so i'll loop through our list and in here if our search result dot get text dot contains our expected text let's see one additional condition here so let's add a boolean flag so we'll start with true and so pass before true and we'll break it out all right so if our search results dot get text contains our text set are going to true saying the test pass and break out of our loop if it does not find it it will result in false so we'll do a system out and test results and we'll write out what we expected and run this guy upper window we enter in our text we hit enter we click the link on the left and we now look through our results and we see that it found the text for one terabytes one gaming console so this is it in a nutshell as to how to use uh locators uh within selenium to look up different uh or in order to use different methods to look up your locators in your browser also with firefox chrome and edge now you can also pull up the uh developer console here and go to the elements and each of these browsers should have some type of lookup locator down here that you can use to look up your web elements within your page does anyone have any questions okay no questions like to thank you guys for joining us today we appreciate your time and if you'd like to discuss any of these topics further you can send us questions comments or suggestions through info developer.com uh you can click or contact us on our developer.com site you can follow us on twitter at developernerd or you can still find us on facebook.com developer.org and we also have a youtube video link and we're also on vimeo our goal is making every developer better thank you and have a great day [Music] you
Transcript Segments
[Music]
all right so once we have our locator we
now need to use that locator to actually
retrieve that web element so we can
actually do something
so for that we need a web
element
class
and here we will call this item search
and we will say equal
now in order to find the web element you
need to use the web driver that we
instantiated so we want to actually now
connect to using the driver go to the
browser and we want to use the find
element method
to pass in our locator to actually go
look up that web element that's on the
page and once we
find the element we want to do something
so if we
if we look at the methods for web
element you can do things like clear an
input field you can click the field or
button or link
uh you can also find elements within the
element so if you
were dealing with like ordered lists or
linked
or
ordered lists or unordered lists you
could actually grab the list itself and
then
loop through
all the elements inside of the list if
you want to interact with each list item
other things you can do you can get the
size you can get the location you can
get the text if there's text you can get
the tag name and so on you can also
get the attribute so you can actually go
pull out the
specific attribute values
uh or attribute ids to get the values
that's associated with it so if
for example with the walmart
we have all these additional attributes
inside of our
tag here so we have the area
autocomplete so we can actually look for
these attributes and make sure that they
are there and make sure that they are
set to the correct value
okay
now for this particular case i want to
just
type in
the text playstation so in order to
simulate a user
typing you would use the method send key
and here
you can pass in a character sequence so
we will type in
play
station
now right now this will just put in the
text playstation now we could
look for the additional web element
of this little magnifier which is our
search button which if we inspect it
we see it is a
image wrapped with a link
inside of a button here so if we were to
hover over and click this we're actually
clicking the button which will do a
submit to our form
however
i don't want to look up another web
element here i just want to make sure
that i can type in playstation
and hit the enter key which should do
the search for playstation
so to simulate that over here in our
code we will do our item search again
for our web element
and we are going to send another set of
keys but this time we're going to use
the keys class
which comes in cylinder which gives you
access to all the additional keys that
are not standard text so you have the
plus you have the minus you have the alt
key the arrow keys you also have the
enter key
we will
simulate passing in enter
and then we will give
the page time to load
and then it should open up another page
with our search so we should see
something like this
so we should see a list of playstation
items pop up in our window here that's
what we should see
now over here on the left we also notice
that
when we started out we didn't have the
navigation on the left to filter out our
search criteria
so if we start here with playstation
then we get a filter list over here on
the left so what i want to do for my
next step is i want to look for this
link playstation
so if i in
if i just copy that just copy the text
we're going to look at the other two
methods that you can use
with by
so here this will be
filter
locator
and this will be by dot
link text or partial link text so we'll
start with length text and we'll
actually put in the full text
playstation is for console
but we could also
simplify this and actually just look for
ps4
now there's a catch to this if you use
the link text
or partial link text
you have to make sure that
this text
is only assigned to one link
if you have more than one link or more
than one location where this text is
attached to a link you're going to get
back more than one element
or locator when you actually look it up
okay
again we want to come back out here we
want to inspect this guy
to bring up our development console
make sure we do
our control f to bring up our search
and we will type in the text we're
looking for
all right so we see it's here it's in
one location here where it's text
oh it's in another location down here in
text so this
looking for this particular one might
not work
uh here it is inside of text here so
that guy should work because he is a
link
this one actually won't be a problem
because if you look at the div tag not a
link tag
first one as well was also a div not a
link
and this guy's just in some javascript
so we're okay there so we should be all
right with that
and what should happen is we should see
it click the playstation 4 and then we
should see the identification here the
filter on the left change
right so we have our search
and then we will
need another web element
and again we will use driver
find
element
we'll use our search filter this time
now this time because it's a link we
just want to click
we just want to actually click
our
webinar
now we just want to simulate a user
click
then again we'll add a little short
pause here
now if you actually do start creating uh
your own selenium test or automated
tests do not use thread dot sleep this
is just for presentation purposes only
you would want to actually look up how
to use the weights class
a book
we can cover that in another topic if
you guys find this interesting
all right so we'll run this guy so we
should see it type in playstation
it did we clicked enter
and we should see the filter over here
change and it did so so far we've
navigated through we've clicked a few
things
so now let's try one additional step
let's add uh an actual validation so
let's make sure that the first item in
our list here uh contains the sony
playstation 4 terabyte one slim gaming
so here we'll do
inspect
now this is where uh this is a good
example of where xpath is going to come
in handy or css selectors if you notice
this text is just inside of a span tag
here but it does not have any attributes
whatsoever no id no name no link so we
can't really use any of the simple
locator methods like name id
class name or even link text
we have to actually do xpath or css
selector
so here we want to probably go up and
find the very first place where we
actually have an id or some type of
identifier
now i'm going to show you a
cheat way to do this
so you can do ctrl f
or
you can right click
on the element
go back to inspect get to the actual
element so we're inside of here
actually i want the span because i want
the whole text
so we want this guy
you can right click in the element code
and copy now gives you the option to
copy your
css selector
full xpath or expat
so we will copy the x path and we will
paste it in here
now the reason i didn't just take this x
back and run is because as you see here
it's got a whole bunch of
pathways to get to our particular span
so we're doing div div div one two three
um
this could get tricky because if they
actually change
uh any of the paths information in here
you're gonna break your look up for this
test so my recommendation is actually to
get the search product results
which gives you this guy here
and then we want to walk down and
get the div here and actually i want the
span
all the spans
and
we have our search results
we have our list view
so this guy is really not that clean we
want to get down to this guy here
so we come down here project image span
our divs
still not quite where we want so if we
do inspect again
so what we could do
is we can look for the search product
title for list view here
so let's actually change this up so a
chance to do it by class
and look for this oh look now we
actually get the 20 items so we have 20
results returned to us so this is going
to give us our list of 20.
and now here
we could then walk into that list so we
can take the first one
and we can go okay
expand
so as you can see it's now returning me
all the spans
so it's going to return me all the
titles here
all right so let's take this one
and let's actually use the other
find method
so once we are on this page once we have
our results we can do another buy
locator
and this is going to be
search
results
equals by
dot xpath
now
since this
locator is going to return us multiple
elements we need to create a list of web
elements
this will be our locator
[Music]
again we do use the driver class but
instead of the find element method we're
going to use the find elements method
which returns us a list of web bills you
use this guy when you are going to be
retrieving more than one
and you want to make sure that you
import
the
java util list not the awt that one
won't work
and then we want to look for the text
sony playstation 4 one terabyte splint
or let's look for one
this text here
all right if i come back over here we're
going to be looking for the string
expected
text
okay and now
let's actually loop through
our search results and find the expected
text
now because text is actually text here
this is inside of our tag we can use the
get text
method to actually
get the text inside of our tag to do the
comparison so here we'll create a for
loop
web element
and we will do
search
result
and we'll do the search
results
so i'll loop through our list
and in here
if
our search
result dot get text
dot contains
our expected text
let's see
one additional condition
here so let's add a boolean flag
so we'll start with true
and so pass
before true
and we'll break it out
all right so if our search results dot
get text contains our text
set are going to true saying the test
pass and break out of our loop
if it does not find it
it will
result in false so we'll do a system out
and
test
results
and we'll write out what we expected
and run this guy
upper window we enter in our text we hit
enter we click the link on the left
and we now look through our results
and we see that it found the text
for one terabytes one gaming console
so this is
it in a nutshell as to how to use uh
locators
uh within selenium to look up different
uh
or in order to use different methods to
look up your locators in your browser
also with firefox chrome and edge now
you can also pull up the
uh developer console here and go to the
elements and each of these browsers
should have some type of
lookup locator down here that you can
use to look up your web elements within
your page
does anyone have any questions
okay
no questions
like to thank you guys for joining us
today we appreciate your time and if
you'd like to discuss any of these
topics further you can send us questions
comments or suggestions through info
developer.com
uh you can click or contact us on our
developer.com site
you can follow us on twitter at
developernerd or you can still find us
on facebook.com developer.org and we
also have a
youtube video link and we're also on
vimeo our goal is making every developer
better thank you and have a great day
[Music]
you