App Dev · · 4 min read
NetLay: Looking at it properly
After nineteen features, a sense check of the screens rather than the code, driven by a headless browser taking thirty screenshots, and the dozen things it found that no test ever would.
Green tests, wonky screens#
Every test passes. The build is clean. None of that tells you that a checkbox label has wandered off to the far side of a dialog and wrapped onto two lines.
"Okay now lets just sense check everything we have and ensure the UI is clean and makes sense"
So this post has no features in it at all. It is about spending an evening looking at NetLay instead of adding to it, and it found more real problems than any week of feature work has.
The method.#
I started a throwaway copy on a spare port with an empty data folder, created an account through the real first run form rather than reaching into the database, and seeded a small office through the API. A core switch, two edge switches, a server with twelve virtual machines, an access point with two wireless clients, a group, a patch panel and a couple of uplinks. Small enough to take in, varied enough to exercise everything.
Then I drove a headless browser at it with a script, installed in a scratch folder so it never became a dependency of the project, and had it screenshot every menu, every inspector state and every dialog at a normal window width, then again at a narrow one.
About thirty pictures. Then the actual work, which was sitting and looking at them.
What it found.#
None of the following would ever have failed a test.
Not one of the five dropdown menus closed when you pressed Escape. Every one of them, the three toolbar menus, the saved views and the account menu. So you would press Escape expecting the menu to go away, nothing would happen, and your next click would toggle something you were not aiming at.
Every checkbox in the application had its label shoved over to the far right of the dialog and wrapped onto two lines. The cause was one line of CSS, a global rule making inputs fill the width of their container, which is right for text boxes and nonsense for checkboxes. It affected the import options, the ping settings, the alert configuration, the group toggle and the ping this device switch. It had been like that for weeks and I had looked straight past it every single time, because I knew what the labels said.
Hosted devices created through the API or by discovery all landed on precisely the same spot, because the backend gave every one of them an identical offset from its host. On screen that is one virtual machine with eleven invisible ones underneath it. Now they fan out in rows below the host, and wireless clients arrange themselves in a ring around the access point.
The wireless client inspector said its VLAN was the same as the host port while the note directly above it said the VLAN came from the SSID, and they disagreed about the number. Both were reading real values, neither was wrong, and together they were useless.
Search results still described wireless clients as being a VM on something, that same leftover from sharing the hosting mechanism.
And the narrow window pass found the toolbar wrapping, the account menu dropping onto a second row with its dropdown opening off the edge of the screen, and the map hint wrapping over the top of the legend.
What was fine.#
Worth saying, because a post like this can read as though everything was broken.
The map itself, the host and group cards, the coverage circles, both export previews, discovery, the catalog, the VLAN and wireless dialogs, the ping settings, the alerts, sharing, events, search and the first run flow were all fine. Most of the application survived being looked at.
I also noticed one thing and deliberately left it: groups can only be reached by clicking their card on the map, not from the sidebar or the search box. That is a real gap and it is a feature, not a tidy up, so it goes on the list instead of into this evening.
The lesson.#
Everything above was in front of me for weeks. I use this app most days. I did not see any of it, because when you know what a dialog says you stop reading it, and when you know which menu button does what you stop noticing that Escape does nothing.
The screenshots worked precisely because they are not interactive. You cannot skim a picture the way you skim a screen you have used four hundred times. It is the closest thing I have found to seeing my own work the way somebody else does, and the script that did it turned out to be useful again later, which is a story for post twenty one.
Next time, photographs of the actual kit, and cables that go where the real cables go.