WebdriverIO Tutorial | How to use Fixtures and Hooks | Part VI | LambdaTest
Summary
TLDRIn this informative video series, Marco Cruz, founder of Automate Now, collaborates with Lambda Test to explore WebDriver IO for test automation. Cruz, with a background in Computer Engineering and extensive software testing experience, explains the crucial concepts of fixtures and hooks in WebDriver IO. He demonstrates how to use hooks to set up and tear down tests efficiently, reduce code duplication, and automate tasks like taking screenshots upon test failure. The tutorial includes practical examples and encourages viewers to visit the WebDriver IO and Mocha documentation for a deeper understanding.
Takeaways
- 🚀 The video series is focused on teaching web driver IO for test automation success.
- 👋 Marco Cruz, the founder of Automate Now, is the presenter with a background in Computer Engineering and over a decade of software testing experience.
- 🔗 Viewers can learn more about Automate Now through their website and YouTube channel.
- 📝 The video discusses the importance of fixtures and hooks in web driver IO for test design.
- 🧩 Fixtures are used to create a predefined state for testing applications, such as establishing a database connection before testing.
- 🔗 Hooks are methods used alongside fixtures to set up and tear down test conditions, like initiating and ending a database connection.
- 🔄 Common hooks include 'before', 'after', 'before each', and 'after each', which run at different stages of the testing process.
- 🛠️ Hooks can be defined in the web driver IO configuration file or at the test level to avoid code duplication and modularize tests.
- 🔑 An example of using a 'before each' hook is to navigate to a login page before every test in a suite.
- 📸 Another example demonstrates using an 'after each' hook to take a screenshot after every test, which is useful for debugging.
- 🖥️ The 'before Suite' hook can be used for actions like maximizing the browser window before a suite of tests begins.
- 🛑 The 'after test' hook is utilized to perform actions like capturing screenshots when a test fails, aiding in error analysis.
Q & A
What is the main focus of the video series presented by Marco Cruz?
-The main focus of the video series is to explore the world of WebdriverIO and provide guidance to succeed in test automation careers.
Who is Marco Cruz and what is his background?
-Marco Cruz is the founder of Automate Now and has a background in Computer Engineering with over a decade of experience in software testing.
What are the two important concepts discussed in the video related to WebdriverIO?
-The two important concepts discussed are fixtures and hooks in WebdriverIO.
What is the purpose of using fixtures in WebdriverIO?
-Fixtures are used to create a predefined state when testing an application, such as establishing a database connection before starting the tests.
How are hooks used in conjunction with fixtures in WebdriverIO?
-Hooks are used to create setup and teardown methods, which are the means by which fixtures are achieved, such as creating a database connection before testing begins and ending it after tests are completed.
What are some common hooks available in WebdriverIO?
-Some common hooks include 'before', 'after', 'before each', and 'after each', which are used to run code before or after tests or before or after each individual test.
How can hooks be used to reduce code duplication in test scripts?
-Hooks can be used to run common setup or teardown code before or after each test, reducing the need to duplicate this code in every individual test.
What is an example of using a 'before each' hook in a test script?
-An example of using a 'before each' hook is to navigate to a login page before every single test within a test suite, eliminating the need to include this navigation in each test.
How can hooks be used to take screenshots after tests?
-An 'after each' hook can be used to take screenshots after each test, especially useful for capturing the state of the application after a test has completed.
What is the purpose of using a 'before Suite' hook in WebdriverIO?
-A 'before Suite' hook is used to perform any setup before the entire suite of tests starts, such as maximizing the browser window.
How can WebdriverIO hooks be used to handle test failures?
-An 'after test' hook can be used to take a screenshot in case a test fails, providing a visual record of the application state at the time of the failure.
Where can one find more information about WebdriverIO hooks?
-More information about WebdriverIO hooks can be found in the WebdriverIO documentation, specifically in the configuration section, and for Mocha-specific hooks, the Mocha website can be referenced.
Outlines
🚀 Introduction to WebdriverIO and Test Automation
This paragraph introduces the video series focused on WebdriverIO for test automation. The speaker, Marco Cruz, founder of Automate Now, shares his background in Computer Engineering and over a decade of software testing experience. He invites viewers to learn more about his company and engage with their YouTube channel. The main topics of the video are fixtures and hooks in WebdriverIO, which are fundamental for designing tests. Marco emphasizes the importance of understanding these concepts for success in test automation.
🔧 Utilizing Fixtures and Hooks for Test Setup and Teardown
This paragraph delves into the specifics of fixtures and hooks within WebdriverIO. Fixtures are explained as tools for creating a predefined state before testing an application, such as establishing a database connection. Hooks are introduced as methods for setting up and tearing down resources, with examples including setup before tests begin and teardown after tests conclude. Common hooks like 'before', 'after', 'before each', and 'after each' are described, providing clarity on when each hook should be used. The paragraph also includes a practical example of using hooks to avoid code duplication in test suites, such as navigating to a login page before each test.
📸 Implementing Hooks for Post-Test Actions like Screenshots
In this paragraph, the speaker demonstrates how to use hooks for actions that should occur after each test, such as taking screenshots. The 'after each' hook is used to automate the screenshot process, with a detailed explanation of how to specify the file path and name. The paragraph includes a practical example of modifying the WebdriverIO configuration file to include a screenshot folder and implementing the hook in a test script. The result is a screenshot saved after each test run, providing a visual record of the test outcome.
🖥️ Maximizing Browser Window and Handling Test Failures with Hooks
The final paragraph covers additional uses of hooks, such as maximizing the browser window before a test suite starts using the 'before Suite' hook. It also addresses the scenario of taking screenshots when a test fails, utilizing the 'after test' hook. The speaker guides viewers through modifying the configuration file to include these hooks and demonstrates how to implement them in test scripts. The result is an automated process that captures the state of the application in the event of a test failure, aiding in debugging and analysis.
Mindmap
Keywords
💡Web Driver IO
💡Fixtures
💡Hooks
💡Automate Now
💡Lambda Test
💡Test Automation
💡Before Hook
💡After Hook
💡BeforeEach Hook
💡AfterEach Hook
💡Test Framework
Highlights
Introduction to the video series on web driver IO for test automation with Marco Cruz, founder of Automate Now.
Marco Cruz's background in Computer Engineering and over a decade of experience in software testing.
The importance of understanding fixtures and hooks in web driver IO for effective test design.
Fixtures allow for creating a predefined state for testing applications, such as establishing a database connection.
Hooks are used to create setup and tear down methods, essential for preparing and concluding tests.
Explanation of common hooks such as 'before', 'after', 'before each', and 'after each' and their purposes.
Demonstration of how to implement hooks in the web driver IO configuration file.
Example of using a 'before each' hook to navigate to the login page before every test in a spec file.
Reduction of code duplication by using hooks, leading to more modular and maintainable tests.
How to disable hooks when certain tests are expected to fail due to pre-conditions like being logged in.
Using an 'after each' hook to take a screenshot after every test, with a practical example.
The process of taking screenshots is automated by specifying the path and filename within the hook.
How to use hooks outside of spec files, such as maximizing the browser window before a test suite starts.
The 'after test' hook is used to take a screenshot when a test fails, providing a visual record of the failure.
Practical example of modifying a test to fail and automatically capturing a screenshot for analysis.
Resources for learning more about hooks, including the webdriver.io documentation and mocha's official website.
Encouragement to explore hooks further and to engage with the Lambda test community for certification and access to code examples.
Transcripts
welcome to this video series where we
explore the world of web driver IO to
help you succeed in your test automation
career hello my name is Marco Cruz and
I'm the founder of automate now and I'm
excited to team up with Lambda test to
bring you these awesome videos my
background is in Computer Engineering
and I have over a decade in software
testing experience you can learn more
about my company by heading over to
Automan now.io and you can also find us
on YouTube by searching it now all right
so in today's video we're going to be
talking about two very important things
in web driver IO and those are fixtures
and hooks what are they why should you
use them why should you care about them
make sure you stick to the end and you
pay attention because these things are
fundamental as you begin to learn web
driver IO and how to design test with it
let's have a look at these things so
what are fixures fixures allow us to
create a predefined state when we test
an application let's say for instance
that you're testing in some database and
you first want to make sure that you
create a database connection before you
start testing the database that would be
a perfect use for a picture so you can
make sure that the first thing you do is
to establish a database connection the
means by which we achieve this are
called hooks we use hooks to create
fixtures and these hooks allow us to
create for example setup and tear down
methods an example would be again
creating a database connection before we
begin to test the application or before
we begin to test the database and also
ending the database connection or a tear
down method once we have completed all
of our test all right let's have a look
at some of these common Hooks and here
we have some of the common hooks the
first one here is before you would use
this before hook to run any code before
any test runs okay this will run one
time before all your all of your tests
or any test in your test Suite we also
have after and this one runs after after
all the tests are done okay it also runs
only one time we also have before each
this one runs before each test we have
as well after each which does running
this runs code after every single test
let's have a look at some examples so
you can get a better grip on this and
here we have the web driver AO project
that we have been working on all along
in this series we're going to take a
look at this WDIO config file okay let's
go ahead and open this up and in here
we're going to find hooks okay you're
going to need to scroll down and
eventually we're going to find a section
on hooks okay these are all the hooks
that come bundle with web driver IO so
let's have a look at some of these here
for instance we have before session
notice we have a before here before
command and so on okay and you you can
also read descriptions on each of these
right here okay so you can either set a
hook right here in this config file or
you can do it at the test level okay I'm
going to show you both so you can know
how to do it in either place first I'm
going to show you how to do it inside of
your spec file all right so we're going
to have a a spec right here called login
so let's go ahead and open this one up
right now we have a single test right
here which basically goes to the lamba
test website and logs in okay so let me
show you that now and this is what the
test does it goes to this website the
Lambda test playground and it goes to
this login page right here okay so when
we land on the login page it enters the
username and a password and clicks login
all right so this is what we're going to
be using a hook for we're going to
create a hook so that we always go to
the login page anytime we're running
test inside of that login spec file all
right so let's have a look at the code
one more time as you can see here we
have the test that goes to the login
page says login. open and then we're
setting a username and a password and
then it just has to pause right here of
3 seconds now imagine that we had
multiple tests in this test weite right
let's go ahead and copy this right here
and let's just add a couple more tests
in here now if you pay careful attention
you'll notice that we're duplicating
code okay right here we're saying go to
the login page and again on this test
we're saying go to the login page so
every test we need to first go to the
login page this is a perfect example in
which we could use a hook we could
create a hook that runs before our test
so that we always go to the login page
okay so let's go ahead and add a hug for
that all right let's think about what
kind of hook we want to do here we want
to go to the login page before every
single test okay so the hook we would
need to use is before each remember that
before each runs before every single
test so that would be a perfect type of
hook for us to use here so let's go
ahead and add it we're going to go to
the beginning here and we're going to
say before each right here notice that
this comes from mocha there are some
hooks that come from the mocha which is
the test framework that we are using all
hooks are coming from web driver IO as I
showed you in this config file over here
we're going to be using this one right
now though the before each for mocha so
let's go ahead and click on that and
then let's go ahead and create that
hook all right so here this before each
hook we're going to be using it to go to
the log page as we said let's go ahead
and grab this code right here this is
the code that we need to place inside of
this hook right here so I'm I'm going to
go ahead and cut this code right here
and add it over here okay now we can go
ahead and delete it from all of these
places over here in the other test all
right and notice that we've done we
reduced the code duplication that we had
our tests are more modular now they
don't need to worry about where they
need to go which SP they need to be on
they just need to do whatever
functionality we're testing okay in this
case we're going to be logging in and
that's it all right so let's go ahead
and test this out now now now that we
move this code into this before each
let's see what happens when we run all
of these tests all right now that we
have the hook in place we want to make
sure that our test is still working okay
so I've went ahead and duplicated this
code over here so obviously some tests
are going to fail right these bottom two
are going to fail because we are already
going to be logged in at this point
right here so when this runs this one's
going to fail it's not going to be able
to find the um username or the password
so let's go ahead and and just disable
these for now okay let's just go ahead
and comment these out and let's just
make sure that this one is is working as
expected okay so let me go ahead and run
this code
now and we should see this test still
passing okay even though we have this
hook over here now right there we see
the window is opening we go to the login
page and we are able to log in right now
it's just pausing for those 3 seconds
and we see that the test has passed okay
so this is how you would use a before
each hook all right again I commented
this code out because the tests are the
same but just imagine if if you had
different tests in here that all needed
to go to the login page right you don't
want to keep duplicating that code to go
to the login page every single time you
write a new test okay instead we put it
in a before each test all right now
let's have a look at another example
okay in which we want to for example
take a screenshot of the test or we want
to take a screenshot after every single
test all right let me see how we can do
that all right again we're going to be
using an after each in this case right
so we're going to say after each
all right and then we're going to add
some code in
here all right so to take a screenshot
we're going to be using this folder over
here which I added before I start
recording this video this is the
screenshot folder you can simply add it
by going over here by saying new folder
okay and you you can put this here in
the um the the root directory of this
project right here okay so we're going
to use this folder to put all of our
screenshots whatever screenshots we take
okay so in this case let's go ahead and
take our screenshot after every single
test so here we're going to say await
and then
browser do save screenshot okay so let's
use this one right here now we need to
provide the path for this screenshot
okay so we're going to go ahead and put
that in here and we're going to put this
one inside quotes Okay you want to
specify where the screenshot is going to
be saved in this case we have this
folder right here called screenshots
right and this is in the root directory
so we say dot root directory that's what
that means and then for slash
screenshots
okay and then for Slash and then we can
name our screenshot in my case I'm just
going to call it
screenshot.png okay we need to put in
the uh file extension in here okay so
now we should be seeing a screenshot
taken after this test runs okay let's go
ahead and make sure that this is run
running
properly all right so we have the test
running one more time we're going to log
in and hopefully when this is done we're
going to take a screenshot right and
indeed we can see here a new file has
been added to the screenshots folder
okay it's called screenshot.png if we
open this up we can see right here the
screenshot that was taken all right so
that's how you would take a screenshot
after every single test all right so
I've shown you guys how to define hooks
inside of your specs right here right so
before our test and after our test we're
either you know going to the login page
or taking a screenshot now let's let me
show you how to use hooks outside of
this spec file all right so we're going
to go ahead and go to uh well first let
me comment this out I don't want to take
a screenshot anymore all right let me
comment that out and I'm going to show
you guys um also going to delete this
file that we added let's go ahead and
delete it for now so I can show you some
other stuff all right you may have
noticed that when the test runs the
screen is not maximized next I want to
show you guys how you can use a hook to
maximize the screen before your test
runs or at the start of your test all
right so let's go ahead and take a look
at that we're going to take take a look
at this wdi config file and in here
we're going to find this hook called
before Suite okay it says here that this
hook gets executed before the suite
starts okay your Suite of tests are
going to run but before that we're going
to be executing whatever code we Define
in here okay so let's go ahead and un
comment this for now and we're going to
maximize the browser window before we
execute our test all right so here we're
going to say
browser. maximize
window and that's all we need here okay
we just need to call that method now
let's go ahead and save everything and
rerun our test to make sure that we can
see that the window is maximized when
our test
run and I noticed that I made a mistake
AK here the window open and then it
minimized that is because I used the
wrong method right here so we need to
say maximize instead of minimize all
right so let's go ahead and start over
here we're going to say maximize window
all right so let's try it
again and hopefully we'll get it right
this
time and here we see the browser window
has open and it's maximized it's taking
the entire viewport right here all right
so this is one way that you can use
another type of hook right here before
Suite to do any type of setup before
your test Suite runs let's take a look
at another one okay now we're going to
be taking a screenshot in case of a test
failing okay so if a test fails we want
to take that screenshot let's go ahead
and take a look at what other options we
have here okay we need to look for
something that says after right so we
have after each right here we don't want
that there should be something here
called after test okay so this is the
one right here so so this one this
function gets executed after a test okay
this applies to mocha and Jasmine all
right so we want to take a screenshot
after every single test in case the test
failed okay only if the test failed do
we want to take a screenshot all right
so let's go ahead and uncomment this
right
here and let's add our code in here I'm
going to say that I want to take a
screenshot when a test
fails
here we're going to say if not pass so
if my test does not pass I would like to
take a screenshot right so let me go to
the login spec and grab this code right
here so we're going to reuse it over
here okay so in this case I'm going to
just change the name of it so you guys
can see the difference failed okay and
this is what's going to happen right so
when the test runs and it fails we're
going to go over here and take that
screenshot and hopefully we're going to
see the screenshot being saved here
under this screenshots folder right here
you can see that there's nothing there
right now so we're going to go ahead and
make our test fail this test right here
so that we can see the screenshot in
there to make this test fail I'm going
to go ahead and change one of these
selectors in the login page so let me go
to this login right here and for the
input username here we're going to go
ahead and do um add an underscore for
example okay so let's go ahead and run
this test
save everything and run it and let's see
what
happens okay we can see the test is on
the login page but because we provided a
bad selector you won't be able to find
this username field right so we can see
the test has failed and we have a
screenshot here called fail. PNG if we
open this up we can see here the login
page showing up hopefully you were able
to see how easy it is to use hooks if
you want to learn more about hooks you
can go to webdriver.io and look for the
documentation in the configuration
section there you're going to find a
section called hooks okay and this is an
explanation with examples on each of the
hooks okay as I mentioned there are some
hooks that are specific to web driver
iio and some specific to the test
framework that you may be using in our
case we're using mocha which also has
specific hooks okay if you go to mocha
j.org you're going to find this page
right here and all you need to do is
click on this section that says before
after and these hooks right here okay
and here you can see some explanation of
the different Hooks and how to use them
okay so go ahead and head over there
check them out and start trying out
these hooks I hope you had fun learning
about hooks thank you for making it all
the way to the end of the video check
out any of the links on the screen to
get connected with the Lambda test
Community get certified and get access
to the code that you saw today see you
in the next
[Music]
video
[Music]
he
関連動画をさらに表示
How to Handle SSL Certificate in selenium Webdriver || Ganesh Jadhav Automation Studio
Set up a Mettler Toledo SLP33 to a 5032 IO-Link Master
How to automate Login page using Selenium WebDriver with Java? | Selenium WebDriver Tutorial
GoHighLevel Automation Tutorial | 2. Website Forms & Survey Automations
AUTOMAÇÃO - COMO TRANSCREVER ÁUDIO DO WHATSAPP PARA TEXTO - MAKE INTEGROMAT
Control IO Warehouse
5.0 / 5 (0 votes)