Lesson 3: Managing Image Sets and Troubleshooting Tests

Transcript

(00:04):
In this video, I'm going to be looking at image sets in 2 Steps. 2 Steps is an image recognition based automation tool. So it's really important to understand how it uses images in order to get the most out of the product. I've loaded up this test that I created some time ago, and I'm going to hover over this first step. And you can see that it shows me a snapshot of how the test looked at the time that I recorded this command. And you'll see also that there's a blue rectangle there, which shows the image that 2 Steps is looking for when it reaches this part of the test in order to find the part of the user interface to click on. Now, I can view the image set for this command by hovering over the cog. Then the view images, icon clicking that, and this is the image that's being used to identify the part of the user interface to click at this command.

(01:03):
I can see all of the image sets that 2 Steps is using up here by clicking on the edit image sets menu item, and here are all the different images and the steps that they're associated with. Oh, it is actually possible to reuse an image set on multiple commands. So there could be more than one step here and each command can also have more than one image associated with it. When you first record a command, it will only have a single image, but you can add more images later I'll explain why that is important. So I'm going to take a look at step five because that's an example of where we have an image set with more than one image. If I opened up the image set panel, you can see that there are two.

(01:53):
And the reason why there are two is because when I first recorded the test, the feedback button looked like this. And then after some time, obviously some changes were made and the feedback button has changed to look like this instead. And so the test was failing because 2 Steps could no longer find that image. And I had to go in and add this one to it. So how did I do that? Well, I'm going to play this test again. And I happened to know from having run this earlier, that it's failing again at step seven. So I'll show you how we go about using some of the tools in two steps to identify the problem and to fix it. This is particularly an issue with web tests, obviously because websites often have a lot of changing content. So sometimes images that we're working on one day will have to be modified in order to allow the test to continue to work.

(02:54):
So you can see it spinning on step seven. It's not going to work. It's going to time out eventually. So I'm just going to abort, the test at that point, then I open up the view, edit images, and I can see the image that's being used here. I click on that. You see it does find it. You see the little red flare that comes up when I click on it. And the green box that indicates where it's found on the screen. However, you'll see that the match is poor. So 2 Steps has automatically matched this against the current screen. And although it's finding it, it's saying that it matched below the required threshold. It's matching a 0.96. So it's a 96% match. The required minimum strength you can see here is the default, which is 0.99. I can change that.

(03:41):
And in fact, I could use this button to fix the match threshold so that this would pass. However, I'd rather have exact matches. So I'd rather work out what's actually gone wrong here and fix it properly. So I'm going to use this diff tool. I click on that, and this is showing me all the pixels that are different between the recorded view of the screen and the current view of the screen. You'll this view is not particularly helpful to me in this case because there's so much that it's different. And the reason why it's different is if you compare these two, the website is scrolled differently for some reason. And there are also different products. So the product range has changed or the available products have changed. However, the one that I'm looking for is still there. So this should still work.

(04:32):
However, if we look comparing the image as it was recorded now, we can see that the text has changed. In fact, it looks like what they've done is that they've increased the amount of space for the product name here. And so that means that this image is no longer a perfect match. So I don't know whether that's a permanent change. So rather than just editing this one or replacing the current image, I'm going to add this image to the set, the same as I did for the feedback button. So I'm just gonna shift drag over the new image... Click Okay. And now that passes and now I can close that, reset my test and run the test again. And with any luck, it's going to succeed at step seven. And there you go. It has worked. So I will stop the test at that point. I'm happy with that. I'll save it. And now my test is fixed. So that's an overview of how we can use image sets in 2 Steps and how we can add images to our image sets. In another video, I'll be showing you how we can edit our images, both live and offline.