So i'm building a Time Machine
Lee Englestone
Head of Innovation | Senior Software Development Manager & Tech Lead | Cloud, Web, Desktop, Mobile, AI and XR Developer | 5 x Microsoft MVP | MSc Entrepreneurship and Innovation
Ok, admittedly it's more like the Way Back Machine than the H.G. Wells version.
I realized recently that there are a couple of challenges I face as Dev Manager that having a visual history of webpages would solve.
Challenge 1: Visual History
Once we've made a UI change, it's sometimes difficult to compare it to what it looked like previously. And even harder to review how the UI has changed over time.
I try to overcome this by asking devs to take a before/after screenshot and paste in the TFS (Team Foundation Server) work item but it's not something we do consistently.
Image caption: Tracking intended visual changes over time
Challenge 2: Spotting Visual Regressions
When undesired UI regressions sneak in (some unwanted padding here, a paragraph missing there..) they often get overlooked at the testing stage and not spotted until days or weeks later.
Image caption: Accidental visual changes sometimes can take a while to be noticed
The solution: A time machine
Well, as near as i'll probably ever get to creating a time machine..
If i'm perfectly honest, it's not as fancy as a time machine.
It's a .NET Core Console Application that I run whenever we do a deployment to Leasing.com (sometimes multiple times a day), that runs Selenium to take screenshots in Mobile, Desktop and Tablet dimensions of 30 main pages, then save them to Azure Blob Storage and Azure Table Storage.
Then a simple .NET Core MVC Web Application retrieves and displays those images from a particular 'run'.
I'd like to develop this even further to
- Identify visual changes between deployments by using an image diff library and highlighting image differences for easy visual detection or automated notification.
- Show the evolution of a page over time.
Summary: It will benefit us in 'the future'
The slightly annoying thing about this, is that it would have been a great thing to do about a year ago, then today I could go back in time to see UI changes on various pages.
That said, I don't think it will be long before the phrase "check the time machine" will become commonplace in the office after it has been in use for a number of weeks.
I'll create another post with some screenshots including image diffs hopefully.
-- Lee
UPDATE: My Time Machine Part 2