WebdriverIO Tutorial | How to use Fixtures and Hooks | Part VI | LambdaTest

Summary

In 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

00:00

🚀 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.

05:01

🔧 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.

10:02

📸 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.

Keywords

💡Web Driver IO

Web Driver IO is an open-source test automation framework primarily used for end-to-end testing of web applications. It is a core technology in the script, as the video series aims to teach viewers how to succeed in test automation using this framework. The script mentions Web Driver IO in the context of exploring its capabilities, such as fixtures and hooks, which are fundamental to designing tests with the framework.

💡Fixtures

In the context of the video, fixtures refer to a predefined state that is created before testing an application. They are essential for ensuring consistency across tests, such as establishing a database connection before starting a test. The script uses the example of a database to illustrate how fixtures can be used to set up a consistent environment for testing.

💡Hooks

Hooks in the script are methods that run at specific points in the testing process, such as before or after tests. They are used to set up and tear down test environments, and to perform actions like taking screenshots after tests. The video explains the importance of hooks in creating modular and efficient test scripts by reducing code duplication.

💡Automate Now

Automate Now is the company founded by Marco Cruz, the presenter in the video. It is mentioned in the script as a resource for viewers to learn more about the company's offerings and to find additional educational content on YouTube. The company's focus aligns with the video's theme of test automation.

💡Lambda Test

Lambda Test is a platform that the video series collaborates with to provide educational content. It is mentioned in the script as a partner in the video series, indicating a joint effort to bring valuable test automation content to the audience.

💡Test Automation

Test automation is the use of software to execute tests on applications, reducing the need for manual testing. The script discusses test automation in the context of using Web Driver IO to automate tests, emphasizing the importance of learning this skill for a career in software testing.

💡Before Hook

The 'before hook' is a specific type of hook mentioned in the script that is used to run code before any test or all tests in a test suite. It is illustrated with the example of establishing a database connection before starting the tests, showing its role in setting up the test environment.

💡After Hook

The 'after hook' is another type of hook that runs code after all tests are completed. In the script, it is used to demonstrate the cleanup process, such as ending a database connection after tests are done.

💡BeforeEach Hook

The 'beforeEach hook' is used to run code before each individual test. The script exemplifies its use by showing how it can be employed to navigate to a login page before every test in a test suite, thus avoiding code duplication.

💡AfterEach Hook

The 'afterEach hook' is used to execute code after each test. In the script, it is demonstrated by taking a screenshot after every test, which is a practical way to document test outcomes.

💡Test Framework

A test framework is a software framework that provides a set of tools and conventions for organizing and executing tests. The script mentions Mocha as the test framework being used alongside Web Driver IO, highlighting its hooks for setting up and tearing down tests.

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