Telerik Test Studio Webinar: How To Make Functional Automated Tests Video Lecture | Telerik TestStudio:Automated Testing made Easy - Software Testing

the broadcast is now starting
all attendees are in listen-only mode
good morning thanks for joining today's
test Studio webinar this is Andy Weiland
I'll be conducting to the demonstration
today we've got a good crowd joining in
today I appreciate everybody for
attending will let you know a couple
things real quick if you do have
questions along the way please feel free
to use the questions panel or the chat
panel anything you might need help with
or any questions about the product feel
free to ask we'll try to reserve some
time at the end of the call to to answer
any leftover questions otherwise we'll
try to kind of hit them in stride as we
go hopefully you can see my screen at
this point and hear my voice we'll go
ahead and get things kicked off so
today's focus is test Studios codeless
automation and basically we'll start
with an introduction Who I am my name is
Andy Weiland I'm a sales engineer a
senior and certified scrum master and
I've been working with test studio in
progress for over five years basically
what a lot of people come to us for is
to get to this sort of I guess the other
side of automation after automation has
been rolled out this is sort of the
dreamland
of of where people usually want to get
to which is to be able to monitor your
applications health looking for
regressions looking for missing
functions and being able to continuously
test and continuously deploy and and so
forth and be able to basically focus on
the failure instead of trying to find
out what's working and what's not so
we'll start the day once you have this
automation rolled out once you've got
some test lists built up you'll schedule
those test lists to run potentially
while you're asleep at night or as part
of a CI or build process and you could
come in and review the email
notification that gets sent out this
could be distributed to many people and
can have many different attachments of
different results file types so that you
can review those failures and then from
there determine where you need to focus
your time in the foreground here you
could see some failure details test
studio is really good at providing a lot
of very rich
data that you can then review to
determine if it's in test issue or an
application issue and how to handle that
issue with ways to communicate that as
well ultimately this empowers the QA
whether you're non-technical or super
technical you can utilize test studio
and get a lot accomplished with this
results and and failure details we're
basically creating a feedback loop we
have a integration directly to bug
tracking systems like JIRA like TFS like
team polls right out of the box you can
integrate to others as well and this
allows the QA again to be empowered to
be able to communicate and be effective
in communicating to the development team
with very important information relevant
to the problem at hand we'll take a look
at those failure details when we jump
into the application but again here for
the QA review this failure details and
you can determine is this something I
can fix myself or something I need help
with is this a test issue or is this an
application issue this creates a
feedback loop because here you can then
determine if you can resolve it yourself
or if it's something you need help with
from a development team meaning it's an
application issue you may just push that
into the bug tracking system for
instance or if it's something with the
test maybe you need our help maybe
there's a problem with test studio you
could simply export this failure details
into zip file and attach it to a support
ticket this is a well supported product
you do have engineer level support at
hand so you don't have to just go out to
forums we've got a great forum and a
great community out there but you have
support so you can certainly just send
us this detail as well you'll basically
be sharing with either your developers
or our support engineers these steps to
reproduce the issue the exception
details as well the images of expected
and failed state the page Dom at the
point of failure and all that data gets
wrapped up for you in a nice package now
test studio really has a different
approach than a lot of tools and
hopefully you'll see that today and get
a good sense for what that means but we
actually we kind of approach things for
from this standpoint of for solutions to
every problem test to do has a really
powerful record and playback capability
like probably other than you know
more more sophisticated than than others
that you may be experienced with other
record playback tools can leave you more
frustrated ours is really centered
around keeping it simple and not just
creating tests but also maintaining test
as codeless ly as possible and we do
that with sort of four different ways of
doing so first of all our
point-and-click recorder with the
configuration settings I'm going to take
you through today makes it super easy to
capture your actions and your elements
and to be able to maintain those easily
going forward code lessly
if that doesn't work for you you've got
a tool bar you can see an image of it
here recording toolbar that has some
more advanced capabilities things like
in this example an image verification
that's a pixel level comparison to make
sure that images look correct or
stylistic verifications and things like
that even element to element
drag-and-drop kind of functions can be
done in this recording toolbar still
code lessly
if that doesn't solve the problem at
hand you've got the location
interactions and XY coordinates and this
is where a lot of our competition lives
basing actions off of position or off of
like an X path for example your test
studio really has a more sophisticated
way to go about it but if we have to we
can drop to this kind of solution in
certain situations where the other two
may not give us the solution there we
can resort to using coordinate based or
location interactions still code lessly
last but not least we can code we can
always code you can absolutely code
everything from scratch for those of you
they're about to close the session and
say I'm out of here
you can absolutely code everything from
scratch in C sharp or vb.net we've got
our free framework but test studio is
really the reason people come to us is
to either get away from what we call a
bloated coded solution where you may
have a testing solution that requires
code and overtime that's going to grow
and the maintenance of that is very very
difficult to keep up with and you know
certainly a lot of our customers come
from that saying we've got to get out of
this over sized
testing project now because it's kind of
overtaking our main goal which is to
build an application the other way that
we'll kind of enter tests to do a lot of
times is from manual testing so maybe
from blow Dakota testing or from manual
testing the manual testing you really
can empower those QAS and give them a
tool that allows them to do really just
as much as a developer tester can do in
many cases but again you can easily
convert things to code we actually have
a lot of universities that use this tool
to teach students how to use how to do
testing and it's a great learning tool
that will teach you how to code if you
want to but we provide a lot of
capabilities that don't require that
reusability this is a theme throughout
test studio and everywhere you can reuse
something you're saving time and you're
getting more mileage out of what you've
put into those tests first of all in the
way we handle our elements I've
mentioned that we have a sophisticated
way to do that you're gonna see that on
the next slide but the idea is we're
gonna take the elements these are the
fields the buttons the inputs all the
things you're interacting with we're
gonna capture them automatically as you
interact with them during the recording
process and we're gonna store them
globally across the whole project this
means that if you have that element
being used in more than one test we have
a reference to all of the tests from one
single element and that also means if
that element needs to change or is
broken you can update it and apply it
across the whole project again code
lessly now cross-browser reusability
this means that we can actually use our
tests record them in IE run them in
Firefox Chrome Safari edge you can also
record in chrome or record in Firefox
mix and match as you go the idea is we
want one test that can run across all
five of those browsers this again should
reduce the total number of tests that
you're required to use and save time
ultimately in deployment environments we
have a simple process we use called base
URL - setting that basically allows you
to change the server portion of a URL at
scale app at bulk essentially so you can
take a list of tests change the you are
of the base URL for that list of tests
and then point a hundred tests from one
deployment environment to the next so
you can build a nice rich list of tests
that works for your QA environment as
the product moves to staging you can run
those same tests by changing one setting
and then as it moves to production again
change that one setting
run the same tests against production
tests - step one of our most popular
features the ability to reuse tests
within other tests for repetitive things
if other products are doing this is
because they learned it from us
basically the ability to take something
that's repetitive like a login process a
logout process or any kind of portion of
the test modularize that and then build
those into you know tests that call
other tests essentially load and
performance testing today's focus is not
about this in fact there will be in
January I think when we have our next
performance and load testing I think the
4th of January will be our next
performance load testing webinar and
that will show you how this works but
essentially you can take your functional
regression test we're gonna make today
and run them as performance tests this
builds reliability and gives you more
mileage out of those tests the same test
that tells you whether or not you've got
regressions and make sure that things
function correctly can also tell you and
show you where the bottlenecks are with
a performance test and then be used in
your load test to show you what kind of
capacities your application and your
infrastructure can handle so again just
lots of you lots of mileage that you're
gaining from your test of course
reusability just in copy-paste the ease
of use the test studio provides so that
you can take things and easily move them
around now let's get to this fine logic
I've talked about a couple times the
sophisticated flexible element fine
logic the Corvette engine under the hood
of tests to do and really what gives us
the patented approach that we have had a
lot of popularity with over the last
decade the ability here is the test
studio can find the elements wherever
the elements exist based off of element
properties not off of their location on
the page but off of properties of the
location in here in the background you
can see an individual element in this
case a login button the login button is
an anchor tag name combined with the
text content of the button itself so
this is using text content the label on
the button to locate it that means it
can be anywhere it can be in Safari
browser in the top left corner it can be
in a Firefox browser in the bottom right
we can work with responsive design
applications doesn't matter what kind of
dpi or resolution settings we're gonna
go find the element as it exists based
off of the properties flexible
properties that you can manipulate and
change and that you can also set at
project-level to fit your application
this is what we're gonna really focus on
today is how to identify the best
identification logic strategy for your
application and how to set these
settings up so you can have success lots
of you are probably attending with
trials already and if you haven't
started one you certainly can so please
feel free to but this is where you
you'll be able to really custom tailor
the test of your project to fit the
application under test what does this
mean it means if we hit record and we
click a button like this cancel button
for example this strategy or this
prioritized list tells test studio to
first see if the cancel button has an
automation ID now not everybody uses
automation IDs and in fact the list
you're seeing here is not the same list
you'll see in your base project
out-of-the-box it is something I've
customized and this is the strategy that
I use I try to find unique IDs where
possible if they exist however there are
dynamic ID situations we work with and
there are other things that can
interfere as well but the idea here is
we're gonna tell tests to do the best
way to find an element in your
application if not that it will go down
this list it will look for the the next
property in the list if that's not there
it will look for the next property in
the list and so on and so forth the
other thing is when this fails if for
some reason the cancel button has
changed the element properties have
changed and is now not finding that
element it is easy to go in and code
lessly update that as you could see in
the screen behind but it also kicks in a
backup search so if it was originally
trying to find it with a text content
label on the button and they changed
cancel to quit or something like that
and that failed the test
well test studio will automatically kick
in the backup search methods they follow
behind that and provide suggestions so
that test would still fail but it would
fail with suggestions and as you could
see it provides a ranked list
prioritized from strengths strongest to
weakest you do see there are things like
XPath and HTML path in here you can
certainly use them although I will
challenge you to whatever scenario you
may have that there's a better way to do
that with tests to do but if you're
stuck on those you still could use them
if you want to your tests will just be
as brittle as they are another
tools that use that reliable that rely
on that but our logic here you're gonna
be able to really tailor it for your
application recover it easily when it
breaks apply it across the whole project
and really just make testing agile
codeless tests maintenance so really
every there's all sorts of products out
there that allow you to capture your
interactions with the application build
test cases out you know build out your
test scripts very easily but then they
kind of leave you hanging and infer our
non-technical users out there a lot of
times it's time to go get a developer to
help maintain the test if it breaks and
so it's that maintenance process that we
really see a gap in the industry and
we're filling that gap with these
maintenance capabilities that don't
require code and that alleviate the need
of the development team to to maintain
tests which allows them to focus more on
creating new features and functionality
for the application so the test to do
tool set that's built on top I mean
things like adding verifications with
our element highlighter we'll look at
that today editing elements in live UI
creating drag and drops from element to
element this is really powerful because
that way even though element a and
element mebae may move around and render
differently in different resolutions or
different browsers doesn't matter as
long as we can find the element by their
properties we can find element a and we
can drop it on element B wherever they
move around so really really powerful
technology here and then of course as
you could see here the bottom when a
change is applied it will let you know
if that elements being used in multiple
tests and allow you to apply that
everywhere so you don't have to go
copying and pasting into different
scripts and stuff like that in fact it's
not even script based when you you're
when you're using this element update
like this now sometimes we see people
trying to get away with using location
interactions with very complex widgets
because a lot of tools out there just
simply don't give you the opportunity to
do something more sophisticated the
tests you do you can when it comes to
dynamic grids and things like that I'll
show you some examples today you could
see in the foreground how we can find a
particular button within a particular
row
within the grid using what we call a
chained find expression this is a really
powerful way to locate something in a
dynamic situation that's always changing
in fact I have some test examples where
we do this in a while loop where we can
actually page through a grid until it
finds the appropriate row and then
clicks the corresponding edit button for
that row so we'll dive into more details
on that but the idea here is you can do
a lot more advanced testing than you
have been able to in other applications
now testier really we try to make the
collaboration between the developers and
the testers a lot easier we want the
testers to be able to provide the
developers with very rich data and
shortcut that back and forth of what
happened what you try to do you know
what color was the sky when the test was
run all that information is captured for
you you have integration to source
control that way we're keeping the tests
stored in the same place where the
applications being built and stored we
can integrate with that CI and build
process as well so it can be something
that keeps up with the ever changing and
ever deploying application we can
execute across a myriad of agents with
our runtime licenses and essentially as
you can see on the left here sort of a
idea of our scheduling and storage
capability that can communicate to
multiple machines oftentimes different
operating systems different browser
versions you might have on those
different machines these could be
virtual machines as well and then also
of course for performance and load
testing we can use some performance
profiling and monitoring we may want to
see what the application server or the
database server is doing during a test
or during a load test for example and of
course as I mentioned we have support
for you unlimited support tickets
24-hour guaranteed response time
engineer level report you know we've got
free week we leave webinars like this
one you know this is when we try to put
new topics in as we can and give you
rich information and of course record
them as we are today and publish them
out so that you have something to refer
back to as well we've got online
resources like forums and videos and
white papers and webinars and roadmaps
and trainings and all sorts of things
that you can take advantage of from a
training standpoint we go from an
instructor-led training that you can
attend through the
web or do-it-yourself video series or it
could be even up to the point of staff
augmentation so we've got a professional
services team that can help you if you
need to help or you can kind of do it
yourself with the tools we provide we
also put out releases very frequently
the ever-changing browsers keep us on
our toes and we stay up-to-date as
quickly as possible in fact the latest
Firefox 57 release that really screwed
up a lot of testing tools out there we
were ahead of the curve
we're actually released our latest
plugin for Firefox prior to 57 being
available is forward compatible with
Firefox 57 and completely rewritten for
both Chrome and Firefox in our latest
October release we since had a service
pack release and actually in between the
service packs and them in the major
releases we update you and give you the
opportunity to grab our internal builds
so every six to eight weeks you have an
update that will take care of the latest
browser and the browser enhancements or
changes any bug fixes that need to be
put in place as well and an even new
features along the way so let's look at
test studio in action
somebody just flip over here to my
project screen the first thing we're
going to start with is just a little bit
of a once-around just to show you kind
of what's here there's a lot going on in
the test studio environment we have a
great UI we're known for you're kind of
having the easiest to use tool with a
good UI but there's a lot to kind of get
used to first of all you have these
dockable and undock opal panels you can
pin them back we actually do have some
presets up here as well that you can
choose I'm using high productivity right
now but you can also do custom layouts
and it just it makes sense because that
way whenever you have some type of job
that you're trying to accomplish you can
move these out of the way if you need
them but essentially here at the top
left you've got your project panel I do
like to note too that when you're when
you're in a test and here in the middle
we have a test open when you click onto
that test you'll see that we have a
quick execution toolbar so this is where
we're maintaining the test we're
updating the test we're working with the
debuggers and stuff like that to work on
this test and these settings all apply
to this test tab here
you click into the project tab you'll
notice that the toolbar changes we now
have the project level functions of test
studio so that's an important note the
change between the focus on the test and
the focus on the project level now here
you can see you'll have things like
adding data sources you can bring in CSV
Excel XML or even live database oledb or
ODBC compliant data sources to DES to
drive your tests you can do a lot of
cool things with data driving not just
inputs but also verifications and even
data driving your find logic that's a
very powerful thing to be able to do we
have connection with scheduling server
here I have a scheduling server in fact
I can connect up to see that that's
successful right now I have some logging
enabled which is very useful if you're
having any issues you can provide those
log files to support when you put in a
ticket and once I'm connected to a
scheduling server it may be connected to
multiple execution agents this one at
the bottom happens to be my scheduling
server but it is also an execution agent
so we have the runtime licenses that are
very inexpensive and allow you to really
do a lot that can perform multiple
duties simultaneously so this Austin OPC
is both my scheduling server but it's
also in charge of telling these other
ones when to execute so I can have these
execute across all these environments
and here we may represent different
browser versions of the other browsers
if we want to test those out we can
drill in and see if the machine is being
used right now that says there's no test
running but that will show us if there
are tests currently running and we can
calibrate the browsers from here
remotely this is a newer feature we
added in the last major release to
remotely calibrate the browsers this
this is also a setting that can be
enabled in the test list itself where it
will automatically calibrate the
browser's during tests list execution to
but this gives you great visibility into
your tests lab and it's a great thing to
have at least run one runtime if not a
nice environment a lab environment of
runtimes that way for instance this
machine that I am on that I'm using for
myself can be occupied with what I'm
working on I
go send tests to go execute on these two
other machines so it doesn't tie up my
machine that way I can continue working
while two other machines might be
executing list of tests for me we've
also got our source control integration
you can connect into TFS or get directly
out of Tia test studio we also do work
with any flat file based source control
system you can follow our documentation
too to connect into that some of our
customers use SVN for example but out of
the box you've got some direct
integrations to TFS and git I don't have
this one connected in you will see some
updated icons over here left of the
tests when you have them integrated to
source control and this from there you
can then check-in/check-out get latest
revert to a server comment as well so
all those things can be done through
that source control integration we have
if you're still using it Quality Center
integration team Poulos integration of
for bug tracking tools uh I mentioned
earlier TFS and JIRA team pulls as well
there's also more to this also I'd like
to point out you might see these blue
links along the way this will actually
open up directly to our documentation on
the subject if you see one of those blue
links so this is just taking me directly
into the bug tracking configuration of
our online documentation you'll also see
in here there's lots of things for
custom plug-in for example if you need
to build one for your own tool there's
some code in here that you can grab and
update for your own usage as well or if
you're using custom fields in JIRA for
example there's documentation around
that or TFS custom fields there's really
just a lot here for you to be able to to
learn and get things configured the way
that works for you this is a one-time
setup once you've got your bug tracking
integration setup and it really it's a
matter of providing a URL and some
credentials once that's set up it's
really just a one-time thing and you can
then from there just click a button to
essentially submit the ticket or select
to submit the bug directly into the
system and then of course settings and
here's we're going to spend a little bit
of time going through some of these
settings first of all in the recording
settings there's the base URL and again
the link here is going to be helpful for
you to see
understand these settings also we do
have some video tutorials on these
settings but the base URL there's
actually a nice document just for this
alone
in our documentation it's all about
running a test against multiple
environments you know here you can see
it's it's really a setting that that
happens at the project level it also can
be set at a test level it can be set in
a test list level too so there's lots of
areas where this applies but the idea
here is that when we set it here we're
actually telling tests to do what our
recording environment is going to be so
maybe I have a application at localhost
8080 on my local machine and I'm gonna
build all my tests against that
application when test vo recognises that
particular base portion of the URL it
will automatically separate that into a
different portion of the test step
settings and and that will allow me then
to change that portion of it later on so
I'll show you an example hope hopefully
as we get into the testing here I do
want to point out compare mode this one
that can be a bit of a gotcha and the
reason that can be a gotcha is it's set
by default out of the box as full path
and query but what does this mean
compare mode is what the URL is from the
recording point to the execution point
and comparing those two URLs together to
make sure we're in the right place now
if you're using a full path and a query
to compare the recording URL to the
executing URL you might find some issues
when your URL has some dynamic queries
so we'll look back here at the page and
information here that shows you kind of
how this is broken down but essentially
if you've got a dynamic query string
that changes all the time that might
break your test because it can't find or
can't recognize the appropriate page
that you're trying to get to whereas if
you just use full path it would use the
base portion up to the path and that way
the query can be dynamic so my
recommendation is to use full path base
URL is also a more basic idea and title
as well those are the three that I would
recommend if you're getting into more
advanced situations then I would say
dive into full path and query or no
fragment or relative or other things so
there's lots of options here but I would
recommend setting it to full
before you even record your first test
now many of you are probably kicking
yourself right now because you've
recorded a bunch of tests what happens
if it's set to full path inquiry and you
have a problem well the evidence is that
you'll see duplicate pages with
duplicate elements on the element
repository now these can be merged very
easily so it's easy to clean things up
after the fact but it's always better to
set it right the first time and that
would be to use full path before you
start recording that way you don't have
to do the cleanup after the fact we've
also got things like Silverlight if
you're using Silverlight applications to
connect timeout here drop down recording
I actually have this vise set by text I
think the default is by value the reason
I choose by text is because that's what
a user sees when they interact with a
drop-down list by value isn't
necessarily visible and it's not
necessarily always used so I would rely
on what the user sees the actual text of
the items in the list and that will
allow you to follow items around if the
list presented is dynamic and you've
told it to find green yellow out of red
yellow and green you you've told to
find green and that list gets reordered
it would still be able to go find green
based off of the by text by value
however might be a numeric value might
be hexadecimal value for a color it
might not be used at all so it might not
be as reliable as by text and I should
mention this is something that you can
change at the step level but this is
setting it again ahead of time at the
project level also when I say ahead of
time if you do make changes to these
settings just keep in mind they're not
going to apply to anything you've
previously recorded so you may often
times make to check the setting changes
just to record something and then maybe
change it back it's very easy to be able
to do that but just keep in mind that
it's not going to affect anything you've
previously recorded and also keep in
mind that you can effectively change
these at step level the idea of making
in a project level setting is if you've
seen maybe a trend in the application
and you want to set it at the project
level so that you don't have to do it at
the step level any further a couple more
I'll point out here seem like real
clicks and real type
by default a lot of you probably run
into this already I'll show you an
example of where this is an issue but
effectively with all of our JavaScript
based applications they require a
different type of interaction than our
standard our standard interaction with
an application is a Dom injection this
means we're effectively copying and
pasting a value into an input so for
this field as an example our our test
execution would effectively paste in
that 60,000 into that field during
execution now if that's a JavaScript if
there's a JavaScript handler on that
field that might not do the job that's
that's needed so by simulating the real
typing it will type in each character
like a real user would and that will
initiate those JavaScript handlers how
do you know you need this usually you'll
have a false positive followed by a
failure where if you had a an action
that was supposed to be performed and it
passed but then the next action that was
supposed to perform failed that's
usually a clue that you might need to
simulate real typing or simulate real
clicking now I'm not going to go through
all these settings but I want to jump to
fine logic we talked about this already
in the slides but I just wanted to
review real quick how you can add to
this list customize it for your
application
change priority of things again as an
angular application I might have an
identifier some properties called ng
data ng model aria-label might be
another one we can add to the list and
then prioritize them to best fit the
application under test this is again
something that's best to do ahead of
time or early in the testing it's also
something you might need help with and
we'd be happy to help you do this
to identify the best strategy for your
application I was working with a
customer yesterday on this in fact and
strategizing on the best way to work
with their application and we were able
to put some settings in place that then
makes their world a whole lot easier
alright so that's it for the settings
for now also just to kind of tour around
you see that we do have the test open
you can have multiple tests open you can
have these tabs tabbed out essentially
with multiple tests here
this particular test I would refer to is
a code list test you'll see there is a
code behind file icon
at the top right now it is great out for
this test this one over here is does
have a coded step so even when we do
need to use code it can be minimized to
a specific step rather than switching
the whole test over and in fact you can
start by recording something and then
translating it to code with the
right-click option editing code but
again going back to our four solutions
to every problem this is the last thing
I'm going to tell you to do because
there's so many other tools here that
can be used to maintain this test code
lessly
before you would have to use code but I
do of course like to show that you can
code you do have such an advantage when
you use the code list test because we've
built so many tools around that and a
big part of that is the element
repository down here at the bottom left
I have this element repository these are
all the elements across my entire
project here you have a page level and
you can see the properties over here
I've got full path inquiry
unfortunately set on this one you see
there's a duplicate page below this this
one's also set to full path in query I
can actually clean things up merge these
together by changing that you can see it
refreshes the page for me or the
elements for me over here so you can
very easily merge these tests to do will
automatically merge together pages and
elements when you do that when you
change those properties up okay so that
can be at the way of cleaning things up
and we have some documentation on this
I'll provide you a link this is from our
Docs by the way to get to our Docs
another way to do it is go to the help
menu at the top right and use your guide
right at the top will take you into our
user guide documentation and from here
you can search of course you do kind of
know you need to know what to search for
but I'm gonna search for merge and here
you have an article called merge page
notes I'm gonna go ahead and drop this
into the chat window for you for those
of you playing along at home and that
way you can merge your page notes that
means your pages as well as the elements
that goes through an example of where
that can be a problem and how you can
fix that problem okay so back over here
we've got the element repository
captures the elements for us now right
now it's showing us the whole project I
can filter this down to
this test with this click of the button
here now we see just the elements for
this test you also see the ease of use
here if we click on a particular test
step it points to the corresponding
element for us okay so we can click
around and see which element is being
used by which test step also if we right
click an element we can go to used by
and we could see some of this reuse so
this test or this element is being used
in two different steps of the same test
so if I was to edit this element I can
apply it in both of those locations so
that's our element repository and we'll
see as we start building a test how that
how that gets filled up down below here
I have my output screen shows my last
build was successful right before our
webinar began also any syntax errors and
source control updates as well also I
want to point out this compiler and the
build succeeded there's a new feature we
added I have to take credit for it too
because I think it was my idea and you
can see this dot CS file this helper
class file that I have in here you can
certainly add these types of files into
your application well this one's red
because I've got it marked as in
development this is a new function that
allows us to take things out of the
compile force it for instance things
that are broken that we don't want to
include in the in the project
compilation that might be still under
construction or things like that
previous to this it was it was much more
difficult to kind of remove things or
hide things from the compilation because
we do want to make sure the whole
project compiles correctly but we also
understand that you might have things
under construction that just aren't
ready so now you can actually mark that
you know any of these really mark them
as in development and then as you can
see it turns red that indicates that
when we compile it will skip those and
if we do compile all it will include
those so if I did a compile all here
you'll see that I do still have an error
in that - 10 days CS file but if I do
compile without that you'll see we got
built succeeded so it's excluding those
two which is really helpful when you're
still working on things that you don't
want to include
right so we'll pin this back out away
now that's set over here on the left I
can always pin that open or undock it so
you can really easily manipulate these
tabs and then over the top right we've
got our step builder here at the top of
the common section is our test two step
feature this is where I can go grab any
tests I've already created and bring it
into the the tests that I have so I can
actually just bring in this execute test
basic login test so this is a call to go
execute another test this is now a test
within a test
alright so an inception type of thing
you can also move this around so maybe
this is the first step in the test or
drag it up to the front or maybe we'll
navigate and then we'll login we can
move that just however we need to it's
very easy to manipulate these tests and
update them but with the test of step
you can modularize your test you can see
maybe for instance a master test that I
have here
here we have it execute a login test and
then a dialog handler test then we have
a wait step and then an if-else scenario
there's a test inside the if scenario
and then the else scenario there's a
separate test so you can really build
out these choose your own adventure type
processes work with your application and
that can work with conditional logic
using verifications and things to make
sure you have a bulletproof test okay so
as test a step over here also there's
tons of stuff packed in here clearing a
browser cache you can add that to your
test if you've got some caching issues
that are going on that might be this
step you put before your navigate step
refresh browser capture browser we could
do desktop or browser capture to get a
screenshot of something during execution
we do capture screenshots to during
recording and create a storyboard you'll
see that every step has a story
storyboard screenshot here and a
highlight of what it's doing during that
step this can be exported out into HTML
as well lots of our customers like this
because it helps them build their
documentation and their user guide and
of course if need to you can recapture
those as well but in addition you can
always capture browser state or capture
desktop state screenshots along the
with that just lots of things that you
can work with of course you can code
from scratch or take something in
editing code that takes a step you've
created and writes the code for you
effectively we've got our actions and
verifications up here you'll see some
redundancy here too these capabilities
don't just live in the step builder a
lot of these things you'll see in the
recording toolbar also in the element
highlighter so these are kind of
redundant we like to put these types of
things wherever we can to make them
useful for you but you know if I wanted
to simply add a JavaScript event against
this particular span that I have
highlighted that's exactly what I'm
doing I choose an element I choose an
action or choose an event that I need to
and I can add a test step for that
directly into this test verifications
here again we'll see more of that in the
recording process our conditional
if-else while loop loop options dialog
handlers for your logging in or
upload/download processes to make sure
that we can work with those applications
and then the properties panel down at
the bottom this is going to be really
focused on whatever it is we're focused
on so right now it's showing us the step
properties for step number ten here this
is where we might do some data driving
and actually bind some data to that test
step you can see there's an AJAX time
out there's a few these properties in
the body of the test steps too depending
on the type of test step in question
different properties will exist and of
course you can see two properties
popping up here as I click between the
two different types of steps the input
versus the combo open type of step here
but lots of easy to many of late timing
adjustments and just different ways in
which you can interact and and customize
this test step code lessly so you don't
have to get into the code and mess
things up effectively on that property
panel depending on what we're looking at
if we look at an element it's gonna be
the element properties if we look at a
test it's gonna be the test step prop or
the test properties there's actually a
lot more of these as well that you can
jump into and you know just whatever it
is that you're focused on you'll see the
appropriate properties there all right
let's get some testing done here so
we've seen a lot of these settings and
things and I like to go
through those because not a lot of that
is very obvious when you start out with
test Geo
so I want to give you guys a nice
overview of that we're gonna start with
a simple login test here they may have a
few of these already in my system but
that's okay you can of course search
your project as well but we'll open this
up it's now in its own tab here and from
here I'll just hit record and it's gonna
let me click into the test body and hit
record and here it's gonna prompt me for
the URL that we want to build a test for
I will take this one here and then I can
choose which browser I want to record
from so you can record an ie Chrome and
Firefox you're not stuck with one you
can mix and match get the steps you need
from the different browsers as I
mentioned I was working with a customer
yesterday on kind of their environment
in their settings and so forth we
realized that recording a step in one
browser like ie
didn't work correctly in Firefox but
recording the same step in Firefox
worked across all of the browsers so
sometimes you do have differences
between the way these applications are
rendered in the different browsers and
you can explore and try things again
we've got that for solutions to every
problem you know really that's different
ways of handling a step and how you
build a step inside of one browser but
then you can also use multiple different
browsers to try that as well
we'll start with ie we'll hit record
this will then spin up the browser and
attach the recording toolbar
sorry my select my sights a little slow
there this morning so now we've got the
browser up and running we've got the
recording toolbar it looks like it's
hidden behind but this can be docked and
undocked so now it's docked at the
bottom it shows that we're currently in
a live record mode we can pause
recording we can turn on the element
highlighter there's the tool bar all
sorts of stuff down below that we'll get
into in a bit but the first thing we're
going to do is solution 1 we're gonna
hit record and do what a user does so
this has captured my navigate step by
the way if it had recognized any portion
of this URL as the base for instance
this portion of it it would have dropped
that automatically in the base URL and
left the top with slash welcome that's
the navigate portion of the URL and this
allows you to replace the base portion
easily to manipulate these tests to work
across different develop deployment
environments but again as I mentioned
this is something that you might do at a
test list level rather than at a test
level but of course you can do it in all
these different areas so some of that
redundancy for you just to make sure you
have what you need where and when you
need it so we're just gonna carry on
like a user here up so I put that in the
wrong field hang on you see that it
keeps up with me even though I started
to type the wrong thing it actually
changed in midstream and allowed me to
update that instead of creating a
duplicate step we'll just tab over to
the next field here you will see it does
record those tab operations but these
are actually not necessary it's best to
just click into the field because this
password for you this password step has
everything it needs to go find the
appropriate field and interact with it
so some systems you you need to cheat by
adding keyboard operations that
exercises the keyboard but it doesn't
necessarily know what it's doing you
know it knows it's coming from the
username field and it's hitting tab once
but has no idea where it's going after
that tab indexes can be unreliable they
can change you know these really you're
just not necessary steps and tests to do
and if you have an extra step you've
accidentally recorded you can always
delete it on the fly or if you don't
know whether you need it or not disable
it run the test without it and see if
you need it and then if you determine
you don't need it you can delete it
okay but keyboard operations sometimes
can be useful just generally speaking
they're not needed in test studium all
right we'll click login and now we're
logged into the application now we're
gonna go ahead and close the browser and
let's get this browser out of the way -
and now we've got a little five-step
test right so let's run this back and
this is again what we call quick
execution so we just were still building
this test we're gonna try it out see how
things go now I created that in IE I'm
gonna run it in Firefox now see how it
works in Firefox to begin with and very
quickly it goes through that process and
everything comes back green but let me
slow things down for you but to do this
I'm going to turn on annotation this
little stamp button up by the 400 here
is going to slow down the playback it's
gonna add 400 milliseconds between tests
step something you can modify and it's
going to give us a play-by-play so if we
run this back again still in Firefox
we'll see a lot more detail and a little
slower execution so that we can really
observe the behavior so highlights for
us and gives us the red and yellow kind
of wording there we see it's using that
insertion dropping the values in there
and here it clicks log in right and then
it closes the window well this is great
right we're getting passing tests but
it's not perfect it's not bulletproof I
could actually put any username and
password combination in here and get a
passing test out of this because there's
no proof built into this test what we
need is a verification to prove whether
or not we actually succeeded at logging
in so let's put this back into record
mode the way I'm going to do that is
right click on step let's go to step 4
actually and we're gonna use run to hear
this execute the test up to that spot
and puts me in a live record mode I'm
stick with ie for now but we're going to
record in other browsers here later ie
does have a little bit of an advantage
when it comes to the recording
highlighter that I'm going to show you
and in our February actually maybe our
summer release will be adding the same
enhancements to Firefox and Chrome as
well
but it has now executed steps one
through four and it's left me in a
recording mode the beauty of that run to
hear option is that it will stop a long
way like if there was a problem on step
two it would have stopped and attached
the recorder at step two even though I
told it to go to step four it's a great
way to jump into a debugging mode we
really encourage you stave and stay in
this live record mode and troubleshoot
your way through things once you're in
the live record mode not only do we have
the the two here but now we have run
from here and run selected steps as well
let's take a quick look at the element
in question here while we're at it we
refresh my Dom here are the steps that
we are the elements that have been
captured during the recording process
again click an element or click a step
you'll see a point to the corresponding
element let's just open up this element
were going to right click and click Edit
in live and now we have the element find
logic that was automatically created
based off of my project project settings
so this means it was trying to identify
the password field
it started with automation ID that
didn't exist UID didn't exist text
content the field was blank so that
didn't exist inner text it didn't have
anything in it so skipped all the way
down to ID and found an ID for that
element and it combined it with a tag
name this is a very common type of
identification logic that you'll see
it'll be a unique identifier combined
with a generic type of tag name we're
looking for an input with the ID of
password this logic holds up in Safari
edge Firefox Chrome and the one I didn't
say ie as well as cross all those
different form factors and responsive
design this is what makes tests you do
is so powerful is because we're not
relying on the full makeup of the page
to be exactly right in order to get to
that appropriate input so certainly you
could do that but that's really why a
lot of people come to us is to avoid
doing what we've been used to doing and
struggling with for so long these
suggestions provide other things that
were able to use too so I could say well
maybe if ID is dynamic we might have a
problem finding that element right and
I'll just clean that up here for a
second let me go back to that but if
that ID is dynamic
like this for example what we may do is
use a different operator like contains
and trim the dynamic portion if there's
a static portion we can rely on and that
way we could still find that element
even though the dynamic portion of the
ID changes or I may be looking for
something better
maybe name is more static and reliable
I'll use name and I'll drop ID all right
well let's want to add things before we
take things away because this is
dynamically working with the page and I
should show you that it's highlighting
it on the UI as well so as you're
working through the element logic over
here it's actually highlighting the
element over here so you get feedback
from the UI to make sure you understand
what it is and what's working that it is
working you can do this on the Dom tab
too whenever you go to the Dom tab next
thing to do is click validate that will
take you to that spot in the Dom if
you're not familiar with Dom this is a
great tool to help you learn Dom so here
if I click on the label for password you
see it's highlighting the label for
password if I go up to the div class
field it's highlighting the both the
input and the label since those are
child children of that div class field
so you can traverse the Dom you can see
what's being highlighted you can also
you know take for instance this form
level we can replace elements here you
can see it creates a dynamic chained
find expression sort of a parent level
to a child level and we can jump back to
suggestions and see all the values it
brought back for this layer versus this
layer and we can really customize that
right let me reset this there's lots of
other things we can do but I just looked
at the clock and there's very little
time to continue let's go ahead and move
on but this gives you a feel for how
flexible that fine logic is and as I
make this change I can say yeah apply it
to all the tests that use this element
so I've just saved myself a ton of time
and fixed a broken element all right now
I mentioned we need to get into the
verification part of this test so we had
an issue here when the tests executed it
went ahead and put in the password but
login is grayed out now I could
strengthen this test by having a
verification that verifies if login
is enabled prior to clicking it I'm
gonna skip ahead a little bit because
what happens here this is that met that
instance where you have a false positive
it did what we said to do right you put
the password in the field so the test
step passed but it didn't enable login
correctly because there's a JavaScript
handler on that field so if I just
simulate real typing this step level
setting if I see this as a trend
remember I can go back to the project
level settings and set this but right
now I only need on this one step and I'm
just gonna have it right click and do
run from here this time it should type
in the value and enable the login button
for me
so this time login is enabled correctly
and it clicked it correctly and we
actually got into the application we're
still in the live record mode you see
did pause the recording for me and it's
got the highlighter on for me and you
can see here how the highlighter works
this is kind of the issue I was or the
advantage that that ie has right now you
can use the highlighter in Chrome and
Firefox too it does it just doesn't have
this extra extrapolation but if you
wanted to you could use the Dom below to
get to the same layer so you could still
do all the same things
it's just presented a little bit
different way so we're actually gonna be
working on providing the same kind of
extrapolation here in in the Chrome and
Firefox but for this reason I like to
use IE when I'm doing verifications even
though I might be building the majority
of my tests in Chrome or Firefox it's up
to you along the way these quick steps
give you verifications you can quickly
add you can see the table level
verifications that are here the the row
level verifications the cell level
verifications we can also extract very
values from the UI we might want to use
today to drive something else so there's
a lot of very easy things to do and
here's some of that redundancy the
JavaScript events the mouse actions the
scroll actions that we saw in the step
builder pane or if we wanted to do
something a little bit more advanced and
go to our second level option we could
use the build step which is going to
take that identified element it's going
to find it in the dom as it's done here
and here you can see - the same idea of
clicking around it's highlighting up
above for me whatever I click on and
then here we have the ability to build
out those verifications or actions
against that element so again all those
types of actions are here here's where
you'll find also image verification
where we can add a pixel level image
verification either for the whole image
or maybe just a portion of the image and
it's important to note with pixel level
verifications they're finicky not a lie
they're they change pretty easily from
one browser to the next so having an
appropriate thresholds important also if
you want to focus on a specific area of
the image you can do that this is where
we'll use XY coordinates but even
we're still going to go locate this
image wherever it exists so it could
show up over here on the right side of
the screen we'll still find it because
we're finding it based off its
properties then once we get there the
zero zero point is the top left of this
image so the XY coordinates are not
based on a page level they're still
based off of finding the element first
and then from there focusing on a
specific maybe area of that element so
we'll add that test step in there
there's a cosmetic verification now I
don't want this to end my tests so we'll
use the continue on failure option which
is that blank column there or you can
right-click and see the continue on
failure option here in the right-click
menu that way it can continue even
though that might fail and then lastly
let's go ahead and dock this back we'll
get back on our recording browser and
I'm gonna use a verification to verify
that logout shows up this is a good way
from my login test to make sure that we
succeed if this logout shows up that
usually means we've logged in
successfully so that's my my functional
verification the one above here is more
of a cosmetic verification all right
so no time to waste let's go ahead and
close our browser down we now have
simulated real typing which was a simple
checkbox click on the password field we
already saw that executes correctly we
added some verifications in to make that
more bulletproof in fact let's add in
one merit one more verification on the
pre login page and we'll do that just
from the step builder and we'll do
verify it's enabled and we'll just move
that above the login button so now I
have a much stronger test with these
verifications something to check to make
sure it's enabled prior to clicking it
and then after we're clicking it we're
making sure not only does that image
show up but also that logout link shows
up correctly so we'll run this guy it'll
run it will just get we stick with
Firefox here for a moment and then I'm
gonna spend some time in recording
browser here in a moment with with
Firefox for instance I'll show you a few
of these other test examples but now
you'll see that log in process user name
gets inserted in Dom injection password
gets the extra care the focus the scroll
to visible and the character by
character input which enables the login
button which should pass our
verification
the click of the login button and then
we have two verifications here one for
the image and one for the logout link
and now we've got an almost passing test
we actually had a failure here so
luckily we had continued on failure
now failure details is here not a lot of
people realize this but you can double
click this red X
lots of people do see the view log that
gives you a log file but it doesn't give
you the best stuff the best stuff is
here in the red X it gives you in this
case it was it was sixteen point nine
three percent off we only had a
tolerance of ten percent so I might be
able to you know give it a better
tolerance there but we have our expected
state and our failed state images we
have the page Dom at the point of
failure too so we can see what was going
on behind the scenes when the failure
occurred and this might not make any
sense to the non-technical developer
non-technical testers out there but the
developers love to get this detail and
on a failure tab here we have the
complete test log with steps to
reproduce the issue browser inversion
timing and everything that you have a
little bit of that failure information
there that gets sent over as well and
the exception log - if this was an above
we can basically push it right into our
bug tracking system from here or we can
export it and attach it to a support
ticket if you need tests to do support
help by the way under the help menu you
have ticket you do have access to our
support team throughout your trial so
please feel free to try them along the
way as well and of course forums and
things like that too for you let me show
you a couple of the things before we go
I wanted to show you just this basic
being data injection test it has a coded
step in it there's a lot of ways in
which you can use code and leverage code
certainly there's some folks out there
that are just big code fans and that's
fine they can code everything if they
want to but one of the big advantages of
test studio is the low code and no code
approach that we have so this was an
example where it navigates to being it
does a date injection where it goes and
finds today's date from the server
converts it to the string and it puts it
into the field so I just want to show
you this real quick we'll just do a
quick run to here so you could see how
that executes why not we'll use Chrome
here even though I have that constantly
open
and of course it's going to open on the
wrong screen so it should put today's
date in there if it's working correctly
and it did ok very basic now I have a
lot of other ways in which we do that
where it can do that code lessly for
instance I have a master flight lookup
this is a test two-step that goes and
gets dates from a date/time calculator
extracts the value from the UI making it
a variable that I can then pass to my
other sub tests so this is something I
did for one of our airline customers one
of the testers over there said I had a
script that used to calculate future
dates for me so we could book flights in
the future and one of my developers made
it for me and it's broken and that
developers is no longer here can you
help me fix it I said yeah I can help
you fix that script but the next time it
breaks you're gonna need my help again
why don't we build a test that you can
maintain yourself countlessly
and so this is another way to accomplish
very similarly update calculation here
we can do that through code on the Left
we can do that code lessly
just using a third-party date/time
calculator site adding the days I want
and using the function called extract
that grabs the value at at run time so
this way it gives me fresh data every
time I use it then it goes into the
second sub test here the test is step
and here you can see I use some keyboard
operations in this one these really
aren't necessary but I do show that you
can use those if need be and here we
actually have a data driven input so if
we run this master flight lookup search
we'll run this one and I'll do good old
Safari why not and we'll bring that over
on the right screen there's also some
care that has gone into making this test
first you'll see the setup routine very
basic this is something that that's done
a lot there's lots of these out there
you know some people say well you're
relying on a third party site I could
say well for the other option you're
relying on a third party developer
if you can't do it yourself so which one
you want to do they're basically both
the same so it's gotten the values it
needs it's now going to insert in this
case it's going to type in Chii use an
ajax timeout setting here
to make sure it has time to bring the
list back it's gonna verify that Chicago
shows up in the list and select Chicago
from that and then we have our
data-driven inputs here so it should
drop in the ten days out I think the
29th and the 20 days out
I can't calculate which would be
sometime in January
cool and then of course the final
verification of this test is to make
sure ah that the flight respond or that
the flight list comes back as you can
see it looks like Americans having some
work done on their site maybe they're
doing some load testing or something
like that right now but this will
actually fail because it's looking for
the choose flights so it did pass my my
data injection in my data calculation
but looks like we actually had we
actually caught an issue I should send
this directly over to American right now
but but that kind of gives you some
ideas there's a lot that you can do
we're trying to put a lot more content
out there's some tutorials we've got out
there as well
and at this point I know we're a little
bit over I'm going to turn it over to do
the question-and-answer portion there's
just so many more things that we can't
put into one hour but hopefully this
gives you some place to start so for all
those that have to go thanks for
attending today it looks like we do have
a couple questions coming in I'll stick
around for a few minutes and answer
those but I want to thank you for taking
a look at test studio please feel free
to reach out to your salesperson if you
want to set up a conversation or if you
need help or a demonstration or
requirements talk whatever it is that we
can do to help you find you know how
find out if test to do is the right fit
for you that's really what we want to do
and get you outfitted with with the test
lab that will work for your environment
thanks a lot everybody have a great day
if you want to stick around for the
questions please feel free to do so
looks like we had a question about
maintenance if you edit the friendly
name of the element in the ailment
repository you make the test will you
get into trouble when you record another
test happens to use the same element
when you need to update it later it does
test studio know if there is another
element already in the repository yeah
when you rename the elements it really
shouldn't affect the reuse it's all
about how the elements identified so
tests to do really queries sorry let me
get on a test that actually has elements
in it test to do queries the element or
require ease the repository and it says
if it finds a match like this password
field if it already has this combination
no matter what the name is it will
simply reuse that same element
so it won't create the duplicate even if
you rename the element then that can be
renamed from here if you'd like to there
is actually the ability to create custom
elements customs not the word I'm
looking for predefined elements where
you actually could build an element out
this is actually something that could be
done where you might have might not have
a UI yet and you want to stuff out some
tests you know maybe what the acceptance
criteria is you know maybe what fields
are involved so here you can actually
create the element the predefined
element and then later map the element
to the actual live UI so it's
interesting I would definitely read up
on it if you're interested in that but
it's a little bit of TDD that we've
introduced there a while back a good
question appreciate that looks like
that's about it again I want to thank
everybody for attending please check us
out we have these every week on the
Tuesday it's pretty much the same we try
to cover different topics and different
things you know last week we -
troubleshooting we'll probably do
something along the lines of
troubleshooting maybe test lists and
stuff like that next week so please feel
free to come back and tell all your
friends thanks a lot have a great day
and happy testing