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] welcome thank you for joining us today today we are going to be talking about using the web driver io to build automation scripts using javascript now this is not really going to be a slide driven presentation today we are going to primarily go through the website talk about the different technologies and things you can do with webdriver and 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 let me jump out of here so you can find webdriver io in the name itself it is actually in webdriver io is the website so you can go to web driver i o and it basically is a next-gen browser and mobile automation test framework for nodejs now in the past i've talked about code test frameworks i've talked about the different ways you can build your tests how you should test and we've talked about different things like unit testing php testing junit every language essentially has its own way of testing and javascript is no different however with the difference here is a lot of your javascript tools that are out there for testing are built on top of or around existing frameworks that were built for other languages like c and java webdriver io is no exception so the webdriver i o is actually built on top of the selenium webdriver so the if you are a java house or ac housing and you have a lot of backend developers and you have a lot of core developers my recommendation for you is to go look at the selenium discussions i've talked about however if you are a javascript only or front-end only shop where you're only dealing with javascript html css things of that nature you're going to probably want something a little more lightweight a little more friendly for your development environment and for that i would recommend looking at this web webdriver io webdriverio is real easy to get started you just click the get started button here and it walks you through setting up your project and we'll get this in just a second but let's first talk about what is webdriver io so webdriverio is a true cross browser testing javascript library that you can use it is again wrapped around the selenium webdriver so it you can actually use it to test all the different browsers like selenium it follows basic web standards so again it follows that webdriver protocol you can use puppeteer you can use different uh front-end tools you can also interestingly enough with webdriver i o you can actually go in and interact with the chrome dev tools protocol this actually comes from the node.js libraries so this was kind of neat that i liked with this the other thing is it's a modern web application so it's written in react view and your sleeve and other frameworks so it works with those uh it also works for running emulating on real devices so you want to test mobile devices you can use web driver i o uh you can also use appian but the other nice thing about this webdriver io that i like is that it can integrate with multiple different test frameworks uh and we'll take a look at that in a minute but the thing is web driver io is essentially a tool that you can use for javascript testing so if you use node.js or our fernan i recommend looking at webdriver io so to get started you essentially just need to do a few things one you need to have node.js installed so the first thing you need to do is come out here to node.js and just make sure that you download the current or the latest lts version for your operating system and then once you have it installed you can test it by typing node now i've already done this step so i'm not going to do this again but if you need to walk through installing node again you can go back out to my react native presentations where i actually walk through uh using node.js for react native all right so we need node so we start with node and then the other thing to do is you just need to run npm init wdio for web driver i o and dot this will install a default project or it will install webdriver io into an existing project or if you want to create a new project you just do npm init and the path to your project so let's just do this real quick so if i come out here to terminal make this a little bit bigger and let me go to my development environment driver io environment and the first thing i want to do is i want to just build uh or make my own project folder so we'll do make directory and we'll do uh example two all right so we'll go into our example two folder and then we will take that command that they listed here npm space init space wd io space dot so this will set up web driver i o in the current folder and hit enter and the first thing it's going to do is it's going to kick off the web driver i o it's going to download all package dependencies and this takes about a minute or so there we go so now it's running the wizard and it's going to ask you a bunch of questions all right so the first thing you have is you have a couple options so what's interesting again is that web driver i o is built to work with multiple different frameworks and multiple different tools so you can run webdriver io locally you can interact or interface it with experti or ex very test saucelabs or a browser stack testing box or lambda test or some different service or if you have your own selenium cloud you can choose that so we can go through these i will say on my local machine and then it also gives you the option of building based on three essentially javascript friendly test frameworks mocha jasmine and cucumber i'll take mocha by default but we're gonna look at some different examples of the projects that they have in a minute so for now we'll just take mocha all right do you want to use a compiler babel typescript or no so babel is really good it gives you kind of that type of head features that you can get with visual code but i want to go ahead and just use typescript because this gives us a little bit more type ahead in visual studio okay and we're of our test located we're just going to use the default dot slash test slash specs yadda yadda and you want webdriver io to auto generate some test files and this is the beauty of web driver io you can get up and running with a very simple test project immediately so we'll say yes and then do you want to use page objects of course we do we love page options page objects make our lives easier when dealing with web pages now you don't have to use page objects you can say no however in this case i want to use page objects now wherever page jobs is going to be located we're going to follow their default example here now the last question is which reporter do we want to use so by default webdriver gives you a whole slew of options for creating reports so i'm just going to stick with my typical junit report and select uh spec and you can go through and you can actually select all of these so you could do json cucumber now i don't recommend doing all these only do the ones that you really need but just if you want to play around you can and then once you're done you hit enter now do you want to add a plugin for your test setup and basically do we want a wait for or an angular component harness we really don't want either so we'll just hit enter for now and then it's going to ask you uh which service do you want your test set up for and then we can select okay do we want to test for chrome do we want to test for uh firefox edge saw slabs moment here so i want chrome driver to start with and we'll take visual code you can do appium browser stack firefox profile cross browser testing [Music] lambdas docker so you have all these different integrations which from a javascript perspective this is awesome uh it really simplifies things for you now with this being said again this is really i recommend this if you are more a front-end shop if you are a back-end shop i highly recommend maybe looking directly at using the selenium webdriver with whatever unit testing software you use like testing g j unit php unit and so on all right so we'll take chrome driver and where's our base url we'll just do localhost you want to run npm install sure and now we're installing all of our packages and almost done perfect so now we're done so now it's installed your entire project and it set everything up for you and it will actually run so it tells you how to run it so we do npm run wd io and it will take a minute to kick off because it has to set everything up the first time it opens up the browser and it logged into heroku and it logged off and we're done so that's how quickly it is to just get up and running really quickly now we'll look at some more of this in just a moment so that is the quick and dirty that is getting started there are some other little pieces you can do here so if you have never used webdriver i o or selenium or any web-based testing tool they give you a whole lot of examples here to work with so if you want to jump in and look at what they've already provided as boiler plates they have a whole slew of projects out here that you can go through and take a look at so if you have appium there's an appian boilerplate you can check out cucumber jasmine web io with mocha cucumber bdd jasmine bdd so there are a ton of projects out here to get you started quickly so you don't have to go figure out your project structure you don't have to figure out your dependencies for this it's all there so that is in a nutshell how to get started and jump right in now the next thing we're going to look at are some of the concepts so we can there are a couple different settings you can do we can set it up for web driver directly or we can set it up to use the chrome dev tools there's some package apis in here which if you're familiar with webdriver it's the same essentially the same options it's just a wrapper so you have options modifier prototyping standalone mode multi-threaded mode things of that nature one thing that's new is since 2021 they have disabled the sync mode or have at least sunseted it because asynchronous is primarily the way to go in the angular world so with asynchronous mode you have to use the a weights and this has become standard practice in selenium as well so this is nothing new if you've used selenium before this will look very similar to you as well synchronous or synchronous mode basically means you have to run the entire test from beginning to end there is no wait it's going to come in here you have to do pauses uh so this is the old ugly stuff that we had to do back when i was showing you uh the test framework where we had to do the thread pause to wait for some of those ajax calls well then uh a group came out and decided hey why don't we make life easier instead of doing pause or which is uh thread unsafe let's do something that's a little more thread safe and that is using this await and if you use java there is an await class that you can include in your projects as well through maven and i believe c also has this as well automation protocols well of course it's the web driver protocol you have to install the drivers that you need so you have chrome firefox microsoft edge internet explorer and safari the only thing i don't like about this is you have to install the drivers through the tool now that's great you can reinstall them as needed as they get updated the only kicker i have with this where i kind of like the selenium version the java based version better is that there is the web driver manager project in git that allows you to check out in you go through the web driver manager and it will let you choose the versions that you want or it will always pull down the latest version of the browser web driver at run time so you're always running the latest and greatest here you have to actually make sure that you have the latest driver for your particular testing so if you if chrome comes out with a new version you might need to reinstall or pull the latest chrome product uh auto weighting this is a neat little feature so uh implicit versus explicit weights kind of gets rolled out here uh you can set timeouts wait for exists find elements which is actually funny if you go back to my framework uh test framework that i built this is essentially what i built into my framework uh the implicit versus explicit so it basically gives you the ability to set the timeout or wait for exists for particular elements so you can set the timeout for the load time for the page which is implicit and the explicit weights are waiting for specific elements so the way they do it they just built it all into one so wait for timeout which is essentially the same kind of method that i built into my test framework so really wait for timeout you just write a wrapper class around the weights in webdriver and it's really easy however you could also use the a weight with the asynchronous weight and you could set up your properties this way so just another simple way of handling weighting some different configurations you have your driver binaries you can install and configure uh if you have to go through a proxy they do support that typescript setup so now you can for autocomplete so remember i included this this will help us for visual studios this just gives you the type of head feature so as you're typing you can quickly hit enter and fill in the gap so you don't have to sit there and wait um or have typos babel setup a babel is just simple it gives you the nice coloring presets so you can use babel you can use typescript you have options uh web driver options this is the exact so options are essentially the same as the selenium web driver options so you have all the different things that you can set over here agents headers webdriver io test runner specs hooks your before or after all the things that you have in selenium webdriver you have here in webdav there are essentially wrappers around the actual selenium webdriver application or i guess the runner different guides so if you're not familiar with selenium you've never used selenium uh this is just kind of a quick guide on how to look things up so you do a weight uh and what's interesting here is if you're very familiar with using the chrome dev tools you
Transcript Segments
[Music]
welcome
thank you for joining us today today we
are going to be talking about using the
web driver io
to build automation scripts using
javascript
now this is not really going to be a
slide driven presentation today we are
going to primarily go through the
website talk about the different
technologies and things you can do with
webdriver
and 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
let me jump out of here
so you can find webdriver io in the name
itself it is actually in
webdriver io
is the website so you can go to web
driver i o
and it basically is a next-gen browser
and mobile automation test framework for
nodejs
now in the past i've talked about code
test frameworks i've talked about the
different ways you can build your tests
how you should test
and we've talked about different things
like unit testing php testing junit
every language essentially has its own
way of testing
and javascript is no different
however with the difference here is a
lot of your javascript
tools that are out there for testing are
built on top of or around existing
frameworks that were built for other
languages like c and java
webdriver io is no exception so the
webdriver i o is actually built on top
of the selenium webdriver
so the
if you are a java house or ac housing
and you have a lot of backend developers
and you have a lot of core developers my
recommendation for you is to go look at
the selenium discussions i've talked
about
however if you are a javascript only or
front-end only shop where you're only
dealing with javascript html css things
of that nature you're going to probably
want something a little more lightweight
a little more friendly for your
development environment and for that i
would recommend looking at this web
webdriver io
webdriverio is real easy to get started
you just click the get started button
here and it walks you through setting up
your project and we'll get this in just
a second
but let's first talk about what is
webdriver io so webdriverio is a true
cross browser testing
javascript library that you can use
it is again wrapped around the selenium
webdriver so it
you can actually use it to test all the
different browsers like selenium
it follows basic web standards so again
it follows that webdriver protocol
you can use puppeteer you can use
different uh front-end tools
you can also interestingly enough with
webdriver i o you can actually go in and
interact with the chrome dev tools
protocol this actually comes from the
node.js libraries so this was kind of
neat that i liked with this
the other thing is it's a modern web
application so it's written in react
view and your sleeve and other
frameworks
so it works with those uh it also works
for running emulating on real devices so
you want to test mobile devices you can
use web driver i o
uh you can also use appian
but the other nice thing about this
webdriver io that i like is that it can
integrate with multiple different test
frameworks
uh and we'll take a look at that in a
minute but the thing is
web driver io is essentially a tool that
you can use
for javascript testing so if you use
node.js or our fernan
i recommend looking at webdriver io
so to get started
you essentially just need to do a few
things one you need to have node.js
installed
so the first thing you need to do is
come out here to node.js
and just make sure that you download the
current or the latest lts
version for your
operating system and then once you have
it installed you can test it by typing
node now i've already done this step so
i'm not going to do this again but if
you need to walk through installing node
again you can go back out to my react
native presentations where i actually
walk through uh using node.js for react
native
all right so we need node so we start
with node and then the other thing to do
is you just need to run
npm init
wdio for web driver i o and dot this
will install a default project
or it will install webdriver io into an
existing project or if you want to
create a new project you just do npm
init and the path to your project
so let's just do this real quick
so if i come out here to terminal
make this a little bit bigger
and let me go to my development
environment
driver
io environment
and the first thing i want to do is i
want to just build
uh or make my own project folder so
we'll do make directory
and we'll do uh example
two
all right so we'll go into our example
two folder
and then we will take that command that
they listed here
npm
space init space wd io space dot so this
will set up
web driver i o in the current folder
and hit enter
and the first thing it's going to do is
it's going to kick off
the web driver i o it's going to
download all package dependencies
and this takes about a minute or so
there we go so now it's running the
wizard and it's going to ask you a bunch
of questions
all right so the first thing you have is
you have a couple options so what's
interesting again is that web driver i o
is built
to work with multiple different
frameworks and multiple different tools
so you can run webdriver io locally you
can interact or interface it with
experti or ex very test saucelabs or a
browser stack
testing box or lambda test or some
different service
or if you have your own selenium cloud
you can choose that so we can go through
these i will say on my local machine
and then it also gives you the option of
building based on three
essentially javascript friendly test
frameworks mocha jasmine and cucumber
i'll take mocha by default but we're
gonna look at some different examples
of the projects that they have
in a minute so for now we'll just take
mocha
all right do you want to use a compiler
babel typescript
or no so
babel is really good it gives you kind
of that
type of head features that you can get
with visual code but i want to go ahead
and just use typescript because this
gives us a little bit more type ahead in
visual studio
okay and we're of our test located we're
just going to use the default dot slash
test
slash specs yadda yadda
and you want webdriver io to auto
generate some test files and this is the
beauty of web driver io you can get up
and running with a very simple test
project immediately so we'll say yes
and then do you want to use page objects
of course we do we love page options
page objects make our lives easier when
dealing with web pages now you don't
have to use page objects you can say no
however in this case i want to use page
objects
now wherever page jobs is going to be
located we're going to follow their
default example here
now
the last question is which reporter do
we want to use so
by default
webdriver gives you a whole slew of
options for creating reports so i'm just
going to stick with my typical junit
report
and select uh
spec
and you can go through and you can
actually select all of these
so you could do json cucumber
now i don't recommend doing all these
only do the ones that you really need
but just if you want to play around you
can and then once you're done you hit
enter
now
do you want to add a plugin for your
test setup and basically do we want a
wait for
or an angular component harness we
really don't want either so we'll just
hit enter for now
and then it's going to ask you uh which
service do you want your test set up for
and then we can select okay do we want
to test for chrome do we want to test
for
uh firefox edge saw slabs
moment here
so i want chrome driver to start with
and we'll take visual code
you can do appium browser stack firefox
profile cross browser testing
[Music]
lambdas docker
so you have all these different
integrations
which from a javascript perspective this
is awesome uh it really simplifies
things for you now with this being said
again this is really i recommend this if
you are more a front-end shop if you are
a back-end shop i highly recommend
maybe looking directly at using the
selenium webdriver with whatever unit
testing software you use like testing g
j unit php unit and so on all right so
we'll take chrome driver
and where's our base url we'll just do
localhost
you want to run npm install sure
and now we're installing all of our
packages
and almost done
perfect
so now we're done so now it's installed
your entire project and it set
everything up for you and it will
actually run so it tells you how to run
it so we do npm
run wd io
and it will take a minute to kick off
because it has to set everything up the
first time
it opens up the browser
and it logged into heroku and it logged
off and we're done
so that's how quickly it is to just get
up and running really
quickly
now we'll look at some more of this in
just a moment
so that is the quick and dirty that is
getting started
there are some other little pieces you
can do here so if you
have never used webdriver i o or
selenium or any web-based testing tool
they give you a whole lot of examples
here to work with so if you want to jump
in and look at what they've already
provided as boiler plates they have a
whole slew
of projects out here that you can go
through
and take a look at so if you have appium
there's an appian boilerplate you can
check out cucumber jasmine
web io with mocha
cucumber bdd
jasmine bdd so there are a ton of
projects out here to get you started
quickly so you don't have to go figure
out your project structure you don't
have to figure out your dependencies for
this it's all there
so that is
in a nutshell how to get started and
jump right in
now the next thing we're going to look
at are some of the concepts so we can
there are a couple different settings
you can do we can set it up for web
driver directly
or we can set it up to use the chrome
dev tools
there's some package apis in here which
if you're familiar with webdriver
it's the same essentially the same
options it's just a wrapper so you have
options modifier prototyping
standalone mode
multi-threaded mode things of that
nature
one thing that's new is since 2021 they
have disabled the sync mode or have at
least sunseted it because asynchronous
is primarily the way to go in the
angular world so with asynchronous mode
you have to use the a weights and this
has become standard practice in selenium
as well so this is nothing new
if you've used selenium before this will
look very similar to you as well
synchronous or synchronous mode
basically means you have to run the
entire test from beginning to end there
is no wait
it's going to come in here
you have to do pauses
uh so this is the old ugly stuff that we
had to do back when i was showing you uh
the test framework where we had to do
the thread pause to wait for some of
those ajax calls
well then uh
a group came out and decided hey why
don't we make life easier instead of
doing pause or which is uh thread unsafe
let's do something that's a little more
thread safe and that is using this await
and if you
use java there is an await
class that you can
include in your projects as well through
maven and i believe c also has this as
well
automation protocols well of course it's
the web driver protocol
you have to install the
drivers that you need so you have chrome
firefox microsoft edge internet explorer
and safari
the only thing i don't like about this
is you have to install the drivers
through the tool now
that's great
you can reinstall them as needed as they
get updated the only kicker i have with
this where i kind of like the
selenium version the java based version
better is that there is the web driver
manager project in git that allows you
to check out in
you go through the web driver manager
and it will let you choose the versions
that you want or it will always pull
down the latest version of the browser
web driver
at run time so you're always running the
latest and greatest
here you have to actually make sure that
you have the latest driver
for your particular testing so if you
if chrome comes out with a new version
you might need to reinstall or pull the
latest chrome product
uh auto weighting this is a neat little
feature so uh implicit versus explicit
weights kind of gets rolled out here uh
you can set timeouts wait for exists
find elements which is actually funny if
you go back to my framework uh test
framework that i built this is
essentially what i built into my
framework uh the implicit versus
explicit so it basically gives you the
ability to set the timeout or wait for
exists for particular elements so you
can set the timeout for the load time
for the page which is implicit and the
explicit weights are waiting for
specific elements
so the way they do it they just built it
all into one so wait for timeout
which is essentially the same kind of
method that i built into my test
framework so really wait for timeout you
just write a wrapper class around the
weights
in webdriver and it's really easy
however you could also use the a weight
with the asynchronous weight and you
could set up your properties this way
so just another simple way of handling
weighting
some different configurations you have
your driver binaries you can install and
configure
uh if you have to go through a proxy
they do support that
typescript setup so now you can for
autocomplete so remember i included this
this will help us for visual studios
this just gives you the type of head
feature so as you're typing
you can quickly hit enter and fill in
the gap so you don't have to sit there
and wait um
or have typos
babel setup
a babel is
just simple it gives you the nice
coloring presets
so you can use babel you can use
typescript you have options
uh web driver options this is the exact
so options are essentially the same as
the selenium web driver options so you
have all the different things that you
can set over here agents headers
webdriver io test runner specs
hooks your before or after all the
things that you have in selenium
webdriver you have here in webdav there
are essentially wrappers around the
actual selenium webdriver
application or i guess the runner
different guides so if you're not
familiar with selenium you've never used
selenium uh this is just kind of a quick
guide on how to look things up so you do
a weight
uh and what's interesting here is if
you're very familiar with using the
chrome
dev tools
you