📺 Develpreneur YouTube Episode

Video + transcript

Introduction To Selenium - Part 1

2021-11-16 •Youtube

Detailed Notes

Selenium is a popular way to automate browser activity, record sessions, and setup testing scripts. In this series of tutorials we look at using Java and Selenium for all your browser automation needs.

Transcript Text
[Music]
the last series we talked about was kind
of integrating testing into your
development flow
and i wrapped up that one by talking
about my framework with the two pieces
one about the testing side of the
framework and the
other side being the actual java
framework piece
using the different test frameworks like
pojo or page optic models
things like that
this one we're moving away from that
just slightly and this may become a new
series if you guys like it
let me know
and i can kind of put something else
together
but
a lot of problems people have even with
frameworks or with
automated testing in general is actually
how do we actually go and interact with
our web pages
and since selenium is pretty much the
forefront for almost all web page
interactions and
automated testing
i decided to
do a presentation today on essentially
how do we interact with the web pages uh
so how do we use the selenium web driver
to actually
test our code to actually work with the
web page so this is going to be kind of
a high level i'm not going to get down
into the wiis that's just setting up the
binaries
configuring your project we're actually
just going to be kind of jumping right
into it
i'll highlight some of the components to
actually
use
the components of the webdriver to get
started but we're going to focus
primarily on looking at the web pages
themselves how to identify the
individual
page elements that we want to use for
testing and then how we actually use
those with the web driver
so with that that's pretty much it for
the slide
because this is going to be pretty much
all hands on
so if you want to
learn more about selenium and actually
kind of do the
how to's and everything
if you go to selenium.gov this is their
uh
professional or i guess their main page
for everything selenium
and there's three flavors just blending
you get the selenium ide which is a
record playback tool you can use for
chrome and firefox
uh which is good if you're just testing
interactively and want to make sure that
something works on a page not really
good for long term automation or testing
this is just kind of one and done
recording tool
for frameworks or more long-term
automation you want to do things with
the selenium web driver
now if you have more of an enterprise
environment and you're going to do more
load testing or more
browser os
testing you will want to look at the
selenium grid now i've done a
presentation on the grid in the past
using kubernetes and docker so if you
want you may want to go back and revisit
that if you want to learn more about the
grid
today we're going to primarily just
focus on using the web drive so if
you've never used webdriver you can get
it from here
however i'm going to show you
i live in the java world these days but
i'll show you how to get all this using
maven so you don't even have to come out
to the dev page to get your binaries at
all
another useful point though on their
site though is their documentations page
this is a great how-to to get started
with the
sling
selenium and the selenium web driver
so basically you come down here getting
started with selenium web driver it
gives you kind of a quick
overview some how-to's
and then
primarily the web drivers the driving
factor of everything that you're going
to be doing
so here we want the selenium
api
all right so in the selenium api this is
pretty cool they've
updated all their uh java dots
essentially to be the
new
uh look and feel for uh documentation
which is really nice and easy to read a
little tricky to navigate through
initially but once you
get the hang of it it's not that bad
the main
classes we're going to be concerned
about today are going to be the buy
webdriver and web element so these are
going to be the three things you have to
get familiar with with selenium in order
to one create your tests
two interact with the web browser and
three
locate your web elements on the page and
actually interact with the web element
so the web driver is the primary class
that you're going to need and as the
class name pretty much
clarifies is a web driver it drives the
interaction between your test and the
browser that you're going to use as you
can see here it supports chrome edge
firefox ie and safari
they used to support uh
phantomjs and ghost.js but that has
since been discontinued since now um
since edge is a build on chromium so
chrome edge firefox
are all pretty much uh
built on the chromium or the gecko
initial browser open source browsers so
those browsers all have the capability
of running headless so you no longer
need the support for the headless
browsers out there like html unit
ghost driver or phantom js driver so
these are the browsers
drivers that are supported and i
recommend pretty much looking at chrome
and firefox uh those are pretty much the
two most easy to use
uh edges also now becoming very easy to
use because it's actually a very
lightweight form of chrome uh because
microsoft is pushing fast streamless
browsing uh without all the bells and
whistles that chrome has that slows down
the browser
so that's something to look at all right
so we have webdriver
to actually find our web elements we're
going to need to use the by class this
is going to be how we look up those
locators and by looking at the locators
we have a couple different
methods here that we use to actually
find our locators and we can find them
using the css class names we can find
them using css selectors we can find
them by their individual element id we
can look at by javascript we can look it
up by link text we can also look it up
by
the element and attribute name we can
also look at by partial link text you
can also pull by tag name but as you can
see that's being deprecated because
really it's not that useful
uh it can get very bloated so there this
is going to be going away in the near
future
or you can use the very
friendly reg edit xpath to
do a more complex look up of your
elements and we're going to actually
look at an example of using each of
these today
and then finally once you have your
locator once you locate it it's going to
return a web element class and this is
essentially the class you use to
interact with the web element that you
pull in so this could be your form input
fields your labels your links and so
so we will jump out and get right into
the code
so first we're going to create a class
here i created a very simple class
called using locators
this is a maven project
so i basically just created a basic
maven archetype
project so i would have my main java um
source name java and sourcetestjava
just to kind of
show you how webdriver works i'm not
going to
include any
j unit or testing g components to this
example today we're just going to use a
straight java class
just so you can see how the actual
selenium classes work
and then we need to configure our palm
file to get a couple of things so we
need to get the org dot selenium hq dot
selenium
maven dependency to get our selenium
java classes
all right so our maven dependencies it's
going to pull in all these selenium
classes or selenium jar files here now
these selenium uh
jars here the selenium
gas java selenium dash api are the
primary ones that you get if you were to
download selenium from
the selenium site so these are the main
binaries there are some additional
support binaries you get support remote
driver you'll need those as well these
other ones here the selenium chrome
driver edge firefox and ie driver come
from the io github
bonnie garcia now the webdriver manager
library here that this guy incorporates
that pulls in this guy here
uh every time you start your
test where you start your program
you if you use the web driver manager
it's going to automatically pull down
the latest
chrome driver that is required for
interacting with the browsers so you no
longer have to go out and manage your
binaries anymore for your browsers this
is a huge time saver uh when dealing
with selenium or any type of automation
testing
okay so let's go back over to our class
so we have a simple main method here now
just to make sure that things go
smoothly today we're going to just start
out with a try catch block here because
uh sometimes webdriver will crash you
accidentally close your browser browser
closes unsuspectively so we kind of want
to catch that so we'll just do a simple
try catch around the whole
project here
just do a simple exception
and we're just not going to do anything
with it
all right so we're going to do the bulk
of our testing in here
now the first thing we need to do is we
need to get our web driver
started out by actually instantiating
our web driver
so to do that
we need these two lines of code here
so the first one webdriver manager if
you don't use webdriver manager and you
just want to use webdriver correctly
you're going to have to actually
do things like actually set up system
dot
set properties and then you're going to
have to actually set the properties for
the particular web driver that you want
to use so if you want to use chrome you
have to set up the webdriver chrome and
then you have to point it to the actual
physical location of the uh
binaries
and this gets tedious because if you
want to change your browsers you have to
download the latest binaries change your
code so i don't recommend doing it this
way instead i recommend using the
webdriver manager class
so we have our selenium webdriver we
have our selenium chrome chrome driver
and we have the
i o github bonnie garcia webdriver
manager
so to use the webdriver manager it's
really straightforward very easy you can
do webdrivermanager. and then you just
go pick the
browser that you want to use firefox
edge chromium
chrome driver
i believe they
yes they simplified it now so before
they also had gecko drivers but now uh
firefox driver encompasses both the
gecko and the firefox driver so if you
want to use firefox if you use the
firebox track
to get rid of all the
bloatedness of the set path you can do a
couple different things here you can set
your browser to be 32-bit 64-bit this is
actually still
necessary if you're doing cross browser
testing across older operating systems
you'll want to make sure that you
actually set the
browser to the correct uh fight 32 or
64.
and you can also
do things like clear cache
uh set the particular browser path if
you actually want to point to your own
binary
clear preferences you can also set
preferences force cache
so you can do a lot of different things
here with
the
particular
configuration
but just to get started if you do
your browser driver.setup you're good to
go it has now configured your runtime
for that particular browser driver
and then the next thing you want to do
is you call webdriver and then you tell
it which browser you want to use which
chrome or which
browser driver to instantiate so you can
do chrome driver you can do firefox
driver
firefox
driver
you could do
safari
driver so basically all the particular
browsers have browser named our browser
named driver
so once we have our driver
this
instantiates our driver
now once we have the driver once we're
done with it we need to make sure we
actually uh clean it up we need to
actually close it so you want to treat
it like an i o or a screen so we have
driver
dot
close
but there is also a driver dot clip
now the difference between the two of
these is one actually closes the browser
but if you're dealing with say firefox
or chrome
where they have the like a manager tool
behind the scenes
uh what will essentially happen is yes
it will close your browser window but it
may not close the actual browser
application itself so to do that you
would need to call driver.quit
now for browsers that don't have the
management
application running behind the scenes if
you call quit sometimes that will fail
or vice versa if you call close close
isn't recognized by the browser but quit
is so
these will also have to be wrapped in a
try catch
and this just is quick and dirty um but
i just kind of want to show you guys
what you need to do just to get started
my framework actually encompasses all
this so it's very clean all you have to
do is just call
run test and it will actually build this
and
it will do all the supporting pieces you
need to do behind the scenes but if you
just are getting started it's kind of
good to see how things work
all right so now we have our driver so
what can we do with our driver so say we
want to actually go out
and test walmart
so say we wanted to go and test an
actual site so we need to get our url so
we'll copy
walmart.com and we'll do driver dot
get
and we put in
our url
and if i did
spread
sleeve which is not really what you
should do for testing or for
safeguarding but we'll just do this
this way all right so we've got thread
sleeve it's just going to pause for a
few
seconds
and
we are just going to run this real quick
and make sure that walmart.com opens
all right so we'll close the existing
browser so you'll see this working
and we'll just right click and run it
there we go
and as you can see it put in walmart.com
and we navigated over to walmart
[Music]
you
Transcript Segments
1.28

[Music]

29.199

the last series we talked about was kind

31.039

of integrating testing into your

32.8

development flow

34.559

and i wrapped up that one by talking

36.64

about my framework with the two pieces

39.36

one about the testing side of the

40.879

framework and the

42.879

other side being the actual java

44.96

framework piece

46.32

using the different test frameworks like

48.239

pojo or page optic models

51.44

things like that

52.879

this one we're moving away from that

55.12

just slightly and this may become a new

56.96

series if you guys like it

59.199

let me know

60.48

and i can kind of put something else

62

together

63.199

but

64

a lot of problems people have even with

66.88

frameworks or with

69.52

automated testing in general is actually

72.88

how do we actually go and interact with

74.96

our web pages

76.4

and since selenium is pretty much the

78.32

forefront for almost all web page

80.799

interactions and

82.32

automated testing

83.92

i decided to

85.52

do a presentation today on essentially

88

how do we interact with the web pages uh

90.64

so how do we use the selenium web driver

93.28

to actually

94.96

test our code to actually work with the

97.52

web page so this is going to be kind of

99.36

a high level i'm not going to get down

101.36

into the wiis that's just setting up the

102.96

binaries

104.32

configuring your project we're actually

106.32

just going to be kind of jumping right

108.159

into it

109.439

i'll highlight some of the components to

111.439

actually

112.479

use

113.6

the components of the webdriver to get

115.28

started but we're going to focus

116.96

primarily on looking at the web pages

119.68

themselves how to identify the

122.32

individual

123.6

page elements that we want to use for

126.399

testing and then how we actually use

128.08

those with the web driver

130.239

so with that that's pretty much it for

131.92

the slide

133.52

because this is going to be pretty much

135.04

all hands on

138.8

so if you want to

141.52

learn more about selenium and actually

143.599

kind of do the

145.12

how to's and everything

152.959

if you go to selenium.gov this is their

156.959

uh

158.8

professional or i guess their main page

161.12

for everything selenium

163.2

and there's three flavors just blending

165.2

you get the selenium ide which is a

168.16

record playback tool you can use for

170.319

chrome and firefox

172.08

uh which is good if you're just testing

174

interactively and want to make sure that

175.519

something works on a page not really

177.76

good for long term automation or testing

180.319

this is just kind of one and done

183.04

recording tool

184.48

for frameworks or more long-term

187.12

automation you want to do things with

189.2

the selenium web driver

191.2

now if you have more of an enterprise

193.599

environment and you're going to do more

195.92

load testing or more

197.599

browser os

199.28

testing you will want to look at the

201.04

selenium grid now i've done a

203.44

presentation on the grid in the past

205.76

using kubernetes and docker so if you

208.159

want you may want to go back and revisit

209.92

that if you want to learn more about the

211.2

grid

212.72

today we're going to primarily just

214.08

focus on using the web drive so if

216.48

you've never used webdriver you can get

218.159

it from here

219.76

however i'm going to show you

222.4

i live in the java world these days but

224.72

i'll show you how to get all this using

226.4

maven so you don't even have to come out

228

to the dev page to get your binaries at

230.319

all

231.36

another useful point though on their

233.28

site though is their documentations page

235.68

this is a great how-to to get started

238.239

with the

239.519

sling

240.4

selenium and the selenium web driver

243.519

so basically you come down here getting

245.36

started with selenium web driver it

247.36

gives you kind of a quick

249.12

overview some how-to's

251.439

and then

252.48

primarily the web drivers the driving

254.799

factor of everything that you're going

256.639

to be doing

258.239

so here we want the selenium

262.72

api

267.759

all right so in the selenium api this is

270.24

pretty cool they've

272

updated all their uh java dots

274.8

essentially to be the

276.88

new

277.919

uh look and feel for uh documentation

280.88

which is really nice and easy to read a

283.52

little tricky to navigate through

285.199

initially but once you

287.84

get the hang of it it's not that bad

290.08

the main

291.44

classes we're going to be concerned

292.96

about today are going to be the buy

295.52

webdriver and web element so these are

297.68

going to be the three things you have to

300

get familiar with with selenium in order

302.479

to one create your tests

305.039

two interact with the web browser and

307.759

three

308.72

locate your web elements on the page and

311.36

actually interact with the web element

314

so the web driver is the primary class

317.44

that you're going to need and as the

319.52

class name pretty much

321.919

clarifies is a web driver it drives the

325.12

interaction between your test and the

328.24

browser that you're going to use as you

330.4

can see here it supports chrome edge

333.12

firefox ie and safari

336.32

they used to support uh

338.8

phantomjs and ghost.js but that has

341.68

since been discontinued since now um

345.44

since edge is a build on chromium so

349.12

chrome edge firefox

351.36

are all pretty much uh

354.4

built on the chromium or the gecko

359.36

initial browser open source browsers so

362.4

those browsers all have the capability

364.88

of running headless so you no longer

366.88

need the support for the headless

369.6

browsers out there like html unit

372.88

ghost driver or phantom js driver so

376.16

these are the browsers

379.36

drivers that are supported and i

381.44

recommend pretty much looking at chrome

383.52

and firefox uh those are pretty much the

386.639

two most easy to use

388.479

uh edges also now becoming very easy to

391.44

use because it's actually a very

392.88

lightweight form of chrome uh because

396.08

microsoft is pushing fast streamless

398.72

browsing uh without all the bells and

401.44

whistles that chrome has that slows down

403.44

the browser

405.44

so that's something to look at all right

407.039

so we have webdriver

408.479

to actually find our web elements we're

410.96

going to need to use the by class this

413.68

is going to be how we look up those

416

locators and by looking at the locators

419.039

we have a couple different

423.919

methods here that we use to actually

426.479

find our locators and we can find them

428.72

using the css class names we can find

431.919

them using css selectors we can find

434.639

them by their individual element id we

437.199

can look at by javascript we can look it

440.479

up by link text we can also look it up

443.599

by

444.479

the element and attribute name we can

447.12

also look at by partial link text you

449.44

can also pull by tag name but as you can

451.759

see that's being deprecated because

453.199

really it's not that useful

455.52

uh it can get very bloated so there this

458.08

is going to be going away in the near

460.16

future

461.12

or you can use the very

463.12

friendly reg edit xpath to

466.16

do a more complex look up of your

468.319

elements and we're going to actually

469.44

look at an example of using each of

471.12

these today

472.72

and then finally once you have your

474.56

locator once you locate it it's going to

477.36

return a web element class and this is

480.56

essentially the class you use to

482.96

interact with the web element that you

485.12

pull in so this could be your form input

487.84

fields your labels your links and so

491.84

so we will jump out and get right into

494.319

the code

502.479

so first we're going to create a class

504.4

here i created a very simple class

508.8

called using locators

511.36

this is a maven project

514.32

so i basically just created a basic

517.2

maven archetype

519.279

project so i would have my main java um

522.32

source name java and sourcetestjava

525.44

just to kind of

526.959

show you how webdriver works i'm not

529.12

going to

530.32

include any

533.279

j unit or testing g components to this

535.68

example today we're just going to use a

537.2

straight java class

538.959

just so you can see how the actual

541.36

selenium classes work

543.68

and then we need to configure our palm

546.48

file to get a couple of things so we

548.72

need to get the org dot selenium hq dot

552.24

selenium

554.16

maven dependency to get our selenium

557.04

java classes

560.64

all right so our maven dependencies it's

562.399

going to pull in all these selenium

565.44

classes or selenium jar files here now

568.399

these selenium uh

570.88

jars here the selenium

573.6

gas java selenium dash api are the

576.72

primary ones that you get if you were to

579.04

download selenium from

582.16

the selenium site so these are the main

584

binaries there are some additional

585.839

support binaries you get support remote

588.88

driver you'll need those as well these

591.36

other ones here the selenium chrome

593.04

driver edge firefox and ie driver come

596

from the io github

599.519

bonnie garcia now the webdriver manager

603.6

library here that this guy incorporates

606.16

that pulls in this guy here

608.48

uh every time you start your

612

test where you start your program

614.24

you if you use the web driver manager

616.399

it's going to automatically pull down

619.12

the latest

620.8

chrome driver that is required for

624.8

interacting with the browsers so you no

627.44

longer have to go out and manage your

629.04

binaries anymore for your browsers this

631.519

is a huge time saver uh when dealing

634.72

with selenium or any type of automation

637.2

testing

639.279

okay so let's go back over to our class

641.2

so we have a simple main method here now

643.92

just to make sure that things go

646.16

smoothly today we're going to just start

648.56

out with a try catch block here because

651.6

uh sometimes webdriver will crash you

654.64

accidentally close your browser browser

656.72

closes unsuspectively so we kind of want

659.44

to catch that so we'll just do a simple

661.839

try catch around the whole

665.76

project here

667.12

just do a simple exception

670.16

and we're just not going to do anything

671.92

with it

677.12

all right so we're going to do the bulk

678.64

of our testing in here

680.32

now the first thing we need to do is we

682.16

need to get our web driver

686.64

started out by actually instantiating

688.64

our web driver

690.079

so to do that

692.16

we need these two lines of code here

695.04

so the first one webdriver manager if

698

you don't use webdriver manager and you

700.72

just want to use webdriver correctly

702.88

you're going to have to actually

704.56

do things like actually set up system

708.16

dot

709.04

set properties and then you're going to

711.04

have to actually set the properties for

713.6

the particular web driver that you want

715.44

to use so if you want to use chrome you

717.279

have to set up the webdriver chrome and

719.12

then you have to point it to the actual

720.8

physical location of the uh

724.56

binaries

725.68

and this gets tedious because if you

727.36

want to change your browsers you have to

728.8

download the latest binaries change your

730.72

code so i don't recommend doing it this

733.36

way instead i recommend using the

735.6

webdriver manager class

740.48

so we have our selenium webdriver we

743.279

have our selenium chrome chrome driver

745.519

and we have the

747.36

i o github bonnie garcia webdriver

749.92

manager

751.04

so to use the webdriver manager it's

753.12

really straightforward very easy you can

755.519

do webdrivermanager. and then you just

758.24

go pick the

760.959

browser that you want to use firefox

763.12

edge chromium

764.72

chrome driver

767.2

i believe they

772.24

yes they simplified it now so before

775.12

they also had gecko drivers but now uh

778

firefox driver encompasses both the

780.16

gecko and the firefox driver so if you

782.48

want to use firefox if you use the

784

firebox track

786.48

to get rid of all the

788.8

bloatedness of the set path you can do a

791.839

couple different things here you can set

793.92

your browser to be 32-bit 64-bit this is

797.68

actually still

800.48

necessary if you're doing cross browser

802.72

testing across older operating systems

805.279

you'll want to make sure that you

806.399

actually set the

808.399

browser to the correct uh fight 32 or

811.92

64.

814

and you can also

815.519

do things like clear cache

817.92

uh set the particular browser path if

820.24

you actually want to point to your own

821.76

binary

824.32

clear preferences you can also set

826.839

preferences force cache

828.8

so you can do a lot of different things

830.56

here with

831.68

the

832.48

particular

833.76

configuration

835.04

but just to get started if you do

837.68

your browser driver.setup you're good to

840.56

go it has now configured your runtime

843.12

for that particular browser driver

846.48

and then the next thing you want to do

848.399

is you call webdriver and then you tell

851.199

it which browser you want to use which

854

chrome or which

855.6

browser driver to instantiate so you can

857.92

do chrome driver you can do firefox

860

driver

862

firefox

864.079

driver

867.04

you could do

868.72

safari

870.72

driver so basically all the particular

874.16

browsers have browser named our browser

876.88

named driver

878.16

so once we have our driver

881.199

this

882.16

instantiates our driver

884.399

now once we have the driver once we're

886.24

done with it we need to make sure we

888.399

actually uh clean it up we need to

890.56

actually close it so you want to treat

892.48

it like an i o or a screen so we have

895.92

driver

896.8

dot

897.76

close

899.519

but there is also a driver dot clip

903.6

now the difference between the two of

905.76

these is one actually closes the browser

908.8

but if you're dealing with say firefox

911.92

or chrome

913.36

where they have the like a manager tool

916.16

behind the scenes

917.76

uh what will essentially happen is yes

920.079

it will close your browser window but it

922.639

may not close the actual browser

925.76

application itself so to do that you

928.16

would need to call driver.quit

930.48

now for browsers that don't have the

932.24

management

933.519

application running behind the scenes if

935.759

you call quit sometimes that will fail

938.639

or vice versa if you call close close

941.519

isn't recognized by the browser but quit

944.48

is so

945.92

these will also have to be wrapped in a

947.92

try catch

953.04

and this just is quick and dirty um but

955.44

i just kind of want to show you guys

956.639

what you need to do just to get started

959.199

my framework actually encompasses all

961.36

this so it's very clean all you have to

964.16

do is just call

966.16

run test and it will actually build this

968.959

and

970

it will do all the supporting pieces you

972

need to do behind the scenes but if you

974.24

just are getting started it's kind of

975.68

good to see how things work

978.72

all right so now we have our driver so

980.72

what can we do with our driver so say we

982.959

want to actually go out

984.72

and test walmart

987.839

so say we wanted to go and test an

989.68

actual site so we need to get our url so

993.12

we'll copy

994.839

walmart.com and we'll do driver dot

998.32

get

999.519

and we put in

1000.88

our url

1004.32

and if i did

1006.48

spread

1007.839

sleeve which is not really what you

1010.56

should do for testing or for

1015.44

safeguarding but we'll just do this

1018.079

this way all right so we've got thread

1020.8

sleeve it's just going to pause for a

1022.399

few

1023.519

seconds

1024.4

and

1025.28

we are just going to run this real quick

1027.76

and make sure that walmart.com opens

1031.439

all right so we'll close the existing

1033.28

browser so you'll see this working

1036.24

and we'll just right click and run it

1041.28

there we go

1044.72

and as you can see it put in walmart.com

1048.319

and we navigated over to walmart

1050.56

[Music]

1065.2

you