I'm a developer, advocated aptly tools, and we're gonna talk about visual validation today.

But first, we're gonna play a little game off.

Who done it clearly?

Somebody in this room murdered Lord Smythe, who at precisely 3 34 this afternoon was brutally bludgeoned to death with a blunt instrument.

I want each of you to tell me your whereabouts.

At precisely the time that this dastardly deed took place, I was polishing the brass in the master bedroom.

I was buttering his lordship's scones below stairs.

But I was planting my petunias in the potting shed.

Constable, arrest later smiles.

But But how did you know, madam?

As any horticulturist will tell you, one does not plant petunias until May is out.

Take her away.

It's just a matter of observation.

The real question is how observant were you?

What?

Clearly, somebody in this room murdered Lord smile who at precisely 3 34 this afternoon was brutally bludgeoned to death with a blunt instrument.

I want each of you to tell me your whereabouts.

On precisely the time that this dastardly deed took place, I was polishing the brass in the master.

I was buttering his lordship's scones below stairs.

But I was planting my petunias in the potting shed.

Constable, arrest Lady Smythe.

I can't believe you all let a dead man get up and walk away.

But actually, I can't believe it, because we all suffer from what's called in intentional blind.

This is where you're so focused on a specific task that you miss other things new and unexpected, that might come into your vision.

And this happens a lot when we're developing our code and we do these little quick.

I was about to curse these little quick, uh, half effort tests on, and we missed a lot of what else is going on in our application, right?

So how do we sell for this?

We usually try to automate these tests.

It's not relying on us.

And when we automate the test and we're making sure that every time that test runs has taken the exact same steps and it is verifying the exact same things and that sounds really good and predictable, right?

What if I told you you were actually coding in, but an intentional blindness was all scripts a worse than we are Onley looking at the being that we told it to look at.

And it misses anything that we didn't specifically think of to code in.

For example, what about if you're text is on the screen and you want to verify that this text is there, right?

So you write some cold and it verifies that it's there.

But what if that text was bleeding off the edge of the page?

You see this all the time on mobile views?

What about it?

That text was covered by another element, so your user couldn't even see it.

What about if it was the same color as the background and again your user couldn't see?

All of these things will be missed with our traditional assertions.

And this isn't one off type things that happens all the time.

Now that I'm aware of visual testing, I see these visual bugs everywhere and some of your abs.

Here's an example.

This is in a world.

This is the world's second largest cinema chain.

They had a visual bug on the page that actually, if you would like to store your credit card information now, if you saw this in your app, you probably would wouldn't think It was a big bug, you know?

But how many of you in here would actually Who are your credit card?

And for me?

Exactly.

No one.

No hands worry.

The reason for that is because you look at this and you think if they didn't even see this, I'm not convinced that they're testing the back end.

And that's something.

Actually holds my private data.

Right.

So engagement here would go really low.

Now, your test, as written today will probably pay because it is looking Thio.

See if those labels air There's already a little buttons or there it can click things functionally.

This works, right?

So this gives the pool it and some production.

And you miss this type of thing.

This is open table.

How many people use open table, Make reservations?

Yes, I was going to Riley, and they're famous for their barbecue.

So I wanted to make a dinner reservation at my favorite place there with some of my friends.

Seven people, this reservation.

So I went to click a time that I wanted in this motel popped up.

I was a little bit confused at first because there was nothing in the center there.

I didn't know what I was supposed to be doing.

As I looked around, I noticed in the upper right corner those two buttons say select.

So I scratch my head a bit.

Okay.

What are these buttons?

One wire there.

Two of them.

To where?

They're not a line in three.

What am I selected again?

And so I did what any of you would do.

I opened Chrome Dev tools, began to dig around and figure out what were these buttons.

And actually, the labels were there.

They were just as far away from the buttons as possible Again.

We think that these people don't test they bear cold, but they might be tested it.

The tests were passed in this case because the tests are looking in the dom.

Right.

And all of this stuff is there.

It's present, functional, but ah, user cannot use this right.

And most of their users are not engineers who know about chrome depth tools and are gonna dig in the dom.

So this is money that's being lost.

These aren't one offs haven't so your favorite tech companies as well Amazon Someone not only wants to purchase something but they want to multiply the number of items of the amount of money they're going to spin.

And you have this cool feet book Facebook on their marketplace.

Paige, I'm going shopping.

I want to buy things.

I cannot even read the text again.

Your tests?

Yeah.

Texas Present Instagram.

This is my favorite one.

The reason this is my favorite one is because this is sponsored content.

Someone paid Instagram the show, their poles to people.

And it looks like this again.

Your test is this Takes President.

Yes, yes, yes.

And deploy Twitter.

All of the tweets are there the Texas present?

We can't read this.

This is very annoying.

The great news is that we don't have to live like this.

Visual testing can also be automated.

Now, what is visual testing?

It's where you take a screenshot of your application in the state that everything is perfect and as you want it.

And then on any regression runs it takes another screen shot and compares the two there.

Any differences?

It alerts you Now.

Visual testing is not something that it's very new.

It's been around for a while, but we, as an industry, were using some antiquated methods, but we were comparing them pixel by pixel, in making sure that the picture was exactly the same.

The problem with this is that pixel comparison is really flaky, not really designed for testing purposes.

For example, the top picture is a picture of my app.

One is in its perfect state.

The second picture is a regression run.

The regression run failed token, See walk.

The search button is bold here in the second picture, but not the first.

Well, if you put your mouth over the button, it bolds.

So if you were running this front and test and it just so happened that the mouse landed right there when the screen shot was taken.

Now you have a field field it another one who can't see why this one field her, sir, Though after the word bad, the cursor is solid in the first picture, but not in the sex, because cursors blank right?

So if you happen to take the picture in the split second, that is not the same then that feels so.

This became very, very annoying for people.

Capitals came out with ah Wei to do a visual validation that uses machine learning to be ableto only catch of the things that we would care about as human beings.

Here's another little spot.

The difference game.

You all don't get to play because you let the dead man walk away in the first game.

So I did it for you.

I ran this through the pics of the picks when I ran it through the Apple Tools bill with pictures of pixel.

You notice here pretty much everything is highlighted.

Very, very sensitive.

Even so, White space using this.

I can't really tell exactly what's different in those pictures versus using it with tablets, tools, spots, the things we would as human beings.

Okay, so let's add this to an existing test base.

First, let me show you the application that we're gonna be testing is a single page application, and it has eight of my favorite books on testing.

And the way that this works give us some more realistic.

The way that this works is you just type in one of the book titles and a filters that, for example, if I put in test and I see all the books that have test this part of the title.

That's it.

Okay.

And let's look at the test now.

So we have to test here one that is looking for a specific book with the exact title Agile testing.

So we searched for that.

We make sure that there's only one book that's returned and that it is the right title.

And then the second test, this one is looking for multiple one.

So the one I showed you in the example you put in the word test.

Here are the books that we expect to come back.

We validate that all of them are actually visible.

And the Arthur right titles.

Hey, so let's run this test.

This big one.

I'm using Cyprus here.

Anybody who's Cyprus?

Yeah, the jealousy that announced me.

So they just released 4.0, yesterday.

And now cross browser support.

I know.

All right, so we've run this test and this is past beautiful.

Everything is lovely.

Okay, let's switch back toe application mode.

And let's say we want to like jazz this page up a bit.

You know, we want a little bouncy effect or something.

So we had a little CSS here, and we have tests, so we feel very confident, and we go ahead and commit this right.

So we run this little test again and let's see Oh, no, What won the line of CSS?

I have flipped this application on its head, but the test is still passing.

Why is this?

Because we said, make sure there are five books are there five books?

Check.

Make sure that those five books are these titles.

That's true, right?

It's missing these other things that in intentional blindness.

So let's add visual testing to see if we can catch these kinds of bloods that our traditional frameworks would miss.

Okay, so it's an ad visual testing.

The first command is toe open your eye.

Beautiful.

Write poetry.

So we say, cy dot eyes open.

All right, And then after the test, let's go ahead and make a after each and in here, we're going to want to close our eyes when we're done.

Very intuitive.

All right.

Okay.

Now, within the test itself, let's go ahead and add some visual testing here, so we're going to see a side dot I's check window and that's the entire thing.

This will do.

Ah, screen capture into the visual testing and with that screen capture is gonna make sure that this title all of the titles are visible.

So really, I don't even need this line anymore.

It's gonna make sure is only five of them.

So I don't need this.

So now I'm doing my favorite thing, which is to delete CO.

I no longer need this, Ray.

Oh, my gosh, this is getting really good.

And I don't need a variable, cause I'm only using it that one time so I can put that they're so look how nice my test.

Let's now.

Yes, Yes.

Okay.

All right.

So let's make sure we put the books back.

Yes.

OK, so we're gonna run it this first time and what's going on here?

Did I miss something up?

Okay, okay.

So what's going on here is it takes a picture, is going to send this image out to the avenue tools cloud.

And so I don't have to store this stuff on my computer.

I can if I want it.

So there's options for that.