 So, welcome to CI for CSS, creating a visual regression testing workflow. My name is Kate Kligman and I'm an engineer on Pantheon's dedicated open source contributions team. Can everyone hear me all right? All right. All right. Let me, this microphone is just a little bit too low. Can you? All right. I guess I'll just, all right. I'm just going to have to hunch. Let me just raise this a little bit. All right. Does that sound better, everyone? Yes. Okay. Great. So, my name is Kate Kligman. I am an engineer on Pantheon's dedicated open source team and I'm going to show you how to do visual regression testing in your workflow. So, how many of you have ever made a CSS change that went a little bit wrong? Okay. All right. Was it a global change? And did you notice this change or did someone else notice it for you? Yeah, and it's actually incredibly easy to push these kinds of changes to production. So, this is something where visual regression testing can help. It can help capture these changes and show them to you as part of your workflow. So, I'm going to show you how to use some tools and how to use some methods to do this for you, basically. With visual regression testing is basically the act of taking two screenshots, a before screenshot and an after screenshot, and running them through an image comparison tool. So, a common tool is image magics compare. This is a command line utility. It's an open source program. And what this will do is it will go pixel by pixel and it will compare the images and it will generate a composite image that will tell you if something has gone wrong. So, with visual regression testing, a lot of this is about setting up your workflow so that you can run screenshots through image magic compare. So, for this session, I'm going to show you some use cases and I'm going to talk a little bit about headless browser testing. This is browser testing with PhantomJS. Does anyone here use PhantomJS? I see a show of hands. All right. And also, I'm going to cover SlimerJS, which is a mostly headless version of Firefox. And finally, I'm going to talk about full browser testing with Selenium and some of the options that you can have and use with Selenium's WebDriver CSS. And there should be time for questions at the end. All right, so I mentioned that I am an engineer at Pantheon, but I actually got my start with visual regression testing through video games. So, I'm an independent video game developer and I was working on a point and click adventure game last year. Now, this game had 120 screens in it and each screen was actually like a web page. So, it had a static background, it had some user interface controls and it had components that the player could click on to perform an action. Now, the game was responsive and it had five resolutions that it would support. And then on top of this, it was also through the PC and the Mac. Now, each of these changes actually meant quite a lot for testing. So, 120 screens, I had 10 different renderings per screen. So, for each screen, I had five resolutions times two platforms. And I also had to keep track of the navigation sequences. So, for example, if I change something on screen two, screen 20 might have a problem, this is called a regression. And it was not feasible for me to humanly test this game every time a developer made a change simply because there were too many screens and too many permutations of items and things that could go wrong. So, what I ended up doing was I used visual regression testing and automation to test the game and then to report on differences between each of the pages. So, this is actually, I worked on a video game, but this is actually very similar to testing a website. So, in this example, this is a tablet rendering of a website. And I'm going to make a very small CSS change to it. I'm going to change the link colors from green to blue. Now, my intention is to just change the title link colors. But that's not exactly what's going to happen. So, I've made my change, it may not even be perceptible on this display. And that's kind of the point because when it's late and you make a change like this and you're testing, it's very, very easy to miss, especially because these changes are very close to the color scheme of this website. So, agreeing to blue link change, not so easy to notice. I'm putting these pages side by side so you can take a better look. So, on the one side I have my blue links, on the other side I have my green links. So, what I do is I would take each of these screenshots and I will run them through image magic compare. And it will go through pixel by pixel and it will generate this composite image. So, what it's done is it's highlighted in red anything that has changed from one picture to the other. So, I can then validate this and I can say, well, I did want to change my content demo and my title links. But that read more towards the bottom right isn't really what I wanted to do. And so, this is actually very, very useful to catch even just the smallest drifts and changes. Now, here's a little bit more involved example. So, in this example, I'm going to take the dates and I'm going to remove them from the image. So, the dates are actually on the top right column below my search window. So, here we go, I've taken out the dates. And I just want you to note that something else has happened when I took out the dates. So, I'm going to go just back and forth a little bit. And there's actually some spacing shifts that happen when I remove these dates. So, when I run this through image magic compare, it's going to show that the dates have changed but also the content below it has shifted. And so, when I'm analyzing this particular smear, I guess, of red, I can say, all right, well, I can go to the top and look and say, I think that's where my change started. And I can just kind of read it down. Now, it's actually, it's a little bit hard to see what happens after the date changes because the text is kind of blurry and it's very red. And this is something to note with visual regression testing, is that it acts like a visual stack trace. You start at the top and you need to try to figure out what's gone wrong with the composite image. So, here's a little bit more of a challenging example. So, in this page, there's quite a lot that looks like it's gone wrong. Now, I know it's wrong because I made a 10 pixel margin change below the breadcrumbs. But looking over this page, I mean, it looks like most of the page is, you know, something's happened here. But what's actually happened is the visual regression testing has picked up all of the spacing changes caused by my one margin change. And it's come out like this and it's indicated something's wrong. So, when I'm looking at this image, I say, well, all right, I think the header's all right. And I'm pretty sure the breadcrumbs are okay. But everything below it, you know, I need to investigate what's happened. Now, with this picture, this is what happens when you take a screenshot in Chrome and you take the same screenshot in Firefox and you run them through image magic compare to produce this composite image. There's nothing wrong with this image. It's actually fine. There have been no changes. The only change really is the rendering engine that was used to produce the image. So, with visual regression testing, one of the challenges is that each browser is going to produce a slightly different image because it uses a different rendering engine. It may use different fonts. It may behave differently on different platforms. Even the same browser on a slightly different version of an operating system can produce a different image. All right, so there are quite a few challenges when doing visual regression testing. It's an incredibly useful tool. I would encourage you to try. But I'm going to talk a little bit about what you need to focus on if you're setting up your workflow. So first, as I mentioned, there are platform challenges. If you're on a Mac and someone else is rendering on a PC, even the same browser is going to look slightly different. The fonts can change. The form controls can change. Also, the rendering engines, again, so WebKit, Gecko, Internet Explorer, they're going to render the pages differently. And if you compare them, then they're just not going to come out the same. And it's not going to be very helpful if you compare them pixel by pixel with Image Magic Compare. There are also some content challenges. So if you have a web page that has a rotating image carousel or banner ads or a pop-up chat window. And you run it through a visual regression tool. What will happen is you're going to start seeing red smears in these areas. And nothing's wrong with the page. It's acting how you want it to. But if you have changing content on your page, you have to take that into account when you're setting up a workflow. Finally, there are environmental changes, which I'm actually going to get into in just a bit. Basically, if you have a developer that has an older version of your database and the test server or the staging server has even just the slightest difference in content, that's going to come up with the tool. Like just even a small environmental difference can propagate through and the visual tool could pick it up. And so finally, just when you're setting up your workflow, some of the challenges are with navigation. So when I was testing my game, I had to work out every navigation sequence and permutation to win the game so it could be tested. And with a website, you're pretty much doing the same thing. You have to inventory what pages you're going to test, what portions of the page you're going to test, and how it's all going to fit together. And then finally, you have to keep track of everything. So there are a few strategies and tools that can manage this for you. And what they essentially do is they keep track of the images and the differences and the composites. Now, so one of these tools is called Wraith. So Wraith is a Ruby gem. It was created by the folks at the BBC News for their regression tests. And it's pretty unique in that it doesn't require any programming to set up a fairly comprehensive range of tests. It's a command line tool. It's extremely easy to set up and it's also responsive. So it will generate responsive galleries for you of your website and any differences between the pages. So one of the things that Wraith does is it actually requires two websites. So you give Wraith your development site and your test site. You define what URL paths you want to test. And then Wraith will crawl both sites. It will compare each page for page. And then it will generate a gallery that looks something like this. So on my left, I have my development. On my right, I have my test. And the third column is the differences in the image, if there are any. In this case, there are none, so it's a little bit muted in color. And I'm zooming in just a little bit so you can see it again. And so Wraith will actually show me the percentage change for each image. So in this case, I've rendered at 320, which is the mobile resolution. And Wraith has gone to my dev site and taken a picture. It's gone to my test and taken a picture. And then it's compared them into a diff. Now Wraith is pretty easy to set up and configure. And this is sort of what the structure looks like. So when I set up Wraith, I just tell Wraith set up. And it will generate all of the files that I need to actually run the program. I don't have to write any code at all. So what it will do is it will make a configuration file. This is a YAML file that you can edit. It will also create a snap.js file. And this is what Wraith uses to navigate on the site. So if you are a programmer, this is a tweakable file. There have been some pretty excellent mods to snap.js. But for your default configuration, it will just go to the site and it will take a picture. For the folder structure, what Wraith does is when it crawls both websites, it will give you a separate directory for every page that it tests. And it will put all of the files in there. So this is something I'm going to go into about how you can use this to hook into your continuous integration setup if you decide to use Wraith for this. I also want to note that the config.yaml file can be renamed to anything. So if you have like three or four websites, you can keep them all in this folder. You can use one Wraith setup for all of your sites. And you can just rename these files and Wraith will be quite happy with that. This is what the configuration looks like. I'm just going to go over the items fairly quickly so that I can show you what Wraith can do. So Wraith actually lets you select which headless browser you want to do. So a headless browser is a browser that doesn't have a viewport. It's a command line scriptable browser. Phantom.js is one. There's also Slimer.js, which is an interface to Firefox. So Wraith can support WebKit and Firefox. You define your SNAP file. Again, this is tweakable and modable. And then finally, you give it a directory that you want it to store all of your screenshots in. And that is tweakable too. And then finally, you give it your domain. So in this case, Wraith tests against two websites. So I have my development website and I have my test website. And Wraith will use these base domains when it's doing its crawls and it's doing its tests. All right, so this is important. These are the paths that Wraith will crawl when it visits each of these sites. So in this case, I've defined I want it to visit my home page. I want it to visit my login. And I have two of my lovely vegetable pages that it's going to crawl. And I've defined these in key value pairs. So the key is going to become the folder name that all of the images will be stored in. And the value is the URL component that it will visit on both of the sites. And finally, Wraith is responsive. So whatever screen widths you define here, it will crawl at these widths. And when it generates its galleries and its artifacts for you, this is what it will capture. There's also a mod that lets you specify the heights. Again, there are some excellent mods for this. And to run Wraith, it's command line. You just do Wraith, capture, and you're config without the AML extension. And Wraith will go in, it will crawl the sites, it will generate your galleries for you and you're pretty much good to go. Now, one thing that Wraith will also do between runs is it will clean up after itself. So every time you run Wraith, you are running a fresh gallery of Wraith. It doesn't really leave anything behind. So that's something to keep in note. And again, this is what the gallery looks like. When I was assembling this slide, I actually had an environmental difference between my dev and my test setup and Wraith managed to catch this. So if you look at my tablet column, it's on the lower right, there was actually a difference that was detected in the menu item. So this is what Wraith looks like when it catches something. Now, when you're setting up your workflow and you're considering what resolutions that you're gonna test against, if you have a responsive website, what can happen is particularly with mobile sites, they don't really display a lot of information. So if I had just tested this on mobile, I wouldn't have caught an image difference that the menu items were missing simply because they weren't visible at the mobile resolution. I would have needed to click on the menu to display the mobile menu and then I would have had to do the capture then. So Wraith doesn't have the ability to do complex navigation sequences within a page. Now finally, once my pictures are generated, I can then hook them into my automatic workflow. So in this case, this is my home folder and Wraith will capture three images. So it captures the dev, it captures the test and then the diff is the composite image that is generated by image magic. Now this is, it's a little bit hard for a computer to really analyze the diff file. In fact, in most cases, the diff file is not gonna have very much in it. So what Wraith will do is it gives you a data file and that data file contains a number and that number represents the amount of difference that's going to be in that composite diff. So if the number is zero, then the test has passed. You're good, there's no difference at all but if the number is anything but zero, something has changed and you can decide how far above zero you wanna act on and it does this for every resolution that it tests against and for every page that it crawls that you tell it to. All right, so when you're designing your tests, this is all nice and good but it assumes that you have a static homepage or a static content page and that's not always the case. So I mentioned if you have a website and the website has an image carousel or rotating banners or something that's going to pop up onto your site while the picture is being taken then it's going to cause some problems with Wraith because Wraith is gonna see these as a change and it's going to flag them and you're going to have a lot of false positives. So Wraith has a pretty nifty feature that allows you to literally carve out portions of your website and capture it independently. So if I know that my header is not going to change between page refreshes, I could tell Wraith to just test that and only capture that and to capture it at different resolutions. Whereas if I have say a dynamic content block that shows something different every time, I really don't want to capture that so I can just ignore it. And so with Wraith I can just basically take my homepage and cut out what I am actually interested in. So this is what it looks like in Wraith. I've just only captured my static header at the various resolutions and I can do this for pretty much anything on the page and Wraith will use selectors to capture these images for me. So I'm gonna talk for a little bit about a JavaScript library called CasperJS. Who knows what CasperJS is? Is anybody using Casper? All right, so Casper is a navigation library that gives Wraith a little bit more muscle when it crawls the site. So in order for Wraith to capture in selector mode, I have to set it up with CasperJS. Now the great thing about Wraith is it does this for you. So when you are setting up Wraith, you just do Wraith set up Casper and Wraith will generate a navigation script for you and it will also generate another configuration file that is almost the same as the first configuration file. You just have to tweak it again. And again, these files can be called whatever you like. You need to keep, it's a good idea to keep the name CasperJS to keep the JavaScript files named what Wraith supplies as a default, but you can change the configurations to what you like. By default, Wraith will generate a file called component.yml for the navigation for Casper. So to set up my selectors, the configuration looks kind of the same as before. Wraith will actually configure PhantomJS for you. It'll tell PhantomJS, okay, we're using Casper now. It'll say that the snap file should be under JavaScript CasperJS. This is filled in for you and generated for you. And finally, for the past, it'll change very slightly. So instead of just specifying a key value, the key being the folder and the name and the value being the URL component, you can now specify the key, which is header in this case and the path, which is in this case my URL root and also the selector, which in this case is header. And this will let you crawl to my homepage and then just capture only the header. And to run this, you just type in WraithCapture component or WraithCapture, whatever your config name is. And Wraith will go ahead, it will generate the gallery for you, and it will only capture the selectors and the pages that you want. And so here's a picture again of just my static selectors that Wraith has captured for me. And this is pretty handy. Now, let's say that you don't wanna have two websites for whatever reason or your staging and your development machines are so out of sync that it just doesn't make sense to capture against them. So Wraith has a history mode that allows you to take one website, store a baseline set of images from that site, and then do subsequent runs against it and test against it. So Wraith calls this its history mode and it allows you to basically just have one website and test that website against itself. So the configuration, it's a little bit, it's mostly the same. You're just supplying the history directory. This is where the baseline set of images are kept. And you're also actually reducing the number of domains down to one. So in this case, I'm just testing my test site and I'm storing my baseline shots and shots history. And when I do this, I basically do Wraith history config, my configuration name, to generate my baseline crawl of shots and then anytime I make a change and I wanna test against that baseline, I can just do Wraith latest config. And Wraith will generate a gallery and composite images for both of those folders. So in this case, the first column is my latest images, the second is my test site and the third column is my composite image. In this, there's no change because I fixed my environment from the previous slide. So this is pretty great. This will actually get you pretty far. You can just set this up. You don't have to do this every single time you develop. You can do this before releases or if you have a live site and you wanna make a very small CSS change, Wraith is a great tool to just give you an extra check before you send it out. It'll save you a lot of pain and you don't have to do very much programming at all. So you can do it with Chrome or Firefox effectively and you can run two websites against each other or just a single website with a baseline image set and you can use selectors to limit your coverage. So this is Wraith. All right, so I'm gonna get into full browser testing with Selenium. So Selenium, how many people here know or use Selenium? Oh, I see a lot of hands. Okay, this is good. So yeah, so Selenium is a Java server and it allows you to interface with and load and test against full browser websites. So this is actually pretty, it's a fantastic tool. Now, Selenium is also great because you can run it with JavaScript and you can write all of your tests against it in JavaScript and you can test against full browsers like Internet Explorer or Firefox or Safari. You can, all right, so when you're setting up Selenium, there's a few things to keep in mind and if you're already running Selenium, you probably know what I'm about to say and that is for every browser that you wanna test with in Selenium, you actually have a separate environment that you have to set up for that browser. So if you are testing against something like Internet Explorer, you're gonna actually have to have a VM with Internet Explorer on it or have it on a box that Selenium can interface with and test against and this can be a little bit tricky because the more browsers and environments you wanna test against, the more you're going to have to maintain. So with Selenium, you can host it yourself and it's actually not that difficult. I'm not gonna go into the details here but it's really not that difficult to do or there are actually a number of hosted services that you can use to run Selenium. So this is, so as of today, which is May 13th, 2015, these are some of the services that are available. Some of these have visual regression engine tools in them so I would encourage you to check them out. So really, you have a variety of choices for getting started with visual diffing and visual testing in this. So all right, so you have Selenium, let's say you've chosen your solution, you're hosting it yourself or you're using a hosted service with it. The next step is how are you going to write your scripts and how are you going to do your visual regressions? So there is a really great tool called WebDriver CSS that will do a lot of this work for you. So WebDriver CSS uses a navigation library called WebDriverIO and this is a JavaScript library that will let you point and click and test. It's a lot like Casper.js in this respect for those of you using Casper and it will enable your cross browser testing and it has some pretty neat features that elevate it above Wraith in terms of configuration. So I'm gonna go back to my slide here about limiting test coverage. So previously with Wraith, when we wanted to limit our test coverage, we were carving around the portions that were changing. So we couldn't really test the whole page that might change. We were testing the static header and maybe some items around it, maybe the breadcrumbs and then just trying to avoid the dynamic content block. So what WebDriver CSS lets you do is it lets you blot out portions of your site that might change and then it will use that screenshot that it's blotted out in its visual regressions. So this is what it looks like here. So in this page, I've blotted out my dynamic content and so now when I do my regression tests, I don't have to worry about the carousel causing a false positive with my image. So this is pretty great and WebDriver CSS will also allow you to do what Wraith does with the selectors as well so you can decide if you wanna have inclusive shots or if you wanna have exclusive shots with these blackouts. Now, if you're testing across platforms, this is also useful to hide things like form controls or areas that they're not going to translate well between your image differences. One of the ways I've solved this is I simply don't do cross browser testing against different browsers. So what I do is if I'm doing a regression test, I will test Internet Explorer against Internet Explorer or I will test Firefox against Firefox but I won't try to combine the images when I'm doing this. Now this will generate a lot of extra differences and a lot of extra images but I found this is actually the easiest way to sidestep environmental and platform differences with the rendering engines. If you're brave, you don't have to do this. There are actually fuzzing options that you can do to help avoid issues with fonts. You can lack out form controls and things like that. I would encourage you to try this yourself and see what works for you. So this is what WebDriver CSS looks like. This is my exclude region with the Carousel. So in this case, this is just a very, very tiny code snippet. If you go to the WebDriver CSS homepage, you'll see quite a lot of, it's basically, it's about a 15 line script to get from just setting up Selenium to using WebDriver CSS. So in this tiny portion of my script, I have my home and I have the Carousel which I am excluding using selectors. So it's fairly easy to do this. Now I wanna go back and I wanna talk about something else that's important and this is about layout design. So when you're designing your layouts, one of the things that you need to keep in mind is that your layout is actually a contract with your testing service. So when you're designing a page, if you know that a portion of your page is going to change like your Carousel, it's in your best interest to make it easy for you to hook this into your WebDriver CSS script. So in this case, I know that I have a Carousel that's going to change. So my content in this case is going to be pound Carousel. So I'm actually setting an ID here. Now this is important because if you have a lot of tests or if you're doing a complicated navigation workflow, your tests can actually break if your layout changes and you're depending on your layout to pick your selectors for blackouts or for inclusion. So what I'm going to show next is I'm gonna go back just a little bit to this page. Now there's actually one more portion of this page that could go wrong in a cross browser test. And what this is is if I am using any kind of a hover sequence or a navigation sequence where I have to click on something and a pop-up window is going to show, I need to be able to script that change and capture it if I'm going to do a visual regression on it. And this can be done with WebDriver CSS. You can also use CasperJS to do this if you're using Phantom. And one of the important things is getting the timings right. So if I have a page and I've clicked on a button and I'm waiting for it to pop up and there's an Ajax sequence going and the page is fetching images. If I take my screenshot at the wrong time, the visual regression tool is going to not really care about that and it's going to load it and I'm going to start seeing red smears and false positives with my tool. So one of the ways around this is you can actually, there's some variety of mocking solutions that you can use. You can also set timings. And what I found actually works for me is just setting an extremely long delay to ensure that the images and the content have loaded. This is something that Selenium does sort of well but not fantastically well if you're waiting for content to render. All right, so I'm going to encourage you to try visual regression testing. You can prevent mistakes with your website. There are a number of open source tools that you can use and these are tools, these are everything from CSS lints to tools like Casper, Phantom. There's also Phantom CSS and Phantom CSS is very similar to WebDriver CSS for headless browser testing. So I would encourage you to check that out. And finally, you do have some cross browser testing options with Selenium. I'm going to show you some, these are some resources that you can use. I'm gonna post these slides after so you don't need to screenshot them. In particular, I'm curious how many people here are using Phantom.js for their testing? Just Phantom.js, just headless testing only if you're doing testing. Okay, and everyone else who is testing, you're using Selenium? Oh, just Phantom, okay. Okay, cool, yeah. So Phantom CSS is very similar to WebDriver CSS. It works on Phantom.js and it also works with Slimer and it allows you to just include and exclude portions of your page and it manages the files for you. So I would say that it's a very easy solution to setup and you don't have to get into the complicated setups with Selenium if all you're doing is looking for trivial CSS changes which can happen quite a bit. Yes. Exactly, so you can keep all of your testing in JavaScript which is actually very nice. Actually, GraphicsMagic is another library that's used for comparisons. So, yeah, WebDriver CSS uses GraphicsMagic. Now, if you're really hardcore, you can actually, you can run this yourself but these tools actually really do make a difference with your workflow. So I'm gonna actually open this up to questions. All right, can you speak into the mic? Not sure which one. Okay. Yeah. I can repeat back the question also. Can you hear me? Yes, I can hear you. So I was just curious what environment you prefer. I was just kind of clicking around and looking to install image magic on our RGL7 was having a little bit of trouble but what environment do you prefer if any to use, you know, Wraith and Phantom.js and image magic? Okay, I've had some pretty good luck with Wraith on Ubuntu Linux. So one of the things with Wraith is that I originally started testing with Wraith on Mac actually on Yosemite and I found that I had a lot of difficulty with the versions of the software that it wanted to use. It also has some really weird issues with the versions of Ruby that you use. And so I found in particular the selectors sometimes don't always work that well. So Wraith, so I would say if you're gonna set up a testing setup, I've had excellent luck on Ubuntu Linux. Okay, thank you. I just have a comment. So the content locking works really well. I guess if you have the randomness in the content coming from the JavaScript end, but in Drupal most of the time it's coming from the server end. So I suggest what we can do is maybe set up a local IngenX reverse proxy with a two minute expiry date and then just run Wraith on that then you'd get that content to be static across Sliver, Phantom.js and all those. Oh yeah, that's a good point. Yes, you can absolutely do that. What do you do when you have a dynamic content block when you wanna check the CSS like a list of five most recent posts with an image? You wanna check it but it's gonna change from time to time so you wanna block it out but then you're not testing that section. How do you test the CSS? Exactly, so yeah that's tricky. So what you can do is you can set up your content so that it's, you're just testing one. So if your website is programmed so that you just have one item and it's always going to show just that one item, okay you're not really, you're not exactly testing what you wanna test but you'll at least test one item and it's top level positioning. This is really, this is actually a place where visual regression testing struggles because if you have dynamic content you have to basically make it static in order for the regression tests to work. So you're either just reducing your content or you're just working around its positioning. In the selectors you can use dibs, IDs and classes. Yeah, you can use XPath. Okay, I have a comment too on your problems with the versions of Ruby. Did you try Ruby version manager or anything like that? Yeah, I did and I found that it's basically, Wraith installs pretty well but it's a lot of extra setup work and it's not always apparent what's wrong when it malfunctions. Okay, thank you. All right, any other questions? Okay, go for it. Oh yeah, so I've used Wraith before. We can use it on our off and on. One of the problems I've had fairly often is basically Wraith will go through and try to take screenshots but sometimes it'll time out. Yes. Is that something maybe the Ubuntu problem fixes or is that just? All right, so I can tell you exactly how to fix that. So you're asking Wraith will sometimes time out while it's taking screenshots and then of course your screenshots show regression problems because it's not finished rendering or there's other problems. So this is actually an easy fix. You can tweak the snap.js files or the casper.js files and you can increase the timeout. So just put in 10 seconds and that will actually be fine. Oh, that's cool. Yeah. How are you determining? So I noticed there's a setting for like a mismatch tolerance. How do you determine that setting? Ooh, that's a good question. So all right, so this is where responsive testing can be difficult. So if you're testing on a mobile display, your mismatch tolerance is going to be different than if you're testing something with more image surface. So, yeah, Wraith lets you actually tweak. It lets you tweak the fuzz that image magic uses. It also lets you tweak the tolerance. I've actually found that those settings, aside from the fuzz, those settings aren't that useful simply because if you have a wide range of responsive tests to run, that number is going to be static between all of them and that it's going to have different meanings for different surface areas. So I found at least for the testing that I do, it's better just to keep that as low as possible. Just a question, curiosity. We use Phantom CSS at Promet Source and we've not actually used Wraith. So I'm just curious, can you get a full screenshot of an entire page or do you just get the section that's in the viewport? It tries, so it, well, okay, so it actually tries for a full screenshot. There are actually some Wraith mods that can let you specify the height that you want, but the gallery displays are a little bit limited in that respect. So when you saw the gallery displays, it actually crops. Okay, can you, with Wraith, can you also capture just components on the page? So can you get just the headers or just the sidebar? Yes, okay. But I just want to add that Wraith doesn't have the blackout features that Phantom CSS and WebDriver CSS do, so yeah. All right, any other questions? All right, thanks.