Todd Wolfson

Software Engineer

March 30, 2017

This article was originally published on Medium:

https://medium.com/findworkco/testing-the-invisible-2ac2ccae1101


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

Notification reference screenshot

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

Top bar reference screenshot

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:

Notification before highlight screenshot

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

Top bar before highlight screenshot

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:

Notification after highlight screenshot

Top bar after highlight screenshot

References

Top articles

Develop faster

Removing the tedium from creating, developing, and publishing repos.

Sexy bash prompt

A bash prompt with colors, git statuses, and git branches.

Recent articles

Designing Find Work

A behind the scenes look at me building Find Work