I work as a Software Engineer at Endtest. In this article, I will show you how easy it is to use Computer Vision. The term itself sounds intimidating, it might make you think that you need a PhD in Machine Learning. Computer Vision can be used to detect objects in images. Why is it useful? If you have an Arduino, you can build your own self-driving toy car that detects the road signs. It can also be used to detect differences between images. This second use case can be extremely useful for developers who want to do . automated visual testing Let's focus on that one. Detecting differences between images The entire concept is dead simple, we just compare each pixel and we calculate the percentage of different pixels. We’ll just need to make sure our system has Python, OpenCV, scikit-image, Pillow and imutils. You can find instructions for installing OpenCV . here As for the rest, you can just use pip: pip install scikit-image pip install imutils pip install pillow First, we need to make sure that the images have the same size. The quickest way to achieve that is just to resize the bigger one. argparse imutils cv2 PIL Image PIL ImageFilter PIL ImageDraw image1 = Image.open( ) image2 = Image.open( ) image1_width, image1_height = image1.size image2_width, image2_height = image2.size image1_surface = image1_width * image1_height image2_surface = image2_width * image2_height image1_surface != image2_surface: image1_surface > image2_surface: image1 = image1.resize((image2_width, image2_height), Image.ANTIALIAS) image1.save( ) image2_surface > image1_surface: image2_surface = image2_surface.resize((image1_width, image1_height), Image.ANTIALIAS) image2.save( ) import import import from import from import from import "/path/to/image1.png" "/path/to/image2.png" if if "/path/to/image1.png" if "/path/to/image2.png" Now our images have the same size. Time to compare them: image1 = cv2.imread( ) image2 = cv2.imread( ) i1 = image1 i2 = image2 i1.mode == i2.mode, pairs = izip(i1.getdata(), i2.getdata()) len(i1.getbands()) == : dif = sum(abs(p1 - p2) p1, p2 pairs) : dif = sum(abs(c1 - c2) p1, p2 pairs c1, c2 zip(p1, p2)) ncomponents = i1.size[ ] * i1.size[ ] * diff = (dif / * ) / ncomponents diff = Decimal(diff) diff = round(diff, ) + str(diff) + "/path/to/image1.png" "/path/to/image2.png" assert "Different kinds of images." if 1 for in else for in for in 0 1 3 255.0 100 2 print "Difference between images is " "%." Difference between images is %. 7.11 We can also generate a third image that shows us the differences. This can be done by generating a mask and adding it on top of the first image. difference = cv2.subtract(image1, image2) Conv_hsv_Gray = cv2.cvtColor(difference, cv2.COLOR_BGR2GRAY) ret, mask = cv2.threshold(Conv_hsv_Gray, , ,cv2.THRESH_BINARY_INV |cv2.THRESH_OTSU) difference[mask != ] = [ , , ] image1[mask != ] = [ , , ] image2[mask != ] = [ , , ] cv2.imwrite( , image1) 0 255 255 0 0 255 255 0 0 255 255 0 0 255 "/path/to/image3.png" Benefits There have been documented cases where elements have disappeared from pages and no one noticed it for weeks. Implementing a visual check for your site can't hurt. And think of how much fun you can have by testing your implementation on all of those challenges. Spot the differences What I showed you was a basic example. POC vs Reality If you would apply this on an actual system, you would also need to make small tweaks. For example, let's say that your images are identical, but one of them is 2px higher than the other. You would need a function to the 2 images before comparing them. focus Almost forgot If you want to perform Automated Testing without reinventing the wheel, you can use Endtest .
