resolved comments

Author: Aaryan430

lib/core/utils/dq-element.js

@@ -33,6 +33,39 @@ function escapeCSSSelector(str) {
     .replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, '\\$&')
     .replace(/^\d/, '\\3$& ');
 }
+function generateSelectorWithShadow(elm) {
+  const selectors = getShadowSelector(elm);
+  if (typeof selectors === 'string') {
+    return selectors;
+  } else {
+    // merge selectors of an array with ,
+    return selectors.join(',').replace(/,$/, '');
+  }
+}
+
+function getShadowSelector(elm) {
+  if (!elm) {
+    return '';
+  }
+  let doc = (elm.getRootNode && elm.getRootNode()) || document;
+  // Not a DOCUMENT_FRAGMENT - shadow DOM
+  if (doc.nodeType !== 11) {
+    return getFullPathSelector(elm);
+  }
+
+  const stack = [];
+  while (doc.nodeType === 11) {
+    if (!doc.host) {
+      return '';
+    }
+    stack.unshift({ elm, doc });
+    elm = doc.host;
+    doc = elm.getRootNode();
+  }
+
+  stack.unshift({ elm, doc });
+  return stack.map(item => getFullPathSelector(item.elm));
+}
 
 function getFullPathSelector(elm) {
   if (elm.nodeName === 'HTML' || elm.nodeName === 'BODY') {
@@ -116,8 +149,12 @@ function getSourceOpt(element) {
       .filter(attr => !attr.name.startsWith('data-percy-'))
       .map(attr => `${attr.name}="${attr.value}"`)
       .join(' ');
-
-    result = attributes ? `<${tagName} ${attributes}>` : `<${tagName}>`;
+    const closingTag = element.children.length ? false : true;
+    if (closingTag) {
+      result = `<${tagName} ${attributes}>${element.textContent}</${tagName}>`;
+    } else {
+      result = attributes ? `<${tagName} ${attributes}>` : `<${tagName}>`;
+    }
     result = truncate(result, 300); // Truncate to 300 characters
     // Store in cache
     sourceCache.set(element, result);
@@ -210,9 +247,7 @@ DqElement.prototype = {
    */
   get selector() {
     if (axe._cache.get('runTypeAOpt')) {
-      return (
-        this.spec.selector || [getFullPathSelector(this.element, this._options)]
-      );
+      return this.spec.selector || [generateSelectorWithShadow(this.element)];
     }
     return this.spec.selector || [getSelector(this.element, this._options)];
   },