Detailed Notes
In this presentation, we are going to be talking about using the WebDriver IO: Building Automation Scripts using Javascript. Now, this is not really going to be a slide-driven presentation. Instead, we are going to go through the website and talk about the different technologies, and things you can do with WebDriver. Then, we're going to jump into a full hands-on example, building your first project, and looking at some of the different ways you can use WebDriver for testing.
In the past, I've talked about code test frameworks. Such as, topics about the different ways you can build your tests, and how you should test. Plus, we've talked about different things like unit testing, PHP testing, JUnit, every language, essentially own way of testing, and JavaScript's, no different. So open up the link below and enjoy the presentation.
WebDriver IO: Building Automation Scripts in JS Overview:
What is WebDriver IO How to build tests. The different types of frameworks it supports Reporting Hands-on Demo
Transcript Text
[Music] so if you were to open up chrome which i closed let's see go over here so if you go to chrome and if we open up the developer tools simply open up our developer tools we have this console here now if you're doing any like console lookups you have dollar you have dollar dollars and this allows you to run different commands different lookups uh you can look for images you can look for uh different things so what webdriver io essentially does is it uses all of those chrome developer tools and it allows you to essentially look up the exact same way you would in webdriver that you would in the chrome developer tools so you can look up by c uh css query h2 sub query a and use the dollar uh you can do by xpath uh you can do the full xpath lookup again dollar and you do the path uh you can do it by tag name so you can do a weight parent so see here you can look up okay find me the top of the dom tree and then you can do parent dot get tag name and it outputs body very simple so if you're if you are used to using the chrome developer tools it's almost a no-brainer it translates almost one-to-one so you basically create your objects or your constants and then you use the constants button.click so this command here returns you the web element if you were in webdriver and here's you're essentially getting the element itself as a constant and then you just walk through it you can set timeouts so instead of pause you actually set your page timeouts you set your session timeouts page load timeouts all that's here browser objects so just like in selenium webdriver you have the capability of configuring the different um browser objects for chrome firefox ie etc mock and spies this is interesting i never really thought about this because i've always had to write my own but they give you the ability to do that top-down bottom-up approach of testing so it allows you to create mocks and spies to simulate calls to apis so if something doesn't exist or you want to kind of get to the next piece you can actually put in those drivers and those steps the option spies so this was kind of cool uh custom commands so you can create your own commands page object pattern uh we've i've talked about this exhaustively in other presentations but unfortunately webdriver i o the page object pattern here has the same limitation if you're looking at the page object pattern for selenium for java or for any of the other back-end tools reason is the page object pattern still loads everything into memory while you're testing now granted this is javascript it's a lot lighter you're not taking as much of a hit but if you have a larger page you're going to run into the same problem where you're going to be trying to load a lot of elements in the memory and work with them at once even if you don't need them and we have the capability of using uh debugging i'll show you how this configure visual code so you can actually test your code we have things like test runner frameworks so you can embed use existing frameworks a jasmine cucumber so like i said it gives you out of the box it helps you pick a framework i'm not a huge fan of cucumber but mocha and jasmine look pretty straightforward pretty easy to use kind of still follows that behavior driven development so you describe your test and or your describe your suite and here's your test it should do something here and we call them some things they still push the surgeons which i like because if you create your own custom assertions you can reuse them throughout your projects so this is kind of nice so you can do a weight for this and then you can do a weight expect expect chai so you have some asserts which are good uh you can do test suites you can do in run individual tests uh there's some migration if you're trying to move from older integration so here's another thing that i like about this so they give you auto completion docker github actions so you can integrate with github jenkins and bamboo reporter if you want to do different types of reporting here's all the examples and things that it incorporates with it's really nice and services here's all the different services it also can interact with and engage with there's a lot so from a front-end perspective if you're dealing with javascript this is a wonderful tool to use however it does have a lot of the limitations that it is built on top of saline so the fact that this is essentially a javascript wrapper for an existing library it makes me a little concerned that maybe this might not be supported over time so it's just something to be considerate about if you go down this route and use webdriver io all right so that's kind of a very high level of web driver i o uh some other things we can use you have the api here which actually gives you the different commands and that that you can use to set up webdriver i'm not going to get into that you can look at that on your own uh here's all those commands i was telling you the chrome driver you can use react command save pdf so this is neat you don't have to worry about making your own pdf it's got already got that built in it does screenshots you can upload a file that's uh handy all these exist in selenium webdriver as well you just have to write the actual uh you just have to use or write a method to actually implement this so you could do it this way in either all right so let's jump out of here and go back to our example here all right clear this mess so here we are in our example but let me go back up one level to my working directory here and let me open up digital code all right so here's visual code i've checked out some of those example projects so i have i checked out the appium i checked out the cucumber the jasmine and the webdriver i o master file now before we go look at this let's actually look at setting up our example project here that we just did and get it to where it will run in debug mode so the first thing you need to do is open up terminal and come down here and do command shift b yeah no not b it is command shift p i had to write down because i don't use visual studio all that much so ctrl shift p brings up the properties and then you want to look for debug toggle auto attach so if you select this one it gives you the option to enable the debugger to run every time you run a node.js process uh only when you're in your particular project you can do it by flag so i set it to always so anytime i run a node.js project is going to run the debugger so now if i come down here and i go into my example two and if i wanted to just run the project i just hit run you notice down here at the bottom it turned orange the debugger was attached i see my debugger options here and it failed to run because i actually forgot a command so if we go back out to our docs and go back to getting started so if i want to run this we just run the config so running with wdios config this will run the entire test suite we'll say yes should be there we'll look at example two we have our test yeah everything should be there there it is w i o config ps okay let me close terminal and reopen your model criminal new terminal there we go if i run the run command this will run the entire test suite and it attaches to debugger and it runs the exact same test that example 2 had the only difference here is in this particular project i actually have some breakpoints so in visual code i've come out here and i've applied a break and when i ran the test now i have my debug tools so now i can step over i can run to the end or i can just skip each step so here if i step over it's going to click log in let me go back now i'm on the secure page now it's going to check to make sure that the flush alert to be expected and having text containing you've logged into a secured area you've logged into a secure area so now if i just keep walking through and we're done so that is how to run in debug that's all it is you just turn on the debugger for node.js and then you come in and you add breakpoints so let's go look at the example project so example one is essentially the same as example two except apparently i included the alert reporting and another library that was required for visual code so let's walk through so we have the wdio config this is just the standard configuration file for webdriver io you can set the different specs tell where the tests are you can exclude specific files how many instances do you want to run you can set your capabilities so you can set the browser names uh multiple browsers so you can change from chrome to firefox ie safari uh top level info so you can change your logger to any of the uh standards which is nice uh bail how many tests run before you kick out your base url in case you don't uh if you all your tests want to start from the sample url or the top uh here's your default wait timeout for the weight for connect retry connection retry count again this looks very similar to my framework so all you essentially are doing are setting property files we have our package json so this is kind of similar to maven so this is where you put all your dependencies so here we have chrome chrome driver jasmine cli oh that's right i did mocha for this one and i did jasmine for this one so here's our webdriver web driver i o tests and the scripts then we have the lock json so this gets generated for you json config so you add your compiler options webdriver sync mocha node uh your node modules these are installed for you as part of node that was where it was asking you did you want to install the npm modules yes your alert results so we ran our test so here's our test results you
Transcript Segments
[Music]
so if you were to open up chrome
which i closed
let's see go over here so if you go to
chrome
and if we open up the developer tools
simply open up our developer tools we
have this console here
now if you're doing any like
console lookups you have
dollar you have dollar dollars
and this allows you to run different
commands different lookups
uh you can look for images you can look
for
uh different things so what webdriver io
essentially does is it uses all of those
chrome
developer tools
and it allows you to essentially look up
the exact same way you would in
webdriver
that you would in the chrome developer
tools so you can look up by c uh css
query h2 sub query a
and use the dollar
uh you can do by xpath uh you can do the
full xpath lookup again dollar and you
do the path uh you can do it by tag name
so you can do a weight parent so see
here you can look up okay find me the
top of the dom tree and then you can do
parent dot get tag name and it outputs
body
very simple so if you're if you are used
to using the
chrome
developer tools
it's almost a no-brainer it translates
almost one-to-one
so you basically create your objects or
your constants and then you use the
constants button.click
so
this command here returns you the web
element if you were in webdriver
and here's you're essentially getting
the element itself as a constant and
then you just walk through it
you can set timeouts
so instead of pause you actually set
your page timeouts you set your session
timeouts page load timeouts
all that's here browser objects so just
like in selenium webdriver you have the
capability of configuring the different
um
browser objects for chrome firefox ie
etc
mock and spies this is interesting
i never really thought about this
because i've always had to write my own
but they give you the ability to do that
top-down bottom-up approach of testing
so it allows you to create mocks and
spies to simulate calls to apis so if
something doesn't exist or you want to
kind of get to the next piece you can
actually put in those drivers and those
steps the option spies so this was kind
of cool
uh custom commands
so you can create your own commands
page object pattern
uh we've i've talked about this
exhaustively in other presentations but
unfortunately webdriver i o
the page object pattern here has the
same limitation if you're looking at the
page object pattern for selenium for
java or for any of the other back-end
tools reason is the page object pattern
still loads everything into memory while
you're testing now granted this is
javascript it's a lot lighter you're not
taking as much of a hit but if you have
a larger page you're going to run into
the same problem where you're going to
be trying to load a lot of elements in
the memory
and work with them at once even if you
don't need them
and we have the capability of using uh
debugging i'll show you how this
configure
visual code so you can actually test
your code
we have things like test runner
frameworks so you can embed use existing
frameworks a jasmine cucumber
so like i said it gives you out of the
box it helps you
pick a framework
i'm not a huge fan of cucumber but mocha
and jasmine look pretty straightforward
pretty easy to use
kind of still follows that behavior
driven development so you describe
your test and
or your describe your suite and here's
your test it should do something here
and we call them some things
they still push the surgeons which i
like because if you create your own
custom assertions
you can reuse them throughout your
projects so this is kind of nice
so you can do a weight for this and then
you can do a weight expect
expect chai
so you have some asserts which are good
uh you can do test suites you can do in
run individual tests
uh there's some migration if you're
trying to move from older
integration so here's
another thing that i like about this so
they give you auto completion
docker
github actions so you can integrate with
github jenkins and bamboo
reporter if you want to do different
types of reporting here's all the
examples and things that it incorporates
with
it's really nice
and services here's all the different
services it also can interact with and
engage with there's a lot
so from a front-end perspective if
you're dealing with javascript this is a
wonderful tool to use
however it does have a lot of the
limitations that it is built on top of
saline
so the fact that this is essentially a
javascript wrapper for an existing
library
it makes me a little concerned that
maybe this might not be supported over
time so it's just something to be
considerate about
if you go down this route and use
webdriver io
all right so that's kind of a very high
level of web driver i o uh some other
things we can use you have the api here
which actually gives you the different
commands and that that you can use to
set up webdriver
i'm not going to get into that you can
look at that on your own
uh here's all those commands i was
telling you the chrome driver
you can use react
command save pdf
so this is neat you don't have to worry
about making your own pdf it's got
already got that built in
it does screenshots you can upload a
file that's uh handy
all these exist
in selenium webdriver as well you just
have to write
the actual uh you just have to use
or write a method to actually implement
this so you could do it this way
in either
all right so let's jump out of here
and go back to our example here
all right
clear this mess
so here we are in our example but let me
go back up one level to my
working directory here
and let me
open up digital code
all right so
here's visual code i've checked out
some of those example projects
so i have i checked out the appium i
checked out the cucumber
the jasmine and the webdriver i o master
file now before we go look at this let's
actually look at setting up our example
project here that we just did
and
get it to where it will run in debug
mode so the first thing you need to do
is open up terminal
and come down here
and do command shift
b
yeah no not b
it is
command shift p
i had to write down because i don't use
visual studio all that much
so ctrl shift p brings up the properties
and then you want to look for
debug toggle auto attach so if you
select this one
it gives you the option
to
enable
the debugger to run
every time you run a node.js process
uh
only when you're in your particular
project you can do it by flag so i set
it to always so anytime i run a node.js
project is going to run the debugger
so now if i come down here and i go into
my example two
and if i wanted to just run
the project i just hit run you notice
down here at the bottom it turned orange
the debugger was attached
i see my debugger options here
and it failed to run because i actually
forgot a command so if we go back out to
our docs and go back to getting started
so if i want to run this
we just run the config
so running with wdios config this will
run the entire test suite
we'll say yes
should be there
we'll look at example two
we have our test yeah everything should
be there there it is w i o config ps
okay let me close terminal and reopen
your model
criminal new terminal there we go
if i run the
run command
this will run the entire test suite
and it attaches to debugger
and it runs the exact same test that
example 2 had the only difference here
is in this particular project i actually
have some breakpoints
so in visual code i've come out here and
i've applied a break
and when i ran the test now i have my
debug tools so now i can step over i can
run to the end
or i can just
skip
each step
so here if i step over it's going to
click log in
let me go back now i'm on the secure
page
now it's going to check
to make sure that the
flush alert to be expected and having
text containing you've logged into a
secured area
you've logged into a secure area
so now if i just keep walking through
and we're done
so that is
how to run in debug
that's all it is you just turn on the
debugger for node.js and then you come
in and you add breakpoints
so let's go look at the example project
so example one is essentially the same
as example two except apparently i
included the alert reporting and
another library that was required for
visual code
so let's walk through so we have the
wdio config
this is just the standard configuration
file for webdriver io
you can set the different specs
tell where the tests are you can exclude
specific files
how many instances do you want to run
you can set your capabilities so you can
set the browser names uh multiple
browsers so you can change from chrome
to firefox ie safari
uh top level info so you can change your
logger to any of the
uh
standards which is nice
uh bail how many tests run before you
kick out
your base url in case you
don't
uh if you all your tests want to start
from the
sample url or the top
uh here's your default wait timeout for
the weight for connect retry connection
retry count
again this looks very similar to my
framework so all you essentially are
doing are setting property files
we have our package json so this is kind
of similar to maven so this is where you
put all your dependencies
so here we have chrome chrome driver
jasmine cli
oh that's right i did mocha for this one
and i did jasmine for this one
so here's our webdriver
web driver i o tests
and the scripts
then we have the lock json so
this gets generated for you
json config
so you add your compiler options
webdriver sync mocha
node
uh your node modules these are installed
for you
as part of node that was where it was
asking you did you want to install the
npm
modules yes
your alert results so we ran our test so
here's our test results
you