[Applause]
I to be sure that something's going to
pour em like this and call that you have
done like done every single component
but that flow of the user I want you
feel at the end of the day my name is
Cameron palette and the CTO again sir
the new traditional marketing user
interface or order
so what I was going to use today some a
simple app where you can buy ticket for
the bank that gun is easy just leave
Department okay wait or do anything like
that so he's just a simple that was
pretty cool there is just have to type
an email right and you know simple
simple stuff if you want to check your
code of employment or if your home or
whatever fantasy coverage anyway here
you have the different practice so you
can take it out there so probably most
of you are developers four or more are
working on a product and finish many
many startups when the fire comes
thanks should I deploy we can expect to
be top ahead boy
I don't know I've been good to work or
knowledge to device that wait I need to
stressful it's not it's not just about
the park itself it's also about and you
don't really know if it's been to
worries you feel the pain you don't want
to do that so this is where the tests
come I'm sure that do you have sea ice
in cities because to touch the computer
this blows and you don't want that so
see is what they do basically just a in
the tests that you have programs
programs it would run the test and then
they continue Superman will deploy in
some way that's easy we're not going to
talk today exactly about that but the
previous part
so just to get you tested when you have
to do what you want to react with the
animal component but if you are working
more like in the lower levels solidity
or whatever that would be one component
one of those contracts integration is
when you have different of those
components of different parts of the
code and you are together you just send
parameter between it's one of them and
compare the money at the end is that
they were together and then you have an
end-to-end testing it's not that the
tests work with each other because you
have gone that already you made
integration testing it's more about the
flow for the user is more about the the
whole process is more like the behavior
of the user for example in a once you
buy the ticket as we're going to do
we'll have to do you have to test the
whole process from the beginning to the
end on the end and to normally world
where things get a little bit messy so
properties that we can find and even
more in situation occasion so we will
talk about them even more later is that
they take sometimes because it's not
it's not just the component the code
that you have to test you have to test
the net so well the network the
connection between the component
it is we think that you want to tell you
might have to make a subsection normally
give you that you would do that in in
local in apps or whatever if you want to
test it more like you know Ted Smith for
example in rinkeby
it will take some time
you cannot be point of failure because
when you do end-to-end you are testing
like function specifically but when you
want you sorry when you prepare the test
you need like unit testing you
[Music]
functions as ascetic features of the
code but when you do end-to-end testing
you don't test specifically the code you
test the behavior of the user
interaction so you don't really know
where the failure can be calm for
example you can have problems in the
database even though that you're testing
the HTML you can have problems in the
server problems of course students email
CSS there are many things that a
campaign on probably will you cannot
know exactly where the failure even
though you can get close and you'll stay
below probably know more or less were
seeing those but you don't really know
exactly where I think
one of the good things of the sentence
goes into the usual behavior so when you
test something like a function or a
specific part of the code you don't
really test what the user is going to do
and that's a problem because you're not
close to them they're not really Houston
they are bus they are get cheese and
that's one of the that's for many people
interesting test one of the things is
that I can take normally it sounds like
this student I have seen many people
talking about that one obviously and if
you go to the talks that you have about
thirty year in a Google developer talks
they also say that it's a bit flaky
anything come fails the wheel and so
there are some tricks and we'll talk
about them yeah sometimes if you don't
program if you don't know the
programming like quite specific to the
things that you want take a fail
so yeah they have some bad parts but
they have many new things as a
recommendation probably most of you know
about these which are rule 17 2010 I
mean basically that you probably should
do some 70% of unit testing 20% of
interesting
10% who lives with that should be like
this world applies as well to the
centralized applications there is no
well probably the more sister you have
with the protocol any number of testing
and also you will have formal education
well so so I recommend following this
rule so this is the beginning of it here
this is here's an old library that wraps
the API of crop and allows you to
control from in a simply way and it's
super cold is held by the Google Chrome
team was crummy hopefully like recently
like two months three months ago or
something that they release a beta for
controlling also articles what happens
you get you super close today it is
since we want to control the
personalized applications we need a
specific extensions like madam asked and
therefore to really remove from the
carries you can't speak indefinitely or
the debugging Firefox as well and
you know what we're going to do so first
we have the laptop we're going to
control today and this is a second demo
this one it's going to be super simple
beginning we just refer puppeteer we
want to get it runs a browser open the
new phase then just go to the page that
we exert all its moods media doesn't
matter then we wait for the happy pieces
with Mason stuff will rot in hell
we have the context
super simple to be doing the demos while
I'm talking I think is it as much
yeah we can see here in the video if I
qualify them or do whatever you need
because inside of this function animals
you later
you can cook enough to us in electronic
one and then which will do the thing
that you want
as I say as I said before there are some
times I've been faking so for example
the brochures don't are not the fastest
normal code they have they need some
time to make requests and process the
beta so there are some things that you
have to do in order to wait for those
things to value the personnel which
would be wasteful and then the second
step a new singer that you want I
recommend using different because the
crosser subjects are slower than others
so requests take some time some other
states this time also depends on the
system so I don't recommend using a
fixed time at all then you have wait for
selector this is the one I recommend
because it will wait some time that you
can define by a test or whatever to wait
for this kind of specificity of it you
know this is the one that I recommend to
use and you can also wait for a request
right and once the request to pay is
done
you can continue
or just drop you know whatever you're
doing with puppeteer because puppeteer
is not that it's not testing puppeteer
is a sin before instead no library
allows you to open a browser and control
it with the api's with so if you want to
test then you have to come back to the
basis if you don't know this is yet is
known is what the it's a normal library
that you use to test with but you can
use more card or commercial Python but
there are some others you can use any
testing library or unit test library
that you want it will work it will work
nicely with material and they are
constantly trying to manage this a lot
of them but we're going to do here is to
just integrate what we did before with
yet what we did before was has getting
missions that with it was in the title
imagine with a world who would magically
[Music]
one that we spent
this is the bit for all the demos all
the demos are on the github repo and you
just have to go to the bastard
this case is the demo free
so as you can see here we're not welcome
without the density so here we are not
so with the Rose we're not anything
that's where we got to fix in the in the
next thing but I just said you don't
really need the whole processor for
these once we get into the since I some
answers you will need to open the whole
browser and a song combination so
sometimes you might wanna know about
puppeteer I'm going to be very possible
this location has me later you can come
through the mid speed so unless these
page flows in lesson two seconds don't
come in nice or you can do testing about
the page speed for saying they use
assets that you have interface for
something you are not using more than
50% of your CSS you can test that in one
package so you can type in forms scrub
text get access to the console or
through the networks as you can see to
page 14 in they support a channel pretty
good you can recover some videos or any
generate speed search drag and drop and
tell that the drag and drop works which
you cannot do otherwise this
configuration says a sway so is if
you're learning too much data or two
months CSS or JavaScript or whatever you
can as well very much cheese you can
intercept the request and change the
data following fall or Auto reboots so
you can have always the same they all
follow the same base and there's another
this is quite important because well
learn some pages when you want some
things to be like quiet always the same
not
you can make an image of the pains half
a snapshot of the one that you want
it's what the triggers that you walk you
have and compare the peaks of that
compare them pixel X by pixel and you
consider that the CSS is saying that the
page is saying that's quite cool so
straight but become are assuming follow
the the CEO SEO service workers you got
peasant that's more complicated but you
can do that offline keep memories you
said oh hi Brendan and his missus that's
some of the cool stuff you can do but
there are homes and to see to show you
how simple it is to do that you just
have to it's not a CSS coverage so we'll
start checking all the data she says
when you stop it will eat you here they
wouldn't turn you are not with all the
data you know of the CSS coverage for
example almost are you using a comma
turn in North Houston and say mucho
Street
another cool thing is you can do this if
you are always doing those tests things
are getting out of them you can
intercept the request emily is
unstoppable
getting the stop messing with your
analytics in something
don't want to mess with you're going to
stop the request anyone testing while
service workers converse with context
this is very important if you want to
get into this but it won't work
sagging of a distant source applications
because you won't be able you will be
able to access the luggage but the if
you are going to use
[Music]
I wouldn't recommend using the proper
context it's super fast just what we saw
before
hezonia modes it just types and you'll
see
[Music]
well different one I think
okay you don't see it because it goes
because I'm saying to puppeteer to be
careless so you don't see it but another
chance that
so here
have commented
it's just this line when you say
headless false will open the whole
brochure for you
it takes a little bit long time
that's it for this test
now we'll go into
I think what we did that wasn't before
we just spicy about we need to type some
emails in a mailbox but the rest is EC
is send out good before this has the tip
the type of people that you have right
your press I recommend is you know way
selector for before we do that I think
that you want to type into there's one
more thing and elasticity for something
that we all need so that I recommend a
lot well there are more ways but I
recommend is using the hinterland
library for that I won't show it
Bristol is super simple
it can render when we are so this is
basically a library against the
chemicals and injected into a specific
but the opportunity waiting for youget
device
so did you see that we'll see an example
man is super simple just nvm spell
dump it here and you for the library you
open a new browser with it you have to
also and then we open and you could see
that you won or create a new one you can
see that you want which are perfectly
then you have the typical enzyme ask
approve and they will prove the society
what you have construction
[Music]
well the api's not for me users per
month but if you want to do something
specific and you don't have and you
don't have it in API you can always you
will say down you can always go to the
base of the material that I will put
that Manas province librarians and
control it like if it was a normal page
in a browser so even if it's not in the
API you still can use it it just will
take a very long time so we are in the
demo hopefully
yellow
[Music]
okay just need some time
we just type the whole thing probably
[Music]
so life famous yeah
[Music]
yeah
let's try another one
yeah baby yeah and therefore this is
important to you as well
he works is just immense intimate to
verify all the stuff but what I think it
looks he's just the type
[Music]
if I was
one ball where you try anything else
generally speaking
anyway Oh another code first
so all we do here is
dance to puppeteer with other dear we
can take the season one twist to the
narwhal anyone open a new page wait for
it to load
once it done well that's know before all
just are doing whatever you need so the
first thing that you have to do is a
prepare mask to be healthy
basically the bottom two and I saw
before at the beginning of the pub once
you click the button you will pop up a
venomous subsection thing and you will
get to confession and that's what it
does is there ways for what you do this
way and identification and I teach you
to come up this is quite simple
probably this is what is paying right
now
well they're not many it does make more
time and then ticket quality
successfully will appear once you can
switch our goods
when she turn off a noun that always
helps
and help you well anyone I just question
is that tool pretty actively maintained
like if there's a breaking change in
well they took pictures so you can
almost under I'm always taking the in
case there is something it's not
maintained my me
probably my innocent one team and in one
of those works yeah I mean and whatever
there's a failure they normally try it
because I don't want to - okay you can
definitely do that and they recommend
you to the other side
yeah you have to there and you want to
do that yeah yeah but what do you have
to do that is you absolutely same that
the library that's when you income you
have to do it in fires and that's
basically putting the men on suspension
for Firefox in a specific directory of
puppeteer Firefox is waiting for it this
word is looking for the go back when you
open the browser there's a directory
where the values or having stopped and
you what you have to do is to get the
code editor and then tell it to load it
and where it is so let's try it once
more
that one and one thing if you want to
use these on see I like to call CIA
whatever
the whole thing so such a ball and
everything so yeah it was only when I
say I was saying if you're not testing
it on if you want to use it on signals
yet for something what you have to do is
to each style the eggs virtual frame
memory typical thing is there are some
doctor containers ah all the things that
you need already so yes those people's
had to use those since you need the
whole prongs you open you need the X
which is basically the graphic
environment what you will do a separate
beautifully beautiful eggs that's it any
more questions about separate check yeah
Cyprus I mean Cyprus is fine for me we
had some problems in the beginning
because this in those too many things in
it opens too many things i it has
screenshots videos all the stuff you
have talking about Cyprus right yeah how
do you feel about 2008 right
every single one okay well that's more
like Java spree stuff and you can always
do promise all you can always do the
dang thing yeah Evan there's no like
JavaScript poem but did you manage to
work to dirac-delta tear or something
similar of Cyprus
right because I what you have to do is
to load the yeah it's not possible
because I mean I try and I allow you to
eject yeah you cannot love custom
extensions and but you can stop someone
who make it work but then it's not
staying there a long time so at the end
I I think it doesn't work but I was
discouraged maybe I haven't actually
tried because in the beginning we were
like thinking our Cyprus but when I saw
the puppet the heart all the things that
I needed it was like if he doesn't allow
you to open on a specific directory to
allow flag in a minimal suspension I
don't see how you can
does it happen and yeah I mean I just
wondering yeah actually I think that is
because even if the popliteal the back
with your ABI is not good enough for you
for your needs you can always change the
pace and you have two pages based where
you're testing and the meta masters page
it is not just the thing that the Box
you are you have also the page you can
always change the base from this one so
they were number one I knew everything I
[Music]
to trans and user author like using
another mobile wallet through was act
signed transactions or using contract
accounts doing something yeah so what
would either like what
salt depends when you will need balance
if you are using a wallet connect that
will be complicated
I guess you need to test in the form but
if you don't have any of those things on
you laughs if you have that come inside
there and you need a defense you know if
you can also intercept
you can read you can get all the
requests not from one text and any other
people so for instance you could try to
intercept that request that was working
right now and prevention
I hope these mocking at the response
yeah
[Applause]
you