 Asami sanoi, että minä olen Salvi Rajala, ja minä olen Jyväskylä, jossa olen ympäristöteviljelmässä Valu Digitala, ja minun suhteen tänään on visual regression testing with rate. Ja täällä on taas kontenttia minun talon, joten minä olen vaikea ottaa tämän tämän 3 kysymyksiä. Mitä, miten ja miten? Joten ensimmäinen, minä olen vaikea ottaa kontenttia visual regression testingin talon. Ja sitten, minä olen ottaa tämän ympäristöteviljelmässä. Mikä olet pitänyt tehdä? Ja tietysti, minä olen ottaa tämän ympäristöteviljelmässä. Mitä on visual regression testingin talon? Miten minä oot tullut, että alkoi tämän ympäristöteviljelmässä? Minä olet tullut, että sinun on tämän ympäristöteviljelmässä, ja minun suurin on tämän ympäristöteviljelmässä. Se on tämän ympäristöteviljelmässä. Minun on tämän ympäristöteviljelmässä, ja rigtadaan enemmän Personal е journalistsinkympään ja ajatiasta mes בא� sleisen trenduna. Minä ajataisin creepy recursos ja nävollistaa jissa kuten aiheellaan huono yhtymä. Vitation recomendation on yksi takaisin regression testing. Well, I'll give you one reason. Ask yourself, what is the number one reason why your site breaks after you have published it? I think it's the plugins update. You know, you have this bunch of plugins that output some styles to your website and when the plugins update, maybe also those styles change and it might be that not all those style changes are wanted. Well, you might say that now I always disable the styles of the plugins that I use. I always write my own custom styles styles, so this doesn't bother me much. Well, does any of the plugins that you use output any HTML to your site, like title tags or something like that? Are you sure that those tags will remain the same after every update? I think you can't be sure, so you end up in a situation where you actually do visual regression testing, but you do it manually by clicking randomly the links in your site and trying to weave all the layouts in your site and trying to spot if there are any errors in the styles. And this means a lot of work and it's also quite error-prone, so why not do it automatically and save some time and maybe some effort also. So how to actually do visual regression testing? One way to do it is with tool called Wraith. Wraith is a screenshot comparison tool created by the developers at PPC News. And it's an open source and you can find the code from that GitHub repository. Wraith uses headless browser to create screenshots of webpages at different moments in time and then it creates the diff image from these two screenshots. Out of the box, Wraith supports PhantomJS as a headless browser, but there are also some other options available. And image magic is used to create the diff image from before and after screenshots. Wraith has two modes, capture mode and history mode, and I will demonstrate the history mode later on in this presentation. And I think that the documentation of Wraith is pretty good, so it should be quite easy to just start using it by following the instruction you can find from that GitHub page. The biggest issue with Wraith is that it doesn't support Flexbox. Or actually, I should say that the PhantomJS does not support Flexbox yet. The next major version of PhantomJS should fully support Flexbox. And even now, there is a beta version I will able for you to download it and try it out. And I have done that. And it seems to work quite well. But as you might know, things in our industry changes quite fast. So just last week, the main developer of PhantomJS announced that he is stepping down as a maintainer of PhantomJS because of headless Chrome. So I think it will be interesting to see how much this will affect Wraith and what does it actually mean for Wraith. And actually just a few days ago someone opened a fair to request to Wraith GitHub page to add the support for headless Chrome for Wraith. So please go ahead and thumb it up. And maybe we'll see someday that Wraith will support headless Chrome. And I think that that would be awesome if that is the case. So how does it work? Let's take a look at how this works in practice. Wraith uses this config file where you can set all the settings, necessary settings that you need to run the Wraith. You can find the example config file from Wraith GitHub repository and also from my personal GitHub repository from where you can actually find the config file that I am now using in my demonstration. So let's take a look at how does it look like. Let's see here. That's really small. Ah, that's better. So here's the config file of Wraith. And you can set the domain from where the Wraith takes the screenshots and then you can set a different path from where actually the Wraith captures the screenshot. So just now it takes the screenshot from the home page, but you can also set some other pages like about us page and so on. And then you can execute some JavaScript before every screenshot is taken. So now it just waits some time before it captures the screenshot, but you can also write some more complex JavaScript here also. And then lastly, I don't know how to ask, the second one is the screen width. You can set the different width of the screenshot so you can take the screenshot as a mobile side, tablet side and desktop side. And lastly, you can set the directories or folders to where Wraith actually saves the screenshots images. So yeah, that's all you need to know for the purpose of this demo. Let's see if I can make this work. Where is my, okay, let's see. Yeah, here you can see my demo site WordCamp.dev that runs in my local environment and it uses the 20 17 team. And as you can see, I have added this beautiful order hour newsletter element to the front page. And I have used gravity forms plugin to actually create this email order form. And as you can see, I have written some custom CSS to make the input field and the order button beautifully in the same line. And everything seems to be okay and everything is beautiful and works great until I hear that there is a plugin update coming for Wraith. So I start the process by taking the before screenshots by running this command Wraith history and then the path to the config file. And now if everything works well, it should take the screenshots from my site. Yeah, and it creates from here as you can see, maybe you can see, yeah, the screenshot from my site and it's, as you can see, it looks a little bit different than for example in Chrome. And that is because your site in PhantomJS will render a little bit different than in Chrome. But for the sake of visual regression testing, in most cases, we can leave with that. And next step is to update the plugin, but luckily for you, I have already done that. So I will just check out the master branch using Git. And then I will run Wraith latest and then the path to the config file. And this tells Wraith that, okay, now it's time to take the after screenshots and compare those screenshots to the before screenshots. And then creates the diff image from as a result. And now, as you can see, it says me failures, warning failures detected. At what path failed, at what resolution, and how much differences there was. And what is quite handy with Wraith is that it creates this gallery file. Maybe you can, yeah, from where you can quite fast see what actually is the result of the Wraith test. And on the right side is the diff image. And as you can see here, everything else seems to be okay, except my order our newsletter element. And I can quite fast see here that what is the problem actually, it's the form. And then I can go and see the code and see what is actually happening there, why that happened. And fix that before I push the updates to production. And in this way, I save that our customer has no idea that we just fixed some bug in their site. And I think that's pretty cool. So yeah, I think that's all I have to tell you about visual regression testing and Wraith. So thank you for listening. And please don't hesitate to contact me if you have any question relating to Wraith. Or if you want to give me any feedback about my presentation, I will be more than happy to hear that. You can find me on Twitter or on Slack. So yeah, thank you and let's have a nice day.