Skip to main content

Hiding Content

If you want to hide certain content/elements from your Happo screenshots, you can use the data-happo-hide attribute. Here's an example where a counter element is hidden:

<div>
  You are visitor number
  <div data-happo-hide="">1,289</div>
</div>

By adding the data-happo-hide attribute, the resulting screenshot will not show the element. Under the hood, data-happo-hide simply sets the following CSS:

[data-happo-hide] {
  visibility: hidden;
}

Ignoring instead of hiding​

If you don't want the element to be hidden in the screenshot, you can use the hideBehavior configuration option. Set it to "ignore" to make the element show up in the screenshot, but be ignored when Happo compares the screenshot with another one.

// .happo.js
module.exports = {
  targets: {
    chrome: new RemoteBrowserTarget('chrome', {
      viewport: '1024x768',
      hideBehavior: 'ignore',
    }),
  },
};