When I started dogfooding Find Work, I found an annoying invisible issue. Try to spot it in the screenshot below:

Can’t spot it? Here’s a similar issue that I caught/fixed in development:

To prevent spoilers, I’ll provide some visual spacers:

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Here’s the answer: Our notification container was taking up full width and blocking the “Menu” button:

In the development example, it was our menu button’s container overlaying our logo link:

How do we prevent future regressions for these and similar problems? I can think of a few options:

JS based test: Load the page in a browser/browser-like environment and verify the container width is not the full page width

Visual test: Highlight container and guarantee it only takes up the space it needs

I prefer taking the visual test route as it’s simpler (i.e. add a CSS rule) and more intuitive for a developer. The screenshots above are from our visual test suite. Here’s our visual test in Gemini:

gemini.suite('menu-collapsed', function (child) {

// Navigate to a page that loads our notification

child.load('/_dev/notification?type=log&message=Hello%20World')

.setCaptureElements('body') // Add highlight to container via CSS

.before(function addOverlayHighlights (actions, find) {

actions.executeJS(function handleExecuteJS (window) {

var document = window.document;

document.styleSheets[0].insertRule(

'#notification-container { background: rgba(0, 255, 0, 0.3); }',

document.styleSheets[0].cssRules.length);

});

}) // Capture across all of our resolutions

.capture('default-large', geminiUtils.resizeLarge)

.capture('default-medium', geminiUtils.resizeMedium)

.capture('default-small', geminiUtils.resizeSmall);

});

Here are the fixed results from our visual tests:

References