►
Description
Testing, testing, and testing. Testing is the key to the success of building great solutions, but eventually, things might fail. Are you prepared for it?
These problems could be related to a new implementation which you did incorrectly, or something changed on the platform. Being prepared for these changes is very important. UI Testing provides you this capability, but it is not a click-click solution. You will require some tools and practices to get you started.
In this session, Elio will guide you through the process of setting up a UI testing process with Cypress, writing your first tests, and showing the results to your developers and testers. Are you interested in how UI testing can improve your quality? Come and check out this session.
Speaker: Elio Struyf (Valo Intranet) | @eliostruyf
Supporting materials:
• Cypress.io - https://www.cypress.io/
• Puppeteer - https://pptr.dev/
• UI Tests: https://www.eliostruyf.com/tags/ui-tests
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices (PnP) community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
If
you
want,
I
also
write
a
lot
of
blog
posts
on
my
personal
site,
which
is
illegalstraff.com.
You
can
find
me
on
twitter
and
there's
also
my
email
address.
So
if
you
need
me
just
ping
me
and
we
see
what
we
can
do
so
why
do
we
need
testing?
Because
this
session
is
all
about
ui
testing?
But
why
do
you
actually
need
testing?
You
need
testing
because
of
quality.
A
So
there
are
various
ways
of
testing
you
have
unit
testing.
You
have
ui
testing
manual,
testing
monkey
testing,
all
sorts
of
things.
Do
you
need
everything
yeah.
If
you
have
the
money?
Yes,
but
of
course
you
cannot
implement
all
at
once.
So
if
you
already
have
unit
tests,
a
ui
test
is
a
great
way
to
start,
but
why
actually
ui
test?
And
in
my
personal
preference
I
would,
though,
do
and
focus
on
ui
testing
in
the
first
place,
because
that
validates
your
solution
from
a
to
c
z.
A
Instead
of,
if
you
write
a
ui
test,
it
might
still
fail
in
the
ui.
Although
the
function
oneplus
one
returns
true,
it
doesn't
mean
that
two
is
going
to
be
rendered
inside
the
ui
and
if
that's
the
thing
that
it
needs
to
do,
then
your
ui
test
worked,
but
actually
your
ui
unit
has
to
work,
but
you
want
ui,
isn't
working
correctly.
So
here
you
see
another
example,
so
a
person
is
going
to
close
the
door
and,
what's
going
to
happen,
is
that
door
was
closed,
but
the
ui
is
different.
A
A
If
your
code
is
working,
and
it's
also
good
that
if
you
want
to
an
end
something
and
you're
going
to
run
your
unit
test
and
it
returns
a
certain
property
or
a
certain
value
that
isn't
correct
anymore,
then
you
know
that
your
unit
test
or
that
your
code
is
failing,
but
your
ui
tests
are
validating.
If
your
use
case
is
actually
working
from
a
to
z.
A
There
are
various
tools
that
you
can
be
used
and
I'm
not
going
to
tell
you
which
tool
to
use,
I
would
say,
hey
test
them
all
out,
because
all
are
great
and
some
of
them
are
maybe
even
better
in
your
solutions
or
in
your
company.
The
first
one
that
you
see
here
is
selenium.
Then
you
have
puppeteer
from
google
playwright
which
is
actually
coming
from
puppeteer.
A
That's
a
person
that
moved
from
google
to
microsoft
and
he
has
rewritten
everything
and
now
he
started
or,
and
he
renamed
it
to
playwright.
And
then
you
also
have
cyprus.
Cyprus
is
another
tool,
this
one
which
can
be
used
a
very
popular
library,
very
actively
maintained,
and
that's
also
my
preference
at
the
moment.
But
yet
again
it's
up
to
you.
A
My
demos
are
going
to
be
around
cyprus,
but
if
you
like,
puppeteer
playwright,
whatever
feel
free
to
use
whatever
you
want
just
know,
puppeteer
and
playwright
are
automation,
frameworks
for
your
browser,
so
you
can
run
automation
a
browser,
automation
on
it.
You
still
need
the
testing
framework.
For
that
I
would
recommend
chest,
which
is
a
really
good
testing
framework
and
if
you're
going
to
test
your
solutions,
there's
some
good
news
and
the
good
news
is
that
microsoft
finally
announced
that
there's
an
end
date
for
ie11.
A
A
That's
also
a
thing
to
consider,
because
selenium
is
a
little
bit
harder
to
implement
than,
for
instance,
puppeteer,
playwrights
or
cypress,
and
what
are
you
actually
going
to
test?
Is
it
a
public
website?
Is
it
sharepoint?
Is
it
microsoft
themes
all
these
things?
That
depends
because
some
tools
work
better
with
iframes,
for
instance
than
others.
A
So
the
first
demo
that
I'm
going
to
do
is
all
about
cyprus
and
what
it
is
and
how
you
can
use
it
if
you
never
used
cyprus
before
this
is
how
a
default
structure
looks
like.
So,
if
you
go
to
cypress,
you
find
an
integration
folder
inside
that
integration.
You
can
create
your
tests.
I
always
create
pyod
like
a
folder
name,
and
then
all
the
folders
or
the
feature
that
you
want
to
test
are
then
grouped
all
underneath
that
one
folder
so
in
here
a
very
simple
test.
A
So
this
is
a
new
test
suite
and
every
test
or
depending
on
how
you
want
to
do
it
starts
with
before
the
test
starts.
I
want
to
do
something
like,
for
instance,
if
I
want
to
start
my
test
case,
I
want
to
go
and
visit
that
page.
So
what
you
can
do
is
ci
dot
visit
and
then
page
url,
which
I
already
defined
at
the
top.
A
So
this
is
going
to
write
all
right,
open
the
sites
and
then
you
can
start
testing
it.
How
can
you
test
it
the
same
like
one
open
site
and
then
you
write
a
new
function
and
I
love
arrow
functions,
and
this
is
all
you
need
to
do
so,
let's
not
yet
write
a
test
case.
What
we
are
going
to
do
now
is
spin
up
my
tester,
so
it's
going
to
open
cyprus
and
in
a
second
you
see
a
popup
and
that
should
show
the
cypress
runner.
A
So
here
you
see
my
two
test
cases
from
ms
teams
and
from
pyod,
and
you
can
do
some
changes
in
the
settings.
But
here
you
have
something
interesting
here.
It
finds
all
the
browsers
that
are
currently
installed
on
your
environment
and,
of
course,
in
cicd.
You
don't
have
to
select
that
you
specify
that
with
a
command
which
one
it
needs
to
run.
But
here
you
can
just
specify.
A
Oh,
I
want
to
test
this
out
in
edge
and
now,
if
I'm
going
to
open
this
test
case,
it
opens
another
window
where
it's
going
to
show
my
test
runner
on
the
left
side.
It's
is
going
to
visit
this
page
and
then
on
the
right
side.
You
see
an
iframe
of
the
actual
loaded
site
and
the
cool
thing
about
it
is.
You
can
see
snapshots
of
what
it's
actually
doing
behind
the
scenes.
Also,
you
have
a
playground
where
you
can
say
hey.
A
Of
course,
this
is
not
yet
rocket
science.
So
what
you
can
also
do
is
you
can
write
a
second
test
which
is
going
to
look
for
a
navigation
item
where
the
title
is
equal
to
community.
It
checks
if
it
exists,
and
then
it's
going
to
click
it
then
the
next
one
is
it's
going
to
check
if
that
community
title
now
is
active
and
if
it's
active
then
or
for
the
active
community
title
and
if
it's
active,
that
means
that
we
navigate
to
that
particular
page.
A
So
if
we
are
going
to
save
again,
it's
going
to
restart
it's
going
to
this
community
site,
and
now
this
one
is
active.
So
community
is
now
active
if
I
would
say,
for
instance,
stickers
again
and
I
should
see
exist,
then
it
should
start
failing,
because
stickers
is
not
available
here.
You
can
see
that
it's
going
to
try
a
couple
of
times,
because
it
could
be
that
there's
some
async
logic
behind
the
scenes
happening
and
after
it
tried
for
a
couple
of
times.
A
A
A
So
you
can
retrieve
that
element
and
then
you
can
do
the
jquery
magic,
like
most
of
us
most
probably
were
used
to
in
the
past.
So
what
I'm
going
to
do
is
I'm
going
to
retrieve
it
to
retrieve
the
text
value
from
it,
which
is
zero
at
the
moment,
I'm
going
to
parse
it
to
an
end
so
that
it's
a
number
and
I'm
going
to
look
for
the
first
order
button.
The
first
order
button
that
should
be
on
this
page
this
one.
A
So
if
I
save
this
again
go
to
community
page,
it
finds
myself
a
button.
It
clicks
on
that
button
and
you
see
over
here
you
see
a
one
and
if
we
are
going
to
check
this
test
case
so
expects
that
there
is
an
element-
and
you
see
that
on
the
top
right,
then
it's
going
to
look
for
all
the
buttons
it
finds
all
the
buttons.
A
Then
it's
going
to
find
the
first
one
and
it's
going
to
click
on
the
first
one
and
then
at
the
end,
it's
going
to
check
okay,
if
once
clicked-
and
you
see
that
it's
still
zero.
So
it's
extremely
fast,
but
it's
going
to
wait
until
that
item
has
been
updated
to
one,
because
there
is
some
async
logic.
So
this
was
the
first
demo
about
cyprus
and
how
it
can
be
used
within
your
site
so
that
you
can
start
testing
out
your
solutions.
A
So
this
was
a
demo
of
cyprus,
so
this
gives
you
some
ideas
of
how
you
can
use
cyprus
inside
your
solutions.
Now
this
was
done
on
a
public
available
website,
so
everyone
can
go
to
it,
but
what
about
authentication
so
sharepoint?
Of
course
you
need
to
authenticate
yourself
first
before
you
can
actually
start
testing.
So
that's
a
particular
tool
that
you're
going
to
use
cannot
just
access,
sharepoint
or
can
adjust
access,
microsoft
teams,
so
you
first
have
to
do
the
authentication
rounds
before
you
can
actually
do
that
now.
How
does
it
work?
A
One
thing
to
notice?
Is
you
need
to
have
a
username
and
password?
Why?
Because
you're,
an
actual
user
that
needs
to
test
the
page?
You
cannot
make
use
of
a
client
id
and
a
secret
in
order
to
check
or
open
a
page.
So
that's
a
problem,
that's
why
you
need
to
have
a
username
and
password
that
way.
You
can
open
a
page
and
then
you
can
start
verifying
if
everything
works,
and
then
you
have
two
options
for
sharepoint.
A
For
instance,
you
can
use
the
dependency
like
node
sp
alt,
which
is
a
node
library
which
does
the
authentication
for
you,
and
then
you
have
an
authenticated
context
that
you
get
back
like
the
cookies
and
stuff
and
that's
what
you
pass
onwards
to
cyprus
or
another
option
is
to
go
through
the
whole
login
flow.
What
does
that
mean?
You
go
to
sharepoint
sharepoint
redirects
you
to
the
login
page
of
microsoft
and
then
you're
going
to
start
to
log
in
with
first
your
username
click
on
the
next
button.
A
Then
your
password
click
on
the
next
button
and
and
so
on
and
so
on.
At
the
end
of
the
flow
you
end
up
on
sharepoint
as
well,
and
then
you
can
grab
all
the
cookies
from
sharepoint
and
do
the
same
thing.
So
in
both
of
these
test
cases
or
in
both
of
these
options,
you
need
to
have
the
cookies,
because
you
need
to
have
your
fedora
token
and
so
on.
Otherwise
you
cannot
open
another
page
anymore
or
you
have
to
go
to
the
full
authentication
lifecycle
again.
So
let's
do
a
demo
about
this.
A
Only
about
authentication
the
next
demo
is
about
authentication.
So
authentication
for
sharepoint,
for
instance,
is
what
you
can
see
here
so
in
the
before
I'm
using
a
custom
visit
sp
method
which
is
going
to
do
the
authentication
for
me
and
then
starting
to
visit
sharepoint.
So
cyprus
allows
you
to
extend
it,
so
you
can
add
your
own
commands
or
plugins
very
easily,
all
written
in
typescript
or
in
javascript.
So
here
you
can
see,
cyprus
command
adds
visit
sp.
So
I'm
going
to
retrieve
my
config.
A
So
that's
coming
from
the
cyprus.json
file
and
there
I'm
going
to
retrieve
my
username
and
passwords
and
the
page
url.
That
implies
it
files
in
from
within
my
test,
then
I'm
going
to
run
the
sharepoint
alt
and
this
is
a
plugin.
So
a
plugin
runs
on
the
node
engine.
So
what
is
going
to
do
is
from
the
moment
cyprus
starts
up
and
the
test
is
going
to
run.
A
A
So
if
I'm
going
to
run
this
yet
again,
it's
going
to
run
or
start
up
the
test
and
it's
going
to
log
in
and
then
you
see
that
it's
going
to
go
to
the
conference.
There
are
some
post
abort
calls
which
is
basically
blocked
by
my
environment,
but
you
see
now
it's
complete
and
we
can.
We
are
actually
on
sharepoint.
A
So
authentication
is
something
you
have
to
take
care
of
yourself.
Now
there
are
a
couple
of
other
challenges
if
you're
thinking
about
end-to-end
testing
your
solutions.
First
of
all,
is
a
base
life
cycle,
we're
not
working
with
static
sites
anymore.
There
are
a
lot
more
dynamic
elements
on
the
page
and
these
dynamic
elements
are
coming
from
react,
angler
and
so
on.
A
So
that
means
that
what
is
loaded
could
be
different
in
a
couple
of
seconds,
so
the
tool
should
also
be
aware
of
that,
because
the
tool
should
actually
wait
for
an
element
to
become
available
or
when
it
navigates
it
needs
to
wait
for
that.
Some
tools
do
it
differently,
like
cyprus
is
really
nice,
you
just
specify
gets
the
element
and
it
will
wait
until
that
element
becomes
available
with
the
retry
mechanism,
authentication
authorization
we
already
discussed.
How
are
you
going
to
interact
with
your
browser?
A
A
Also,
what's
the
effort
to
setting
up
ci
cd
how
to
run
these
tests
on
mobile
views?
Do
you
actually
need
to
test
it
on
a
mobile?
This
is
for
sharepoint
if
share.
If
you
want
to
test
it
for
sharepoint
on
a
mobile
device,
that's
going
to
work,
but
what's
with
teams,
teams
cannot
be
tested
on
mobile
or
not
with
cypress,
for
instance
or
playwright.
A
Then
you
need
to
test
it
with
another
testing
tool
which
is
specifically
created
for
mobile.
How
are
you
going
to
target
elements
and
iframe
interaction,
so
selectors?
That's
how
you're
going
to
target
elements
parker?
What
you
can
see
here,
so
the
class
parker
is
not
the
same
as
the
class
parker
underscore
8,
f
and
so
on.
That's
the
suffix
that
spfx
is
adding
towards
it.
A
So
the
parker
parts,
that's
what
you
are
going
to
write,
but
sharepoint
framework
is
going
to
create
that
last
suffix
to
create
and
to
isolate
the
classes
and
the
styles
for
that
particular
component,
which
is
great,
but
your
designers
don't
know
that
class,
so
right
and
the
testers.
Neither
so
writing
your
test
cases
based
on
on
this
one
is
going
to
be
harder.
A
So
a
solution
for
that
is
working
with
data
attributes.
If
you're
working
with
the
data
attribute,
you
can
just
use
data
dash
and
then
ui
test
or
test
ui
cypress
has
a
couple
of
default
ones:
data
test
id
or
data
tests,
but
for
instance,
here
there
is
data,
ui
test
id
being
used,
and
then
that
is
going
to
stay
the
same,
no
matter
what
and
then
you
make
sure
that
it
stays
the
same.
A
Even
sharepoint
does
it
behind
the
scenes.
So
I
don't
know
if
you
ever
seen
it,
but
there's
a
data,
automation
id
that
data
automation
id
that's
what
sharepoint
internally
uses
for
automated
ui
tests,
so
I
won't
recommend
to
use
the
same
one,
because
that
could
be
giving
some
issues.
If
you
have
two
side
headers
one
from
you,
one
from
sharepoint,
which
one
do
you
need
to
take
so
create
your
own
one
but
be
sure
to
apply
it
so
that
you
can
use
it
in
your
own
tests.
So
next
thing
is
the
last
demo.
A
Teams
for
this
demo,
I
prepared
a
small
web
part
which
is
just
going
to
visualize
some
images.
So
here
you
see
these
two
little
guys.
If
I
modify
the
page
then
modify
the
web
parts,
I
can
say
hey,
I
want
to
see
only
girls
or
I
want
to
see
all
and
then
it's
going
to
show
me
four
people
and
let's
do
it
back
on
boy.
So
this
is
what
the
wrapper
does
now
behind
the
scenes.
I
have
my
ui
test
and
my
ui
test
looks
as
follows.
A
First
of
all,
when
I
load
the
page,
it's
going
to
check
if
the
page
command
bar
edit
button
is
there.
So
that's
for
editing
the
page,
so
I
created
also
a
little
helper
class
which
is
automatically
going
to
integrate
that
data
automation
id
from
sharepoint
when
it
exists,
it's
going
to
click
on
it
that
puts
the
page
inside
edit
modes.
A
Then
the
next
thing
is
we
are
going
to
edit
the
web
part
and
for
editing
the
web
parts.
You
also
need
to
go
to
that
particular
zone
and
then
click
on
the
web
part
there's
force.
Sometimes
that
zone
is
not
available,
because
it's
hidden
and
cyprus
will
only
click
or
only
interact
with
items
that
are
visible.
So
if
it's
hidden,
then
you
can
force
it
to
still
click
on
it
so
that
it
becomes
visible
and
then
you're
going
to
find
the
configure
button
of
the
web
part
and
you're
going
to
click
on
it.
A
So
that
means
that
the
property
pane
panel
should
become
visible
and
inside
the
property
pane
panel.
What
I
then
did
before
is
to
change
my
property,
and
this
is
what
you
can
do
as
well
over
here.
So
I'm
going
to
specify
that
my
image
type
is
boy
and
I'm
going
to
retrieve
the
input
fields,
I'm
going
to
type
in
the
input
boy
and
you
see
type
because
it's
actually
typing
what
your
browser
is
doing
and
then
you're
going
to
check
if
the
elements
have
been
updated.
A
If
they
are
too
so
you
can
also-
or
I
can
also
say-
hey-
I'm
going
to
do
four
in
the
next
one
and
because
all
should
retrieve
four
and
then
I'm
going
to
save
the
page.
So
if
we
are
going
to
go
to
cyprus
and
we
are
going
to
run
the
webpart
test,
what
we
should
see
now
is
that
it's
going
to
login
into
sharepoint,
it's
opening
the
page,
it's
editing
the
page.
A
That's
what
you
see
over
here
right
now,
it's
going
to
look
for
that
element
for
configuring,
the
web
parts
it's
going
to
type
boy,
but
boy
was
already
there
and
now,
if
I'm
going
to
type
all
and
it's
going
to
save
and
what
it
found
here,
was
it
needed
to
find
four
elements
and
it
found
four
images.
So
this
is
what
you
can
do
with
your
solutions.
Solutions
in
sharepoint,
as
mentioned
teams,
is
a
special
one.
A
Teams
is
going
to
work
or
in
teams
you're
going
to
work
with
the
login.microsoft.com
page,
because
there's
no
dependency
for
logging
in
and,
if
you're
going
to
use
a
login.microsoft.com
page,
you
cannot
actually
use
it
within
cypress,
because
it's
using
an
iframe
and
the
login
page
is
blocking
iframes
for
being
used.
So
that's
a
way
or
that
way
we
need
to
bypass
that,
and
we
do
this
or
we
can
do
this
with
the
alt
teams
methods.
A
A
So
behind
the
scenes
we
are
going
to
use
playwrights
with
chromium
and
we
are
going
to
log
in
there.
So
we
are
going
to
log
in
with
a
username
and
password.
So
we
are
going
to
go
through
the
full
authentication
flow
and
at
the
end
of
the
cycle,
we
are
going
to
return
the
cookies
and
the
local
storage
values.
A
And
that's
what
we
retrieve
over
here
in
the
authentication
part
and
at
the
end
we
can,
when
we
have
the
cookies
and
the
local
storage
we
can
set
that
to
cyprus
so
that
cyprus
can
start
using
that
during
your
tests
at
the
top.
There
was
also
a
special
one
here.
We
override
teams
from
checking
if
it's
running
in
an
iframe,
because
yet
again
teams
is
also
going
to
check
if
it
runs
in
an
iframe
and
if
it
does
it's
going
to
block
that.
So
that's
what
we
are
going
to
do.
A
So,
first,
when
you
do
the
authentication
and
the
authentication
is
done,
we
can
start
visiting
the
teams
page.
You
will
end
up
inside
teams
and
teams
will
have
a
news
message
footer
and
that's
where
you
can
type
in
your
message
and
that's
what
we
are
going
to
looking
for
look
for.
We
are
going
to
click
on
it
and
then
we
can
start
writing
our
things
in
it.
A
So
if
I'm
ready
and
I'm
going
to
run
this
first
of
all,
there's
an
authentication
flow,
that's
happening
behind
the
scenes
and
I
specified
the
headless
part
to
false
so
that
you
can
actually
see
this.
But
normally
you
won't
notice
this
in
chrome,
so
here
you're
logging
in
I'm
taking
all
the
cookies
and
I'm
setting
that
to
the
environment.
Now
it's
going
to
do
this
again
because
my
base
url
was
still
set
to
sharepoint
and
that's
why?
A
So
these
were
some
tests
inside
sharepoint
and
inside
teams.
If
you're
looking
for
resources
feel
free
to
go
to
my
blog
I've
written
a
couple
of
things
about
cyprus
and
ui
testing,
so
that
was
it.
I
hope
that
you
learned
something
from
it.
I
hope
that
you're
thinking
about
going
to
do
some
ui
testing,
so
thank
you
very
much
for
attending
my
session
at
the
pmp
virtual
conference
feel
free
to
send
us
feedback,
always
appreciate
it
and
have
a
nice
day.
Bye,
bye,.