aXe – Automated Accessibility Testing

I say, old chap – what a BLOODY good idea!

Deque System’s aXe (The Accessibility Engine) open source library is a lightweight (~100 KB), fast, portable JavaScript library that executes automated accessibility testing inside your testing framework or browser of choice.

Accessibility seems to be the last realm of ad-hoc testing (ignoring the fact that most realms of automated testing are frequently aspirational!), so aXe sounds like a fantastic plan:

Deque’s aXe: The Accessibility Engine

Debugging CSS during drag and drop [Chrome]

Note: You can probably do similar in other browser Dev Tools – I just haven’t checked yet, and despite it’s memory hogging, Chrome is still my dev browser of choice.

+1 to my colleague Dadu for showing me this neat interface hack.

Debugging CSS during drag and drop is a horrible pain – how in hell do you inspect something when the moment you let go of the mouse to get to the dev tools the state changes?

By mildly abusing an unrelated feature, we can freeze the application state, leaving our dragged element floating in space and burrow around the DOM to inspect the CSS classes and work out why everything doesn’t look quite as perfect as we would like (aka ‘horrible’).

Open Dev Tools, jump to the sources tab, and check out the Event Listener Breakpoints.

OH LOOK! There’s a Drag / drop event!
NO. Bad kitty. Stop there. If we use this, we’ll get a breakpoint on the very moment a drag/drop event is called. We don’t really want that.

I want to pause the UI state at a moment of my choosing, perhaps while dragging over a particular element. So… Instead of drag/drop, check the Keyboard event box.

Screen Shot 2016-09-15 at 11.23.58

Now, drag whatever you like, and at the appropriate moment hit any key.


Voila – one paused state. You can’t right click to inspect elements, but you can use the element selector tool -hit the button top left of the Dev Tools pane,  or [Cmd/Ctrl] + [Shift] + [C] and point at the element you want to inspect.

Screen Shot 2016-09-15 at 11.48.17

Or, if you are a masochist, drill down through the DOM in the Elements panel. It’s up to you I suppose.

Don’t forget to uncheck the Event Listener Breakpoint when you are done…