Add element XPath to result

[rowanmanning]

See discussion in #61. This could be done quite easily in pa11y 2.0, you'd need to get each element's XPath in lib/inject (which run's within PhantomJS). You could use one of the functions in these SO answers:

• How to calculate the XPath position of an element using Javascript?
• Javascript get XPath of a node

[rowanmanning]

@adelevie, opening a new issue for discussions around xpath. This would be really useful

[adelevie]

Potentially dumb question, but how does HTML Code Sniffer know where to place the tooltips when running a sniff?

[rowanmanning]

Each message in HTML CodeSniffer has a reference to a DOM element so I guess it just calculates where to place the tooltip based on it's dimensions and position. I did a bit of investigation into capturing screenshots of these with pa11y but it's a considerable amount of work

[adelevie]

I'd be less interested in screenshots, but would love to get the XPaths or CSS selectors of these elements from pa11y. The end goal is a "flat" HTML page of the rendered test page with the tool tips. I want to make reports linkable, rather than asking folks to install and run the HTML CS bookmarklet.

[adelevie]

See 18F/pulse#195 for some context of my goals.

[rowanmanning]

Ah I see, well I know it'd also be really useful for pa11y-dashboard on our side, so I'll definitely get time to implement something. Do you have a preference for XPath/CSS? If they're simple enough to implement I could add both or make it configurable.

[adelevie]

I don't have a preference--my only goal is to be empowered to create my own HTML tooltips for "static" reports. Whichever element identifier makes that happen is what I want. Let me know if/how I can help with this.

[adelevie]

Here's a (horrible) proof of concept for CSS selectors. In inject.js:

  function fullPath(el){
    var names = [];
    while (el.parentNode){
      if (el.id){
        names.unshift('#'+el.id);
        break;
      }else{
        if (el==el.ownerDocument.documentElement) names.unshift(el.tagName);
        else{
          for (var c=1,e=el;e.previousElementSibling;e=e.previousElementSibling,c++);
          names.unshift(el.tagName+":nth-child("+c+")");
        }
        el=el.parentNode;
      }
    }
    return names.join(" > ");
  }

    function processMessageHtml (element) {
        var outerHTML = null;
        var innerHTML = null;
        if (!element.outerHTML) {
            return outerHTML;
        }
        outerHTML = element.outerHTML;
        if (element.innerHTML.length > 31) {
            innerHTML = element.innerHTML.substr(0, 31) + '...';
            outerHTML = outerHTML.replace(element.innerHTML, innerHTML);
        }
        if (outerHTML.length > 251) {
            outerHTML = outerHTML.substr(0, 250) + '...';
        }

    var css_selector = fullPath(element);

        return outerHTML+" css selector: " + css_selector;
    }

[rowanmanning]

Thanks @adelevie, I might tackle this tomorrow morning or Wednesday as I'm relatively free, I'd quite like to supply both CSS and XPath. Shouldn't be too complicated based on your proof of concept, I can just abstract out the element traversal and then string together XPath or CSS :)

[adelevie]

Great! Can you ensure that these new values are available as separate
attributes? (And not just glommed onto a string like in my example)
On Jun 8, 2015 6:40 PM, "Rowan Manning" notifications@github.com wrote:

Thanks @adelevie https://github.com/adelevie, I might tackle this
tomorrow morning or Wednesday as I'm relatively free, I'd quite like to
supply both CSS and XPath. Shouldn't be too complicated based on your proof
of concept, I can just abstract out the element traversal and then string
together XPath or CSS :)

—
Reply to this email directly or view it on GitHub
#77 (comment).

[rowanmanning]

Yes, I was thinking something like:

{
    code: 'foo',
    message: 'bar',
    context: 'baz',
    type: 'error',
    typeCode: 1,
    selectors: {
        xpath: '/html/body/p[0]',
        css: 'html > body > p:nth-child(1)'
    }
}

[adelevie]

Perfect!
On Jun 9, 2015 4:28 AM, "Rowan Manning" notifications@github.com wrote:

Yes, I was thinking something like:

{
code: 'foo',
message: 'bar',
context: 'baz',
type: 'error',
typeCode: 1,
selectors: {
xpath: '/html/body/p[0]',
css: 'html > body > p:nth-child(1)'
}
}

—
Reply to this email directly or view it on GitHub
#77 (comment).

[rowanmanning]

@adelevie I added the CSS selector in #78, It'd be great if you had time to cast your eyes over it. I might add XPath at some point but it was proving difficult to test. The Format has changed to:

{
    code: 'foo',
    message: 'bar',
    context: 'baz',
    type: 'error',
    typeCode: 1,
    selector: 'html > body > p:nth-child(1)'
}

[rowanmanning]

CSS selector added in #78. Open a new issue if XPath is required later