Lists elements that matched multiple error

Author: jacobparis

src/queries/role.js

@@ -9,6 +9,7 @@ import {
 } from '../role-helpers'
 import {wrapAllByQueryWithSuggestion} from '../query-helpers'
 import {checkContainerType} from '../helpers'
+import {prettyDOM} from '../pretty-dom'
 import {
   buildQueries,
   fuzzyMatches,
@@ -107,8 +108,12 @@ function queryAllByRole(
     })
 }
 
-const getMultipleError = (c, role) =>
-  `Found multiple elements with the role "${role}"`
+const getMultipleError = ({elements}, role) => {
+  const suggestions = elements.map(element => prettyDOM(element)).join('\n')
+
+  return `Found multiple elements with the role "${role}"
+  ${suggestions}`
+}
 
 const getMissingError = (
   container,

src/query-helpers.js

@@ -46,7 +46,7 @@ function makeSingleQuery(allQuery, getMultipleError) {
     const els = allQuery(container, ...args)
     if (els.length > 1) {
       throw getMultipleElementsFoundError(
-        getMultipleError(container, ...args),
+        getMultipleError({container, elements: els}, ...args),
         container,
       )
     }