Introduction


Covers the cases where xpaths are not matching and therefore taglists or other highlights are not shown in a google testing tool. Note we will assume the use of Google Chrome, however Firefox is very similar. 


Initial Tests


One of the first tests is to see if the JSON-LD is deploying, best way to to do this is go to the page in Chrome and open the inspect ([CTRL|CMD]+ALT+C) and in the elements tab search for ld+json and see if there is markup with the same schema type that you have specified in the highlighter. 



If there is no markup check the following (by no markup I mean none what-so-ever):


1. Template is published and sufficient time has been given for the template to deploy (5-10 minutes)

2. The XPath or URL matches the page you are testing in the Patterns

3. highlight.js is present on the page (should see it in sources tab under cdn.schemaapp.com)

4. highlight.js is present in RRT or SDTT in the rendered html


If all of the above are true there is good likely hood this is a bug and a ticket should be logged. 



My XPath isn't matching!!


The first step is to point and yell at the machine, it's clearly that evil computer's fault and intimidation is the best policy. If that doesn't work it's time to look at xpaths within Chrome. Pop open the same inspect panel ([CTRL|CMD]+ALT+C). With this panel you can see the structure of the page as it is rendered. It's likely that with active JS some of the document has mutated and the XPath won't match. 


The easiest thing to do is with your cursor find the element on the page (I use find and just start typing text. When you hover elements they highlight in the browser as well), right click and select copy XPath. This is a good starting place. 



How to BECOME the highlighter.js


Imagine you are non-judgemental code that does what it is told -- No, it doesn't know what you meant. The highlighter js runs the following command to evaluate XPaths that you can you also enter in the console to confirm it matches what expect you it to. 


var res = document.evaluate('[XPATH HERE]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);



An real example from: https://www.greenroadsworld.com/collections/cbd-oil-pets/


var res = document.evaluate('//div[@class="w-tabs-sections-h"]/div', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);



Now you can check a few things, if type type 'res' and hit enter it will give you a preview of the result:


XPathResult {resultType: 7, invalidIteratorState: false, snapshotLength: 8}



The snapshotLength being greater than 0 means we found the goods! If it's 0, the xpath did not resolve. 


To view the items that were found you can call the following function: 


res.snapshotItem(0);


Outputs:


<div class="w-tabs-section" id="1520500634883-8d5b1a32-a91a"><a href="#1520500634883-8d5b1a32-a91a" class="w-tabs-section-header"><div class="w-tabs-section-header-h"><h3 class="w-tabs-section-title">How is the CBD we give our pets different than the CBD humans take?</h3><div class="w-tabs-section-control"></div></div></a><div class="w-tabs-section-content" style="display: none;"><div class="w-tabs-section-content-h i-cf">

    <div class="wpb_text_column ">

        <div class="wpb_wrapper">

            <p>The CBD is the same. However, the concentrations and other ingredients aside from CBD are different. Green Roads pet formulas are blended with MCT oil, which is easy for your pet to digest. The pet formulas have CBD concentrations that are more appropriate to the size of your pet’s body.</p>



        </div>

    </div>

</div></div></div>



If you want to deploy just text you can append /text() to the end of your xpath. Also note that if the snapshotLength is greater than 1, all of the matches will be joined together as a single value so be sure that's what you want to appear. To see the next item, just add 1 to the number passed in i.e.


res.snapshotItem(1);
res.snapshotItem(2);
res.snapshotItem(3);
...




Tag List Highlights


Tag lists highlights issue the same basic command as above but it uses the results of another xpath as the context to search for the next path. In the example above we used `document` which means the entire page. Using the same example above it will iterate through all 8 elements and try to resolve the tag list highlights for each of those 8 results. 


var res = document.evaluate('//div[@class="w-tabs-sections-h"]/div', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);

var tagListHighlight = document.evaluate('.//p', res.snapshotItem(0), null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE);

tagListHighlight.snapshotItem(0);



It will repeat this same code for all 8 items that exist in res as above in a loop and for each of those 8 elements it will create a separate object that all tag list highlights attach to, results from these are considered independent from each other so if the structure varies between the 8 results you may not get all xpaths matching for each tag list item. 


This is the actual data that is found via that xpath, if snapshot item does not appear look at the HTML and see if the structure differs from your XPath. 


<p>The CBD is the same. However, the concentrations and other ingredients aside from CBD are different. Green Roads pet formulas are blended with MCT oil, which is easy for your pet to digest. The pet formulas have CBD concentrations that are more appropriate to the size of your pet’s body.</p>



This is a trial and error process but will allow you to determine and test your xpaths the same way the highlighter does so you can be more sure that your fix will work the first time. 


Now my Tag List is deploying but some of them are missing stuff and things


This is common when the items selected by the taglist xpath contain subtle differences, if this is the case i like to try and use relative xpaths where I can so I will find a class that is common, or maybe there is only one paragraph tag, or header. 


<div class="w-tabs-section" id="1520500634883-8d5b1a32-a91a"><a href="#1520500634883-8d5b1a32-a91a" class="w-tabs-section-header"><div class="w-tabs-section-header-h"><h3 class="w-tabs-section-title">How is the CBD we give our pets different than the CBD humans take?</h3><div class="w-tabs-section-control"></div></div></a><div class="w-tabs-section-content" style="display: none;"><div class="w-tabs-section-content-h i-cf">

    <div class="wpb_text_column ">

        <div class="wpb_wrapper">

            <p>The CBD is the same. However, the concentrations and other ingredients aside from CBD are different. Green Roads pet formulas are blended with MCT oil, which is easy for your pet to digest. The pet formulas have CBD concentrations that are more appropriate to the size of your pet’s body.</p>



        </div>

    </div>

</div></div></div>



vs


<div class="w-tabs-section" id="1520500634883-8d5b1a32-a91a"><a href="#1520500634883-8d5b1a32-a91a" class="w-tabs-section-header"><div class="w-tabs-section-header-h"><h3 class="w-tabs-section-title">How is the CBD we give our pets different than the CBD humans take?</h3><div class="w-tabs-section-control"></div></div></a><div class="w-tabs-section-content" style="display: none;"><div class="w-tabs-section-content-h i-cf">

    <div class="wpb_text_column ">

        <a href="#"> <!-- LINK is different here -->

            <p>The CBD is the same. However, the concentrations and other ingredients aside from CBD are different. Green Roads pet formulas are blended with MCT oil, which is easy for your pet to digest. The pet formulas have CBD concentrations that are more appropriate to the size of your pet’s body.</p>



        </a>

    </div>

</div></div></div>



So if the previous xpath was `div/div/div/p` it would not match the second example, however we really only the paragraph anyway so I will write an xpath like the following: 


.//p -- Skip the other nonsense and get me the paragraph!



The '.' means start from this context and we need that because tag lists are very dependent on the context, // means anything in between, and p is what we want. If the structure varies a lot the site is evil but you can start to string together xpaths by doing the following `( div/div/p | div/a/p )` this will let the highlighter try multiple options to select an item. I generally find it's rare to have to do this and if you do it gets complicated real fast so I exhaust all other options first.