A week or two ago I was discussing with a work colleague accessibility and they showed me a really cool Chrome extension named ChromeLens. ChromeLens is a Chrome DevTools extension to develop for the visually impaired.

One of the fantastic features of ChromeLens is the tracker feature. ChromeLens Tracker is a blindness simulator that shows the pathway by which a blind user will go through when browsing your web page with a screen reader. You can check if your web page goes through a logical flow and that the important content is included for the screen reader to narrate.

It’s great because you can start a trace, tab through the application and you get a visual representation of the flow of your application.

Whilst this is a fantastic browser extension I am always looking at new approaches to automate things which I would need to do over and over again manually.

Today I started to look at how we could automate similar functionality to ChromeLens but using pure javascript to draw the flow, with the idea of then using visual testing to then take a screenshot of the page flow and see if the flow still is as expected. This would enable teams to start to automate visual testing of page flows for web applications!

Below is the JSFiddle code I created to draw the flow on the web page.

Using the visual testing code example project I have made on GitHub the idea would be to use the WebDriver to inject the above javascript into a webpage to draw the flow, then take a snapshot and then do the visual comparison.

I have not updated the visual testing code project yet with this example but wanted to share this idea as it is pretty cool!

As always any feedback and comments are welcome.