00:00:13.160
okay so um welcome to my last
00:00:17.430
presentation and maybe as an
00:00:19.560
introduction does somebody already have
00:00:23.039
some experience with pursuit at i/o or
00:00:25.650
even used it already yes exactly
00:00:34.219
if you haven't heard about it yet then I
00:00:36.989
will introduce it to you so yes as you
00:00:40.590
already said Percy is basically contains
00:00:44.309
visual integration so it's like a CI but
00:00:47.579
for all the UI and basically if you
00:00:52.170
select it for your CSS and what it does
00:00:57.809
is basically so it's like I said tool
00:01:02.460
for solving layout issues and it
00:01:05.640
basically just takes screenshots during
00:01:08.130
your future tests and then provides an
00:01:11.790
interface to compare these screenshots
00:01:14.939
to screenshots which were taken
00:01:17.720
previously or which are in the
00:01:20.580
development environment and if your if
00:01:26.220
everything is good you can prove the
00:01:28.890
changes then and if you see that there's
00:01:31.259
something wrong you obviously can reject
00:01:35.670
and redo it and what's also nice
00:01:38.759
there's get up integration so you don't
00:01:42.899
have to have like a separate service
00:01:46.799
which is like in a different environment
00:01:50.700
from your already from your current
00:01:54.240
programming environment
00:01:57.040
so I think the easiest way to show you
00:02:03.250
purse is just to do a demo so I have
00:02:06.940
this application it's a really basic
00:02:10.020
race application it's just a list of
00:02:13.840
pretty much every University in this
00:02:16.230
world you can and you can search and
00:02:21.540
when you click on them you get a little
00:02:25.600
detail page with the name and you can
00:02:27.940
open their website or you can open it in
00:02:30.520
Google Maps and I've received a request
00:02:34.900
from the client he wants another button
00:02:38.620
to open maybe like stats page or another
00:02:46.380
details page so I'm going to implement
00:02:49.030
this button right now this is the code
00:02:53.050
for it or the view for it it's really
00:02:56.470
simple it's just a bootstrap card with
00:02:59.080
some columns and here are those two
00:03:02.620
links and now I'm going to open this
00:03:07.090
right is linked quickly so it's
00:03:09.700
basically like all the other ones and if
00:03:13.930
I'm going to refresh it there we have
00:03:16.900
our button which doesn't do a lot but
00:03:20.019
it's there and ticket is done so I'm
00:03:23.920
going it's nice if everything goes so
00:03:28.120
fast
00:03:29.010
now I'm going to push it commit it and
00:03:33.900
make a pull request on get up
00:03:36.989
luckily I already did this yeah I really
00:03:42.850
fast developer and as you can see I have
00:03:47.140
a normal CI which checks unit tests and
00:03:51.070
also does some feature tests and here I
00:03:53.380
also have the purse integration and my
00:03:56.769
unit test passed and my feature tests
00:03:59.170
obviously also paused but I have some
00:04:03.100
visual differences which I should have a
00:04:06.070
look at so if I press on deep
00:04:09.270
it redirects me to Percy and here I can
00:04:13.090
see a screenshot which was taken from
00:04:16.600
the development environment and a
00:04:19.269
screenshot which is my new change and as
00:04:23.800
I can see it the differences is that
00:04:27.340
there's a new button so yes it's good I
00:04:30.850
wanted to have this and there's a
00:04:33.550
difference in the ID because of the
00:04:35.410
randomness of my tests I also have a
00:04:38.680
second difference so it's just the index
00:04:43.150
list and there is also the difference
00:04:44.979
because of the randomness but what
00:04:47.650
what's really nice about Percy that's
00:04:50.560
just screenshot on desktop but it also
00:04:53.500
takes screenshots on mobile and here we
00:04:56.860
can really see that one touch of Percy
00:04:58.900
so as you can see it broke my layer
00:05:03.040
completely and I didn't really notice it
00:05:07.060
because I only developed on desktop and
00:05:10.120
didn't check the mobile page and it's
00:05:15.850
also clearly highlighted there's a
00:05:18.190
difference so um if this would be a real
00:05:22.360
project I would maybe not to the the
00:05:26.710
links with a bootstrap column system
00:05:30.000
yeah so you now may ask yourself how do
00:05:40.030
i integrate person to my existing
00:05:42.310
projects it's very straightforward you
00:05:45.610
have to register at first it'll tell you
00:05:48.280
and then there's a gem called percy
00:05:50.590
capybara which you will have to add to
00:05:52.960
your gem file and there's also a little
00:05:56.140
bit of setup you will have to do before
00:05:58.810
it so in your spec helper just configure
00:06:01.930
your suite to initialize the build
00:06:04.950
before the test run and also after tests
00:06:10.240
run finalize the build and send it to
00:06:13.090
percy at i/o and in your tests itself
00:06:17.260
you can just take a snapshot
00:06:19.570
by calling Persie capybara that snapshot
00:06:22.260
then you can also specify a name so you
00:06:26.170
know which part of the application it
00:06:29.710
represents and there's also bit more
00:06:34.530
configuration you can do like specifying
00:06:39.580
default width for your screenshots so
00:06:42.300
here I made an example with all the
00:06:45.580
bootstrap classes so it could have like
00:06:48.370
this green short for X or small devices
00:06:50.230
a small medium large and extra-large
00:06:53.460
doing screens and that's pretty much it
00:06:58.030
you don't have to do anything further it
00:07:03.420
automatically recognizes when you do a
00:07:05.770
pull request and or when you just commit
00:07:08.470
to your develop branch so maybe to make
00:07:14.080
it a bit more substantial I'm going to
00:07:16.870
introduce you to a project M of our
00:07:20.320
company it's called uncle tracker and
00:07:22.510
here we've introduced Percy and a while
00:07:25.900
ago so this is a form which got changed
00:07:32.770
in a pull request and here Percy clearly
00:07:36.040
stated the difference between between
00:07:40.900
the current application and the feature
00:07:44.200
which would have been added but there's
00:07:48.040
also a second application which may be a
00:07:50.590
bit more interesting
00:07:52.560
it's a application to choose your your
00:07:57.730
employer or which employee you would
00:08:00.370
like to work for and you have a cart and
00:08:04.000
a no and yes button to the ref left them
00:08:07.750
to the right and you can swipe this cart
00:08:09.490
onto themselves and this is also a
00:08:12.970
comparison which was made in person at
00:08:15.220
i/o and you probably would think that
00:08:18.550
these look quite similar so now Percy I
00:08:21.730
wouldn't notice that there's actually a
00:08:24.070
difference between those pictures
00:08:28.990
can you find it so with Percy I can
00:08:37.370
clearly see that I forgot or I
00:08:39.709
mistakenly removed the patent clause in
00:08:43.420
or in both buttons and I could fix them
00:08:51.760
yes so that's that's really Han really
00:08:57.860
useful because I wouldn't have noticed
00:09:00.500
it without Percy and also if you have
00:09:03.380
like an absolute container or something
00:09:05.180
like this and it overlays something
00:09:08.120
future tests wouldn't really notice it
00:09:10.040
because they just find element and click
00:09:13.220
on it maybe or to whatever you said and
00:09:16.730
don't really recognize it there's
00:09:19.130
actually something overlaying you're
00:09:22.339
testing your test button but with this
00:09:26.120
you can obviously notice it yeah and I
00:09:32.000
would also just highlight again um it's
00:09:36.410
integrated into pull requests so you
00:09:38.870
really have to approve all visual
00:09:41.149
changes that you can be sure that
00:09:44.060
everything looks fine when you do to the
00:09:46.790
customer yeah so that's it I provided
00:09:51.829
the percy io link and also my demo you
00:09:56.899
can go and check it out if you want um
00:10:00.730
is there any question yes it only
00:10:13.430
compare
00:10:14.150
screen shot so you actually make a
00:10:16.520
screenshot of the rendered underthe site
00:10:20.480
which you did with capybara
00:10:54.250
you I think you could just think we it
00:11:09.890
makes really sense to just test like the
00:11:14.090
the critical part of user takes and I
00:11:17.240
mean if there's padding difference in
00:11:21.020
your static page like the text is a
00:11:24.890
little bit lower than before um you
00:11:28.190
really have to think of where it makes
00:11:30.350
sense to to correct this so I think it's
00:11:34.580
really versed like in this example um
00:11:38.690
this is the main functionality of the
00:11:40.490
whole app to just swipe cards and you
00:11:42.950
really want to get sure that it looks
00:11:44.540
fine on each device and but there's also
00:11:49.480
a second page like an administrative
00:11:53.870
page which only gets used by the
00:11:55.760
customer itself and if he really likes
00:11:59.210
visual or looking great King
00:12:03.200
applications then he could introduce it
00:12:05.830
but I think it doesn't make sense for
00:12:08.830
something that's not really critical to
00:12:11.690
the application itself as it also
00:12:13.520
introduces a bit of overhead but I mean
00:12:17.060
it also runs on the CI so it only um
00:12:20.620
extends your running time on the CI and
00:12:24.170
not your development workflow limits
00:12:27.170
only just one line you have to insert
00:12:29.870
and you're done so
00:12:41.690
yeah thank you and not yet the only
00:12:49.410
downside I can think of is that it's
00:12:52.200
pretty expensive especially for smaller
00:12:55.950
companies but if you compare it to maybe
00:13:00.590
fixing a whole application which was
00:13:05.160
broken by CSS I think it's worth the
00:13:09.300
price so um yeah it's also quite false
00:13:29.300
yes but maybe my test is just quite
00:13:34.080
pretty because I use it like this it
00:13:38.370
would make more sense to just make a
00:13:41.010
static list of universities with static
00:13:44.550
name but then when you compare it Percy
00:13:47.130
also doesn't ask you to call to review
00:13:51.120
the visual change because it detected no
00:13:54.270
um no difference it only asks you for
00:13:57.440
detected differences
00:15:05.599
okay but preparing my demo application
00:15:08.839
everything actually worked fine so first
00:15:11.939
quite first I mean this one
00:15:44.619
and let's try so this one's approved yes
00:15:50.059
okay so it's a set but they also think
00:16:14.660
there's a really dangerous button on top
00:16:17.299
here so it's gel it says just approve
00:16:20.029
all even if you have like 20 differences
00:16:22.399
just I mean if you have a really big
00:16:24.559
application and 20 screens and you have
00:16:27.259
and you just yes I maybe maybe it just
00:16:31.489
adapted to fuller height or something
00:16:33.559
like this and then you would have 20
00:16:35.389
screenshots you would have to review and
00:16:37.309
this can get obviously quite annoying so
00:16:41.709
it's yes it can be dangerous but at
00:16:45.769
least it's better than having nothing
00:16:55.179
like you already said it doesn't and
00:17:04.549
that's it
00:17:05.750
thank you
