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] and the actual tests now because i selected page objects it actually built some default page objects for me so it created a parent class called page which opens the path to the particular page and then we have the secure page so if you have any secure information you can define it here again extends page and then we have login page so login page has three fields that we're going to get username password and button type submit so hashtag means that the id is username hashtag username password this is a xpath lookup so we're looking for button of type submit so we have our selectors here again these get loaded every time you load login page so you have to be careful with this again javascript not as heavy as java but still you need to be conscious of how many of these you load now we have our login method so you create an asynchronous login pass in username and password and it will try to login to the site so we do awaits this and button submit return super login and we define our class so now we come into our specs so here is where we build our test case so here's our test case we register our two pages so we have login page secure page each of these goes to our specific page then we describe my login application it should login with valid credentials we do an asynchronous call call login page open login page login expect secure page so after we log in we should get a secure page it should exist and secure flush to have containing you have logged into a secure area all fairly readable and user friendly so when you run this that is what we saw now just some other quick examples so if you do appium or any mobile testing you can download the appium template follow the same type of model it's got some additional configurations for appium so you have different uh types you want to include different paths uh and you have some other pieces you can figure here uh here's all the dependencies so we need to include a bunch of different uh scripts and dev dependencies so appian browser stack local runner mocha saw service babel config so here uh because we're dealing with mobile we need some helpers so we have biometrics some constants some gestures some utilities that's if you're doing mobile again we have page objects so here again keeping it simple we can do get username return username get password return password very clean page now here's where things get a little tricky if you are a cucumber fan you have to build your features and this is where this gets a little ugly so you can create your steps so here's all your givens here's your lens here's your lens and then your features look something like this background given i open the site scenarios and so on the problem i have with cucumber is that well this is very user friendly when you get to the actual test components and do your steps this is not always user friendly especially even with page objects so buyer beware if you try to use cucumber for testing especially with javascript and selenium it it works it is functional if you are a cucumber whiz by all means use cucumber it's just not my cup of tea i think there's just way too much complexity with setting things up jasmine not so bad so if you come in here go into test page objects again you follow the standard pojos or i'm sorry page object models very clean very easy to read and then your specs are again very easy so here is our test step or i'm sorry here's our test case with two use cases inside of it so auth form should deny access with wrong credentials and should allow access with correct crunch credentials so can it and if then dynamic check box and then web drive web driver master so we have typescript we can do mocha test sample test again fairly easy to read and typescript syntax a little easier to read a couple additional features there can include docker i thought this was cool so here's our docker test but then here's all your docker setup information so if you do docker you could actually run this test it will build a docker it includes the docker file it'll run the little nugget it'll run the little docker container for you and then they'll run your tests inside of your doctor so it's completely self-contained so this was really cool i like this option and idea and it builds it for you out of the box so you don't have to configure anything so if you're not a doctor fan or you just are new to docker highly recommend this check this out again cucumber if you like cucumber and i showed you jasmine so that's kind of web driver in a nutshell do we have any questions if anybody's asking questions they are on mutes uh now this is um it's just one of those particularly as you go through some of these features it's just amazing how much functionality and features are just you know really quick to to fire up as far as you know related to testing and things like that particularly and i'd run into a while back mocks and spies and things like that where um it's just it is amazingly easy it's surprising now that some people you know the people don't particularly in commercial or professional development don't include test scripts and regression on a regular basis because it's just the power of some of this that is just amazing so great presentation uh dave any questions yeah can you build a full application using just the web driver ioi uh well it's not so much an application you're building the test okay application to test an application uh so it's it's building your whole test suite for you but then you have to go wired up with the page objects and um your actual test scripts so it does test everything like the rpm and all the accelerator and all those different applications yes it can um integrate with any of these you just have to do the setup so you have all these different services here you can integrate with appium browser stack devtools firefox sauce labs visual code like i showed you chrome driver so you have access to all of these which is really slick and the reason they have access to all of this is because web i or webdriver io essentially incorporates and uses that node.js if it didn't use node.js i don't think it would have the capabilities that it does okay gotcha cool thanks yeah no problem so if there are no more questions just to quickly recap so webdriver io is a very useful front-end test framework for nodejs it is really useful for shops that are front end development heavy meaning that everyone does html javascript uh css xml essentially it's all front end there's no back end heavy lifting either through c sharp java anything of that nature with that being said though webdriver i o essentially is a javascript wrapper around the selenium web driver so if you are a more complex shop and you have a lot of back end developers and a lot of back end features using things like c sharp and java i would recommend not using web driver i o and go and just use the selenium webdriver classes and packages for your particular language reason is typically when you have things like this that are wrappers around another technology you never know when they're gonna go away or not be supported or the core feature that they're wrapped around changes something that breaks this integration piece so it's just something to be careful of if you're looking to use this type of feature for your testing so that's a wrap i'd like to thank you all for your time if you would like to discuss any of these topics or other topics you can reach us at the following we're at info developer.com you can reach us on our developer.com website on our contact us page you can tweet us at developernerd you could also find us on facebook at facebook.com developerner our videos are available on vimeo and youtube just search for developer nerd our goal is making every developer better thank you and have a wonderful day [Music] you
Transcript Segments
[Music]
and the actual tests
now because i selected page objects it
actually built some default page objects
for me so it created a parent class
called page
which opens the path to the particular
page
and then we have the secure page so if
you have any secure information you can
define it here
again extends page
and then we have login page
so login page
has three fields that we're going to get
username password
and button type submit
so hashtag means that the id is username
hashtag username password
this is a
xpath lookup so we're looking for button
of type submit
so we have our selectors here
again these get loaded every time you
load
login page so you have to be careful
with this
again javascript not as heavy as java
but still you need to be conscious of
how many of these you load
now we have our login method so you
create an asynchronous login pass in
username and password and it will try to
login to the site so we do awaits this
and button submit
return super login
and we define our class
so now we come into our specs so here is
where we build our test case
so here's our test case we register our
two pages so we have login page secure
page
each of these goes to our specific page
then we describe
my login application
it should login with valid credentials
we do an asynchronous call
call login page open login page login
expect secure page so after we log in we
should get a secure page it should exist
and secure flush to have containing you
have logged into a secure area
all fairly readable and user friendly so
when you run this that is what we saw
now just some other quick examples
so if you
do appium or any mobile testing you can
download the appium template
follow the same type of model
it's got some additional configurations
for appium so you have different uh
types you want to include different
paths
uh and you have some other
pieces you can figure here
uh here's all the dependencies so we
need to
include a bunch of different uh scripts
and dev dependencies so appian browser
stack local runner mocha
saw service
babel config
so here
uh because we're dealing with mobile we
need some helpers so we have biometrics
some
constants some gestures
some utilities
that's if you're doing mobile
again we have page objects
so here again keeping it simple we can
do get username return username
get password return password very clean
page
now here's where things get a little
tricky if you are a cucumber fan
you have to build your features
and this is where
this gets a little ugly
so you can create your steps so here's
all your givens
here's your lens here's your lens
and then your features look something
like this
background given i open the site
scenarios and so on
the problem i have with cucumber is that
well this is very user friendly when you
get to the actual test components and do
your steps this is not always user
friendly especially even with page
objects
so
buyer beware if you try to use cucumber
for
testing especially with javascript and
selenium it it works it is functional if
you are a cucumber whiz by all means use
cucumber
it's just not my cup of tea i think
there's just way too much complexity
with setting things up
jasmine
not so bad so if you come in here go
into test
page objects again you follow the
standard pojos or i'm sorry page object
models
very clean very easy to read
and then your specs
are again
very easy so here is our test
step
or i'm sorry here's our test case with
two use cases inside of it
so auth form should deny access with
wrong credentials and should allow
access with correct crunch credentials
so can it and if then
dynamic
check box
and then web drive web driver master so
we have typescript
we can do mocha
test sample test
again
fairly easy to read
and typescript syntax a little
easier to read a couple additional
features there
can include docker i thought this was
cool
so here's our docker test but then
here's all your docker setup information
so if you do docker
you could actually run this test it will
build a docker
it includes the docker file it'll run
the little nugget it'll run the little
docker container for you and then
they'll run your tests inside of your
doctor so it's completely self-contained
so this was really cool i like this
option and idea
and it builds it for you out of the box
so you don't have to configure anything
so if you're not a doctor fan or you
just are new to docker
highly recommend this check this out
again cucumber if you like cucumber
and i showed you jasmine
so that's kind of web driver in a
nutshell
do we have any
questions
if anybody's asking questions they are
on mutes
uh now this is
um
it's just one of those
particularly as you go through some of
these features it's just amazing how
much
functionality and features are just
you know really quick to
to fire up as far as you know related to
testing and things like that
particularly and i'd run into
a while back mocks and spies and things
like that where
um it's just
it is amazingly easy it's surprising now
that some people you know the people
don't particularly in commercial or
professional development don't include
test scripts and regression on a regular
basis because it's just
the power of some of this that is just
amazing
so great presentation
uh dave any questions
yeah can you build a full application
using just the web driver ioi
uh well it's not so much an application
you're building the
test
okay application to test an application
uh so it's it's building your whole test
suite for you but then you have to go
wired up with the page objects and um
your actual test scripts
so it does test everything like the rpm
and all the accelerator and all those
different applications
yes it can um integrate with any of
these you just have to do the setup so
you have all these different services
here you can integrate with appium
browser stack
devtools firefox sauce labs
visual code like i showed you chrome
driver so you have access to all of
these which is really slick
and
the reason they have access to all of
this is because
web i or webdriver io essentially
incorporates and uses that node.js
if it didn't use node.js i don't think
it would have the capabilities that it
does
okay gotcha
cool thanks
yeah no problem
so if there are no more questions just
to quickly recap so webdriver io is a
very useful front-end test framework for
nodejs
it is really useful for shops that are
front end development heavy meaning that
everyone does html
javascript
uh css xml essentially it's all front
end there's no back end heavy lifting
either through c sharp
java anything of that nature
with that being said though
webdriver i o essentially
is a javascript wrapper around the
selenium web driver so if you are a more
complex shop and you have a lot of back
end developers and a lot of back end
features using things like c sharp and
java i would recommend not using web
driver i o and go and just use the
selenium webdriver classes and packages
for your particular language
reason is
typically when you have things like this
that are wrappers around another
technology you never know when they're
gonna go away or not be supported or the
core feature that they're wrapped around
changes something that breaks this
integration piece so it's just something
to be careful of
if you're looking to use this type of
feature
for your testing so that's a wrap i'd
like to thank you all for your time if
you would like to discuss any of these
topics or other topics you can reach us
at the following we're at info
developer.com
you can reach us on our developer.com
website on our contact us page
you can tweet us at developernerd you
could also find us on facebook at
facebook.com developerner
our videos are available on vimeo and
youtube just search for developer nerd
our goal is making every developer
better thank you and have a wonderful
day
[Music]
you