►
From YouTube: How to write good selectors?
Description
In this meeting we going to talk about why it is important to write stable selectors and what are the best practices we recommend while engineers writing their tests.
A
All
right
so
I'm
going
on
to
our
next
topic
for
today
we're
doing
this
in
a
few
best
practices
series-
and
this
is
the
third
one
and
the
series
it's
about
how
to
write
good
selectors.
So
what
I'll
do
in
this
session
would
be
I'll
walk
you
through
some
some
guidelines
that
we
could
use
to
write
with
selectors
and
also
walk
you
through
some
examples
in
our
code
and
try
and
refactor
some
bad
selectors
and
try
to
make
them
a
little
more
robust
than
they
actually
are.
A
There
are
multiple
ways
or
tons
of
different
ways
to
write
letters
to
get
to
to
a
specific
element
on
the
page,
but
some
are
less
reliable
and
more
freaky
on
an
error
prone
to
chills
in
the
application,
and
some
are
good.
So
I
focus
on
some
examples
of
good
and
by
examples
in
this
session
and
see
how
we
can
come
up
with
some
ground
rules
on
awesome
standards
to
write
with
selectors.
So
what
is
in
selector?
So
it's
an
address
so
UI
element
on
the
top
on
the
Dom.
A
It's
so
it's
usually
it's
it's
it's
a
unique
identifier
to
an
element.
This
element
could
be
anything.
It
could
be
an
input
field,
it
could
be
a
button
table,
do
etc.
So
where
does
it
reside?
First
of
you
look
at
this
example.
Here
you
have
an
admin,
login
form
section.
You
have
all
elements
defined
inside
of
it.
You
see
a
selector
attribute
and
that's
where
we
specify
the
unique
identifier
for
elements.
So
this
selector
could
either
be
a
CSS
or
XPath.
A
To
buy
our
arkad
selector
is
important.
So
if
you
look
at
the
way
MFT
of
tester,
okay,
rated
also
in
active
tasks
called
action
groups
which
are
castrate
actions.
These
actions
refer
to
elements
and
elements
have
selectors.
So
selectors
are
by
far
the
most
reused
component
of
functional
testing,
so
they
can
recall
it
as
foundation
of
tests.
So,
if
selectors
unstable,
you
end
up
building
anything
that
you
build.
On
top
of,
it
word
inherit
that
instability.
A
So
how
do
you
go
about
identifying
selectors?
So
there
are
two
ways:
one
is
using
the
default
built
in
developer
tools
or
web
browsers.
They
could
also
use
some
browser
add-ons
like
like
editor,
less
and
sass
and
expert
helper,
so
order
of
preference.
So
if
you
look
at
the
Dom,
are
you
see
an
element
has
multiple
attributes
so
which
means
you
can
barrel
selectors
in
multiple
movies.
A
How
much
it's
always
a
good
practice
to
follow
a
certain
order
of
preference
when
it
comes
to
usage
of
these
attributes
to
select
elements,
so
the
first
in
the
list
is
ID,
so
IDs
always
the
best
option.
So
if
you
have
an
ID,
fun
element
go
ahead
and
use
that.
However,
we
say
that
all
elements
may
not
have
an
ID
attribute
and
that
key
is
look
for
something
which
is
unique
to
that
element.
For
example,
it
could
be
a
name
attribute
or
a
class
or
anything
else.
A
The
next
comes
CSS
selectors.
If
they
are
little
more
complex
than
just
identifying
it
using
a
single
attribute,
they
are
usually
a
combination
of
attributes
like
flowers,
name
or
maybe
even
some
hierarchy
of
the
elements
of
the
term
and
the
final
one
in
the
list
would
be
x-bar
selectors.
So
the
reason
why
we
have
placed
yes
s,
FX
bar,
is
something
that
I'll
be
explaining
in
the
next
slide,
so
CMS
next
by
the
form
of
the
form.
A
B
Captions
on
the
first
place-
yes,
it
is
ie
by
my
definition
is
unique.
It
should
be
a
single,
unique
ID
on
the
page.
So,
yes,
it
is
very
reliable,
but
in
my
opinion
we
should
have
here
number
zero,
where
you
specify
something
like.
If
you
know
this
element
has
some
attribute
ID
or
name
or
data
class,
whatever
else
which
is
used
in
your
application.
For
some
references,
let
say
this
is
your
login
form
include
username.
You
will
have
their
name
absolute
username
on
site.
That
is
much
better.
You
use
name
attribute.
B
You
know
functional
test
instead
of
ie,
just
because
in
magenta
cold,
when
form,
when
you
send
this
post
request
from
the
gentle,
your
array
will
be
built
using
this
name
attribute
and
inside
magenta
cold.
Everyone
will
rely
on
this
name
attribute
and
it's
not
very
likely
that
someone
won't
change.
This
attribute
name
username
to
something
else.
Just
because
developer
will
ask
you
to
change
magenta
application
code
directly
to
another
place.
B
A
A
good
point
also
to
look
at
as
you
try
to
look
at
the
Dom
of
Magento
of
opening
web
page.
You
always
see
ID
as
an
alphanumeric
character,
so
they're
kind
of
auto-generated
so
make
it
be
reliable.
In
certain
cases
they
will
just
look
at
IDs,
so
yeah.
So
it's
pretty
be
mindful
of
of
picking
elements
which,
which
may
not
end
up
changing
very
often
so
thinking
I.
Think
name
would
be
a
good
candy.
A
Right
so
our
CSS
verses
Express,
so
this
has
always
been
a
very
subjective
topic
of
discussion.
So
when
do
you
CSS
and
when
expert,
so
we
are
recommending
to
have
CSS
as
your
go-to
selector,
the
reason
being,
they
are
usually
faster
than
expired
yeah.
They
are
much
more
shorter
Phillip.
If
you
try
to
like
compare
the
CSS
was
next
part
for
an
element.
You
will
always
see
that
CSS
is
not
more
concise.
It's
easier
in
fact,
is
easier.
It's
also
heavily
used
in
development.
A
However,
in
case
of
certain
scenarios
that
can
only
accomplished
using
CSS
example
searching
text
moving
up
the
Dom,
you
could
always
rely
on
expert,
so
this
may
not
be
a
de
facto
standard
operates.
Always
so
in
case
we
are
trying
to
like
impose
the
more
usage
of
CSS
from
title
expert
and
music
spot
seldomly
only
when
it's
required.
A
A
A
So
avoid
being
too
specific,
so
a
good
selector
is
always
a
balance
between
strict
and
loose
matching
of
of
elements
in
the
Dom.
So
try
not
to
be
extremely
specific.
So
if
you
look
at
the
first
example,
you
have
like
too
many
too
many
information
on
there,
which
which
clearly
can
be
can
be
avoided.
You
don't
have
to
have
the
entire
hierarchy
of
elements
defined
as
a
part
of
your
selector.
A
So
at
the
same
time
don't
be
too
general,
it's
mainly
to
multiple
matching.
So
if
you
look
at
these
see,
they
could
end
up
with
multiple
matches
on
the
screen.
So
it's
always
a
good
practice
to
go
check
a
selector
in
the
console
and
see
if
you
don't
have
multiple
elements
being
matched
as
part
of
that,
so
here
don't
be
rude.
General
use
matching
is
also
not
preferred.
A
Avoid
hot
cold
Isis
so
very
often
when
we
are
working
with
elements
like
mainly
table
of
objects
like
table
or
type
an
ordered
list,
you
would
have.
You
would
have
ended
up.
No
I
define
zorn
elements
using
positions
so
in
neck
space
approach
may
not
be.
We
may
not
be
able
to
avoid
it
completely,
but
it's
always
go
to
parameterize
them
through
tests
instead
of
hard-coding
them.
So
this
will
increase
the
reusability
and
also
allows
you
the
flexibility
of
finding
elements,
positions.
B
B
So
we
have
two
two
grids
and
magenta
one
is
legacy
which
came
to
magenta
if
I'm
not
mistaken,
given
from
magenta
one
and
second
one
is
UI
UI
component
grid,
so
both
of
these
grids
located
under
proper
modules,
the
new
one
which
everyone
recommends
to
the
module
and
the
old
one
located
under
back-end
module.
So
let
me
show
you
the
example
of
selector
which
I
use
when
I
wanna
find
a
proper
role
in
this
grid
without
using
indices.
B
So
here
is
you
selectors
one
called
role
template
strict
and
one
and
second
one
is
a
lot
template.
So
what
this
selector
is
about,
they
starting
with
some
context,
so
we're
gonna,
look
at
table
and
not
in
full
a
lot
of
full
table,
but
we're
gonna
look
at
key
body
where
you
did
allocated
and
then
I'm
gonna
be
find
me.
Oh
I
need
why,
looking
that
some
column
has
text
and
I
will
specify
what
text
I'm
looking
for.
So
basically,
what
will
happen
if
I
need
to
and
in
product
greed,
concrete
product?
B
C
B
I
will
not
specify
open
Neve
product
number
seven,
because
because
I
know
that
is
seven,
what
I
will
do
I
will
use
this
selector
and
I
will
specify.
Instead
of
this
template,
I
will
specify
SKU
of
product,
and
it
doesn't
matter
in
which
position
your
product
located.
It
can
be
number
one
number,
two,
three
four
and
whatever
it
will
find.
The
proper
proper
role
in
my
grid
and
I
can
open
this
product.
I
can
I,
don't
know
check
what
is
located
in
this
or
whatever
action.
I
need
to
do.
B
I
have
this
selector
directed
to
proper
one.
So
please
use
those
selectors
column,
that's
something.
If
you
need
to
find
the
concrete
column
with
data,
you
can
read
those
selectors
and
understand
what
they
are
doing.
The
difference
between
our
templates,
tricked
and
gore
template
is
that
in
first
case,
when
it
says
pricked,
it
means
that
at
sound
TV
in
table
you
must
have
strict
spinning
to
fine.
B
So
if
you
are
searching
for
SKU,
it
is
better
to
use
a
template
string,
but
if
you
want
to
find
something,
you
are
not
sure
the
full
name
or
you
don't
know
it
or
maybe
sometimes
it
happens
when
in
data
grids,
you
have
TD
with
a
lot
of
spaces
before
some
data
with
some
formatting,
so
you
can
use
template
so
what
it
will
do.
It
will
check
that
at
some
TV
it
this
text
you
specifies
contains
and
this
that
fool
PD
has
this
tax.
But
some
piece
of
this
TV
contains
this
data.
B
B
So
please
use
those
make
sure
you
are
not
using
any
indices
in
your
tasks
because
sometimes
sometimes
it
have.
Sometimes
we
have
a
problem
when
we
run
those
tasks
on
CI
CD
and
sometimes
creates
million
of
products,
and
we
just
cannot
be
sure
in
which
in
which
position
your
product
will
be
located
or
any
any
other
entity.
The
believes,
use
them
and
another
good
practice
with
grids
and
selecting
proper
element
in
a
grid
filter
your
grid
before
you
trying
to
open
your
product
or
any
any
entity
in
this
grid,
so
just
type
in
the
filters.
B
A
Right
so
yes
avoid
Alex
and
avoid
hard-coding
and
Isis,
trying
to
paralyze
whenever
possible,
be
technology
agnostic.
So
we've
often
come
across
attributes
which
are
specific
to
the
underlying
UI
frameworks.
For
example,
data
bind
it's
it's
an
attribute
that
is
exposed
by
knockout
GS.
So
it's
always
a
good
practice
to
stay
clear
from
such
attributes,
which
are
which
are
specific
to
these
frameworks
because
of
you.
If
there's
any
refactoring
happening
on
the
front
end
and
if
the
Springboks
coving
or
your
selectors
would
end
up
breaking
so
instead
rely
on
generic.
A
To
using
anchors
so
a
lot
of
times,
you
may
not
have
unique
identifiers
for
elements
that
you
wanna,
you
want
to
think
from
the
HTML
page,
so
you
using
good
using
anchors,
would
be
a
good
approach
to
just
you
know,
to
build
out
your
selectors
in
a
hierarchical
format.
So,
for
example,
in
this
case
you
have
a
sign-in
button
and
the
sign
button
has
a
class
called
odd
thing,
called
log
in
and
say
if
you
have
multiple
matches
of
this
class
on
the
page,
so
this
may
not
be
a
good
identifier
to
to
use.
A
So
in
that
case
the
best
approach
would
be
to
go
just
one
level
up
in
the
Dom
and
look
for
an
anchor
parent
element
and
anchor
panel.
One
should
have
a
unique
identifier
in
this
case.
In
this
example,
you
have
an
ID
for
this
form
called
login
form.
So
that's
an
anchor
element
in
this
case.
Then
you
can
target
the
child
element
in
this
way.
A
So
you're
going
from
parent
to
child
in
this
case
the
next
example
would
be
the
reverse
say
you
need
to
identify
this
room
and
the
store
doesn't
have
any
attributes
linked
to
it.
So
what
we
could
do
is
try
looking
for
a
unique
internal
element,
or
maybe
a
child
anchor
element
in
this
case
would
be
a
span
you
are
trying
to
use
text,
contains
text,
Jerry,
Seinfeld
and
then
jump
to
the
parent
element
using
parent.
A
A
C
A
So
we
look
at
some
some
examples
of
many
poorly
written
elements
element
selectors
in
our
code,
so
we
look
at
this
example
here
from
the
admin
create
new
product
attribute
section.
So
if
you
look
at
look
at
this
section,
you
see
elements
that
extremely
lengthy
selectors.
So
we
will
try
and
see
if
there
is
a
way
to
optimize
them
and
try
and
refactor
them
with
just
the
required
attributes
that
would
be
needed
to
uniquely
identify
this
element.
A
B
A
So
you
look
at
this
term.
You'll
see
this
element
has
an
ID
as
we
talked
earlier
off.
This
is
an
alphanumeric
key.
It's
not
reliable!
To
use
this
ID
it
was.
It
may
end
up
changing
at
a
forum
at
some
point,
as
we
have
an
attribute
name
which
looks
like
it
could
be
used.
So
I'll
try
to
build
the
selector.
You
know
so
since,
since
we
don't
have
to
recognize
the
gentleman
using
text
or
anything,
I
would
rely
on
CSS
selector
to
do
it.
A
Right
so
in
this
case
you
will
see
there
are
two
matches
to
this
element,
so
you
would
have
to
go
a
level
up
to
see
we
can
narrow
down
to
a
government
that
we
are
looking
for.
So
we
look.
The
beer
parent
has
a
class
called
admin
control.
So
let
me
try
using
that
number
on
one
file:
selector
use
admin,
field,
control.
A
So
this
one
uses
the
next
path
and
I'm
just
using
a
CSS
selector
instead
and
it
looks
a
lot
more
shorter,
it's
more
readable
and
so
yeah.
So
whenever
you
don't
have
the
need
to
recognize
elements
by
text
or
mean
even
look
up
the
Dom
to
paired
elements,
it's
it's
a
good
practice
to
use
CSS
nature
of
its
path.
A
B
Yes,
this
one
I
usually
like
to
specify
context
for
all
elements,
if
that's
possible,
so
this
this
actually
called
the
lungs.
You
advance,
therefore,
the
properties
for
product
attribute-
and
this
is
kinda-
all
inform
on
a
page,
so
it
belongs.
The
this
field
belongs
to
the
whole
collapsible
top.
So
when
I'm
trying
to
build
a
selector
I'm
trying
to
do
first,
selector
for
all
collapsible
panel
and
then
inside
this
collapsible
panel
I
would
find
the
proper
element.
B
B
Because
sometimes
it
happens
when
you
have
under
same
cool
form
but
different
collapsible
panels.
You
can
have
same
input
with
the
same
name
attribute,
but
they
are
the
ones
two
different
entities
or
and
different
sections
whatever.
So
it
is
always
better
to
first
get
the
whole
form
selector,
and
then
you
get
the
input
section.
A
Let's
look
at
some
one
more
example
from
the
admin
product
creation
section.
So
again
here
you
see
this
huge
hierarchy
of
of
you
know
elements
listed
in
these
selectors,
so,
let's
see
beginning
refactor,
one
of
them
well
pH
optional.
They
then
I
have
to
go
back
to
the
free
generation
thing.
It
should
be
this
one.
A
A
A
So
this
is
giving
me
the
the
need,
a
button.
However,
it
may
not
be
it
looks
like
it
could.
This
could
end
up
matching
multiple
elements
at
some
point,
because
it's
it's
very
loosely
much
matching
the
needed
element,
so
I
would
try
to
add
some
more
information
to
this
to
make
sure
it's
a
little
more
robust.
A
A
A
A
A
Right
so
Venus
all
the
examples
that
we
saw.
These
are
ways
to
refactor
and
make
these
elements
little
more
concise
and
more
readable,
and
this
would
end
up
being
a
little
less
of
a
hassle
to
go
and
maintain
them
at
a
later
point
X.
So
yeah,
you
have
any
questions,
so
let
us
know
Alex.
You
have
to
do
everything
to
add.
C
B
A
It's
just
one
last
thing:
we
have
documentation
available
for
test
writing
best
practices
in
depth
talks,
so
we
have
a
topic
called
selectors
here,
trying
to
trade
up
whenever
you
have
the
time.
So,
if
you
scroll
down,
are
you
see
some
CSS
examples
here?
You
could
use
it
as
a
cheat
sheet
when
you're
trying
to
build
selectors.
It's
a
good
good
set
of
examples
and
usages
of
exported
CSS
this
listed
here,
but
some
do's
and
don'ts
for
examples
of
what
to
avoid
and
what
to
use
all
right.
Okay,
yeah.
B
B
If
you
want
to
do
make
it
case
insensitive,
you
can
google
expose
text
case
insensitive,
there's
a
lot
of
the
commentation
about
how
ex-boss
works
with
this,
so
you
can
check
it
there,
but
I
wouldn't
suggest
you
to
use
this
text
selector.
If
you
have
other
choices,
if
you
want
to
use,
if
you
want
to
check
something
use,
C
or
wait
for
text
or
any
SH,
we
have
but
try
to
avoid
using
text
as
much
as
possible.
Yeah.