Automated testing screen comparison

Question

I'm using Webdriver with C#, the issue is that Webdriver can't test design, so i trying to make something like screenshot comparison, because i working on big site and every day it has new futures, new changes so i don't know where or on which browser design didn't broke. My question is do you know any tool, framework, project or some ideas?

I already wrote something but its not so perfect, my code makes screenshots over site on different browsers and versions, after that it's cutting them and compare it with demo-screen. If there are more than 5% for wrong pixels test is falling.

P.S. I'm a junior)

Some of my code if someone will need it in the future:

        var screenshot = ((ITakesScreenshot)Global.Driver).GetScreenshot();
        screenshot.SaveAsFile(dirHomePage + "homepage.png", ImageFormat.Png);
        var mainImg = new Bitmap(File.OpenRead(dirHomePage + "homepage.png"));
        var section = new Rectangle(new Point(0, 0), new Size(mainImg.Width, 153));
        this.header = this.CropImage(mainImg, section);
        this.header = this.ClearImage(this.header, Color.White, 264, mainImg.Width, 30, 60);
        ImageComparison(this.header, this.demoHeader);

    public Bitmap ClearImage(Bitmap source, Color color, int fromW, int toW, int fromH, int toH)
    {
        Bitmap bmp = source;
        for (int i = fromW; i < toW; i++)
        {
            for (int j = fromH; j < toH; j++)
            {
                bmp.SetPixel(i, j, color);
            }
        }

        return bmp;
    }

    public Bitmap CropImage(Bitmap source, Rectangle section)
    {
        Bitmap bmp = new Bitmap(section.Width, section.Height);
        Graphics g = Graphics.FromImage(bmp);
        g.DrawImage(source, 0, 0, section, GraphicsUnit.Pixel);
        return bmp;
    }

    public void ImageComparison(Bitmap firstImg, Bitmap secondImg)
    {
        bool match = false;
        int nrBadPixels = 0;
        if (firstImg.Width.Equals(secondImg.Width) && firstImg.Height.Equals(secondImg.Height))
        {
            double acceptedProcent = (firstImg.Width * firstImg.Height) * 0.05;
            for (int i = 0; i < firstImg.Width; i++)
            {
                for (int j = 0; j < firstImg.Height; j++)
                {
                    string firstImgRef = firstImg.GetPixel(i, j).ToString();
                    string secondImgRef = secondImg.GetPixel(i, j).ToString();
                    if (firstImgRef != secondImgRef)
                    {
                        nrBadPixels++;
                        if (nrBadPixels > acceptedProcent)
                        {
                            match = false;
                            break;
                        }
                        match = true;
                    }
                }
            }
        }

        Assert.IsTrue(match);
    }

Answer 1

I think you can give Sikuli a try.

Sikuli Script automates anything you see on the screen. It uses image recognition to identify and control GUI components. It is useful when there is no easy access to a GUI's internal or source code.

However, this is just for layout and stuff, if you need to test functionality based on DOM, Selenium WebDriver is still the best way to go. Moreover, it's more like Selenium IDE, rather than Selenium WebDriver C#. You might find this wiki page interesting, SikuliWebDriver.