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] now if you don't just want to use gif but you actually want to navigate you can also do driver dot dot navigate and the navigate method with our web driver gives us the ability to use the navigation fields of our browser so we can use back and forth so here we can do navigate to we can go back we can go forward let's see forward back we can navigate two so you have the three different options so you can actually do what get does by doing two if you want to use the history you can go back or forward that's just another way to navigate all right now once we have the page open we actually want to do something with it let's go back over here and open up a browser go back to walmart so say we wanted to test our little input box here our search box and we wanted to test for playstation so if i wanted to actually type in oops i didn't need to click that okay so if we wanted to simulate a click inside of this input field and simulate a person typing in playstation and then simulating an enter key we would have to do we'd have to locate this web element first so in your browsers depending upon if you're in chrome or firefox how you look up your window is slightly different but if you go to below this every time they come out with a new update things move around there we are so if you're on mac you go to view developer you want to view source now if you're in windows uh the f12 key typically will open up the window for you all right walmart tom now we'll go and inspect there we go so this brings up the development console and in here you can inspect the individual uh fields that you want to interact with you can also click this little arrow key icon in the development tools here if you click that it turns blue and then you can hover over your page and you'll see all the different web elements get highlighted so we'll go to this guy here and once you left click it will take you to the individual element that you wanted to go to let me hide this piece here we don't care about that right now so in the elements tab here this contains all the source code that's on the page but it allows you to navigate to a certain individual element and so here we have an html element input is of type text so it's an input field now it's got a whole bunch of gallery goop here so we have css information here for class it's got some additional labeling behind the scenes here possibly for some bootstrap or some type of display tool or language that they're using for the page we have auto cap auto complete so this could even possibly be jquery or a bootstrap field uh let's see we have autocorrect placeholder ah here's name so we have a name identifier so this is a form field so when we click submit or click the search field it will pass the name or pass the text in for the name query so it would be query value or name value uh do we have an id we do not so there's different things here that we could search for if i copy this [Music] element and go into our code so if we wanted to interact with this field we have a couple different options so we would use the by class and we will call this this is search locator i like naming things very descriptive um basically comment by name is my typical means of coding these days so we'll do by locator so we'll do buy and we are going to look it up by a couple different ways so here we can do by class names if we did by class name we would have to check out which one of these class names we could use so if we actually copy that if we go back over to our browser inside of our elements tab here if we actually do control f we bring up a little search bar here where we can search by string we can use css selector text or we can use the xpath code to actually configure or look up our so we can start by pasting in the class information you see here we get 101 which is what we want to look for uh let's see we have class h underscore a a a b so we have a couple of different style sheets in here but let's just start with the first one and kind of whittle our way through it to see if we can determine if we can get one of one with that yeah that one doesn't work let's try the next one that one did work okay so if we use a underscore b that will give us this one element so we can identify it this way so if we go back to our code we can look it up like this so this guy will return us one web element so let's see if we don't need class anymore we'll take that out let's see we have name of query so we can look for a name but just to be a hundred percent sure let's come back in here and type in query now query is going to give us a bunch of different things but what we're looking for is we're looking to make sure that query is only applied to one name or id so we got name jquery dick query query selector yeah okay queries unique to our input field here go back over so the next way we can look up is doing so we can take this again but instead of class name do by name here let's see we can do a couple other ways as well so if we go back over to our code or to our browser okay let's see we have query we could oh there is an id so we have an id here global search input if we copy that you should only have one now this is also a good way to test if your page is broken because you're not supposed to have multiple ids on a page it should always be unique so this is a good way to test for that okay so it came back as unique so we can use that one so we could also search for this one and this time we'll do by id now say we didn't have a name field we didn't have so if we didn't have a name we didn't have a link we didn't have text we could actually look up by uh xpath or css selector okay this way so if i do dot we can do by css selector or we could do xpath now these are the two most powerful ways you can actually find web elements on a page and when you're dealing with more abstract or more complicated websites especially those that do not follow typical coding standards or naming conventions in part if you're using like bootstrap or a lot of javascript libraries that are kind of custom built where you don't have control over the id of the labels or the fields then you need to kind of get a little um creative as to how you actually go about finding your input fields that are on your page and to do that you can use xpath which starts out with either the absolute or relative path so if you want to actually walk through your whole page from the top you would start with the relative path of forward slash which starts you at the html now you could do it under the head and then you could go down into the style so you just kind of walk the path we're walking the path from the top which is great but yet we want to deal with this field and it may be way down in the middle of our code well for here what we can do is we can actually use the relative path so we could do slash input well that gives us all our input tags but that's still not going to give us the one that we want it's giving us all seven input fields that are on the page now we can click through till we find the one we want which is this guy and then we have to actually add some additional filter criteria so if you want to actually pull from any of the attributes that are in this tag you would use the at identifier and then you could put in like class you could put in id you could even put in a placeholder so here we did placeholder and we want placeholder equal to search walmart.com and as you can see we have one one so we could use this to pull in our identifier web element as well so this would go inside of the xcap now csf is slightly different than xpath and it's it's cleaner but it can also get ugly as well so what's nice about css is say we want to look up by class instead of us having to actually um use the class here and instead of being able to do equal you could shortcut here so we want a 8b if you see here this does not return us this tag because this lookup is looking for the explicit text that is inside of class now if we're doing it as a css selector we could simply do our tag input and we can do dot telling hey we want to look for a class and then all we have to do is just put in the text so this is a very cleaner way of looking up our information so we could do it by that we could do it by id so if you use pounds you're saying hey i want by id and in our case here the id is global search input so that's another way to do it now if you want to actually navigate or walk into the path with css selectors instead of relative and absolute you use greater than and from there you can walk into the nested tags underneath that here this guy doesn't have one so let's go up to this guy here and let's start with him so we now have this uh the update so we do do so here's our tag we have our id but we want to walk into this guy to actually get our input field which is inside of oh he's inside of this form so we'll take the form here we go all right so we have the form and if you follow the line underneath forum that basically tells you that all of the uh tags here on the right are all nested inside of the form tag here so we want to walk into our path here so if we do form greater than and we do input we're going to get two input fields so the first one is going to be the global search icon or cat id and then the second one is the one we want so we actually want this guy here but what you can do is you can then walk the path and then get the specific child inside of this input here all right so we'll do it the other way we'll just keep it simple we will do the id let's go back over so what we can do here is we can do an input pound here our input pound global search input now you don't necessarily need to do this for every for one web element lookup i'm just walking through the different ways you can actually pull these in so here's an example using the style class name id css selector or expat any questions on these you
Transcript Segments
[Music]
now if you
don't just want to use gif but you
actually want to navigate you can also
do driver
dot
dot navigate
and the navigate method with our web
driver gives us the ability to use the
navigation fields of our browser so we
can use back and forth
so here we can do navigate to
we can go back
we can go forward
let's see forward back we can navigate
two
so you have the three different options
so you can actually do what get does by
doing two
if you want to use the history you can
go back
or forward
that's just another way to navigate
all right now once we have the page open
we actually want to do something with it
let's go back over here and open up a
browser go back to walmart
so say we wanted to test our little
input box here our search box and we
wanted to
test for playstation
so if i wanted to actually type in oops
i didn't need to click that okay so if
we wanted to simulate a click inside of
this input field and simulate a person
typing in playstation
and then simulating an enter key
we would have to do we'd have to locate
this web element first so in your
browsers
depending upon if you're in chrome or
firefox
how you look up your window is slightly
different
but if you go to
below this every time they come out with
a new update things move around there we
are so if you're on mac you go to view
developer you want to view source
now if you're in windows uh the f12 key
typically will open up the window for
you
all right walmart
tom
now we'll go and inspect
there we go so this brings up the
development console and in here you can
inspect the individual uh
fields that you want to interact with
you can also click this little
arrow key icon in the development tools
here if you click that it turns blue and
then you can hover over
your page and you'll see all the
different web elements get highlighted
so we'll go to this guy here and once
you left click it will take you to the
individual
element that you wanted to go to
let me hide this piece here we don't
care about that right now so in the
elements tab here this contains all the
source code
that's on the page but it allows you to
navigate to a certain individual element
and so here we have an html element
input is of type text so it's an input
field now it's got a whole bunch of
gallery goop here so we have css
information here for class it's got some
additional
labeling behind the scenes here possibly
for some bootstrap or some
type of
display tool or
language that they're using for the page
we have auto cap auto complete so this
could even possibly be jquery or a
bootstrap field
uh let's see we have autocorrect
placeholder ah here's name so we have a
name identifier so this is a form field
so when we click submit or click the
search field it will pass the name
or pass the text in for the name
query so it would be query value or name
value
uh do we have an id we do not
so there's different things here that we
could search for if i copy this
[Music]
element
and go into our code
so if we wanted to interact with this
field
we have a couple different options so we
would use the by class
and we will call this
this is
search
locator
i like naming things very descriptive um
basically
comment by name
is my
typical
means of coding these days
so we'll do
by locator so we'll do buy
and we are going to look it up by a
couple different ways so here we can do
by class names
if we did by class name we would have to
check out which one of these class names
we could use
so if we actually copy that if we go
back over to our browser
inside of our elements tab here if we
actually do control f we bring up
a
little search bar here where we can
search by string we can use css selector
text or we can use the xpath code to
actually
configure or look up our
so we can start by pasting in the class
information you see here we get 101
which is what we want to look for
uh let's see we have class h underscore
a
a a b so we have a couple of different
style sheets in here but let's just
start with the first one
and kind of whittle our way through it
to see if we can determine if we can get
one of one with that yeah that one
doesn't work let's try the next one
that one did work okay so if we use
a underscore b
that will give us this one element so we
can identify it this way so if we go
back to our code we can look it up like
this
so this guy will return us one web
element
so let's see if we don't need class
anymore we'll take that out
let's see we have name
of query
so we can
look for a name
but just to be a hundred percent sure
let's come back in here and type in
query
now query is going to give us a bunch of
different things but what we're looking
for is we're looking to make sure that
query is only applied to one name or id
so we got name
jquery dick query query selector
yeah okay queries unique
to our input field here
go back over
so the next way we can
look up
is doing
so we can take this again
but instead of class name
do by
name
here
let's see we can do a couple other ways
as well so if we go back over to our
code or to our browser
okay let's see we have query
we could oh there is an id so we have an
id here global search input if we copy
that
you should only have one now this is
also a good way to test if your page is
broken because you're not supposed to
have multiple ids on a page
it should always be unique so this is a
good way to test for that
okay so it came back as unique so we can
use that one so we could also
search for this one
and this time we'll do by id
now say we didn't have a name field we
didn't have
so if we didn't have a name we didn't
have a link we didn't have text
we could actually look up by uh xpath or
css selector
okay
this way so if i do dot
we can do by css selector
or
we could do
xpath
now these are the two most powerful ways
you can actually find web elements on a
page and when you're dealing with more
abstract or more complicated websites
especially those that do not
follow typical coding standards or
naming conventions
in part if you're using like bootstrap
or a lot of javascript libraries that
are kind of custom built where you don't
have control over the id
of the labels or the fields then you
need to kind of get a little um
creative as to how you actually go about
finding your input fields that are on
your page and to do that you can use
xpath which starts out with either the
absolute or relative path so if you want
to actually walk through your whole page
from the top you would start with the
relative path of forward slash which
starts you at the html
now you could do it under the head
and then you could go down into the
style
so you just kind of walk the path we're
walking the path from the top
which is great but yet we want to deal
with this field and it may be way down
in the middle of our code well for here
what we can do is we can actually use
the relative path so we could do slash
input
well that gives us all our input tags
but that's still not going to give us
the one
that we want it's giving us all seven
input fields that are on the page now we
can click through till we find the one
we want which is this guy
and then we have to actually add some
additional filter criteria so if you
want to actually pull from any of the
attributes that are in this tag you
would use the
at
identifier and then you could put in
like class you could put in id you could
even put in a placeholder so here we did
placeholder
and we want placeholder equal to search
walmart.com
and as you can see we have one one so we
could use this
to pull in our identifier web element as
well so this would go inside of the xcap
now csf is slightly different than xpath
and it's
it's cleaner
but it can also get ugly as well
so what's nice about css
is say we want to look up by class
instead of us having to actually um use
the class here
and instead of being able to do equal
you could shortcut
here so we want a 8b
if you see here this does not return us
this tag because this lookup is looking
for the explicit text that is inside of
class
now if we're doing it as a css selector
we could simply do our tag
input
and we can do dot telling hey we want to
look for a class
and then all we have to do is just put
in the text
so this is a very cleaner way of looking
up our
information so we could do it by that we
could do it by id
so if you use pounds you're saying hey i
want by id
and in our case here the id is global
search input
so
that's another way to do it now if you
want to actually navigate or walk into
the path with css selectors instead of
relative
and absolute you use greater than and
from there you can walk into the
nested tags underneath that
here this guy doesn't have one so let's
go up to this guy here
and let's start with him
so we now have this uh
the update
so we do do
so here's our tag we have our id but we
want to walk into this guy to actually
get
our input field
which is inside of oh he's inside of
this form
so we'll take the form
here we go all right so we have the form
and if you follow the line underneath
forum that basically tells you that all
of the
uh
tags here on the right are all nested
inside of the form tag here
so we want to walk into our path here so
if we do form greater than and we do
input
we're going to get two input fields so
the first one is going to be the global
search icon or cat id
and then the second one is the one we
want so we actually want this guy here
but what you can do is you can then walk
the path and then get the specific
child inside of this
input here
all right so
we'll do it the other way we'll just
keep it simple
we will do the
id let's go back over
so what we can do here
is we can do
an input
pound
here our input pound global search input
now you don't necessarily need to do
this for every for
one web element lookup i'm just
walking through the different ways you
can actually pull these in so here's an
example using
the style class
name id css selector or expat
any questions on these
you