Unexpected child


  • Full report name: Unexpected child element
  • Status: WARN
  • Related to: component's child elements
  • Summary: found an unexpected child element in a component
  • How to fix: remove the element or update your pattern library

This error occurs when Warhol finds a child element inside a component that is either not supposed to be there or has no similarities at all with what's in the pattern library. Warhol can only check an unexpected child's content for theme conformance, as there is no snapshot to compare this element to.

This error happens when one of the following conditions is met:

  • The parent element does not allow any child elements at all
  • The element's tag is not similar to anything in the pattern library. An <select> can appear where the pattern library only defines <input>, but you can't replace a <table> with an <a>. Note that Warhol does not enforce child element order, so any unexpected child is dissimilar from any candidate snapshot
  • The element's CSS properties do not overlap to at least 1/3 with any snapshot

The most common underlying causes for unexpected children are:

  • Unexpected wrapper elements
  • Misuse of HTML tags in the production web page
  • Incomplete examples in the pattern library
  • Extreme style differences between the pattern library and the production web page

Remove or update the element or update your pattern library to fix this error.

See also #

  • Hybrid child, a similar problem where Warhol is unable to decide which snapshot a child element maps to

Join our Slack Community

Any question not answered yet? You want to get the latest information on Warhol and discuss new features? Join our Slack Community.