There is a technique to check if something visually not broken in HTML and CSS markup - visual regression testing.

We do following steps:

  1. Check everything is ok.
  2. Create a test "reference" (creating *.png files).
  3. Change something.
  4. Run test and check what changed.

What is better practice - all these "references" should be stored localy or should be commited to repository after check if everything is OK?

Maybe the first case more simple and suitable for single development, but second can be useful if I have team and person with QA role - he can check and create references?

Do you have some experience or thoughts about how this will be on practice?

2 Answers 2


Data is always better if it is stored in a central location where it is accessible to all the team members.

It may happen that your team is distributes in different geographical location. In that case if your keep data in your local system, then every time you will have to send the data to your team member viz mail or chat or any other file/data transfer app. This also creates a lot of inconsistencies and faulty communications.

So its always better to have all the data in a central location (if possible in a cloud based system). One more benefit is that if your system crashes your data is still safe.

  • Are screenshots "data" or "code"? These screenshots can be viewed as specification of the CSS/HTML code - how it should be look like (if QA checked everything is OK and commited it). On the other side, if I have code, I can generate screenshots after "git pull", but in that case If I edit something, I can only check if something "changed", but not "if everything is OK". Commented Jan 12, 2016 at 10:15
  • I don't understand what you mean when you refer to screenshot as code. Would you please elaborate on that? I usually consider everything that helps me and my team understand and debug issues as data, for example, input values, screenshots, videos, logs, error reports, files, anything that helps in identifying, understanding and debugging the problem is data for me. Code is what the designers and developers write to develop the software. But that's just the way I consider it. You may have a different view point and I'd like to know that. Commented Jan 12, 2016 at 10:21
  • Not exactly the code - more mockup or specification. If I mean "that div should look like on this screenshot" - this is a mockup or specification, which is equivalent to automated unit test on some programming language. Commented Jan 12, 2016 at 10:32
  • assert.imageEqual(reference_mockup, renderedTemplate); // in that case reference_mockup is the part of the code Commented Jan 12, 2016 at 10:39
  • In the case you mention, the screenshot becomes any input you provide to the code and not the code itself. Therefore, its data. You provide some data to the code and compare it to another piece of data and check whether they are the same or not. It like comparing 2 strings, where the 2 input string (The one to be compared and the other to be compared with) are data not the code! Commented Jan 12, 2016 at 10:48

I would say No. You dont need to keep these files versioned. Ie TestImage1.png will never be updated or changed, as such I would suggest you store them alongside your test results. At this point you wouldn't be using Git for version control, simply a file store.

However, if you wish to maintain the images as "data" (ie used as a means of comparision to its current state) you may find it more practical to keep it in a single place. I would suggest a consistent format be used and a well planned structure

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.