Check for presence/existence of elements

[denilsonsa]

I was watching a certain store page. They have sometimes have discounts when buying multiple products. Those discounts are visible by an image being placed on top of the product image. However, there is no visible/extractable text.

For non-discounted products it has this markup:

<div class="roundel">
  <img class="roundel__img lazyloaded" data-src="" alt="" style="background-image: url(&quot;null&quot;);">
</div>

For discounted products:

<div class="roundel">
  <img class="roundel__img ls-is-cached lazyloaded" data-src="/medias/sys_master/promotion-labels/…/…/…/…/….png" alt="" style="background-image: url(&quot;null&quot;);" src="/medias/sys_master/promotion-labels/…/…/…/…/….png">        
</div>

Since there is no visible text change, there will be no difference. Is there any way to detect this kind of change? If not, can it be implemented? I understand it's tricky to implement this in a user-intuitive way.

[natecovington]

Add "source:" to the beginning of your URL to fetch, it will pull the source code instead of the user content

[denilsonsa]

That could be a solution… But that means I need to write several regexes to ignore the rest of the HTML page. And hope the order of the HTML attributes won't ever change. And hope the amount of whitespace won't change much. And HTML can't be parsed by regexes.

Ideally, I wanted to:

• Watch a page that lists several (related) products at once. (I already have the URL to that page.)
• Watch for price changes. (Easy, as it is simple text.)
• Watch for discounts. (Hard, as mentioned in my question.)

If I use regex to extract the discounts, then extracting product names and prices becomes much harder. I'm gonna try anyway, but I hope something else can be implemented. Maybe allowing extracting attributes from HTML elements. (e.g. use a Selector or XPath to define elements, and extract certain attributes from them.)

Maybe I could execute custom JavaScript on the page… Wait, I can do that with "Browser Steps"!, I'm gonna try.

[denilsonsa]

Hmm, I can use Run JavaScript before change detection. Then I can add:

Array.from(document.querySelectorAll(".roundel__img")).map(el => el.after(document.createTextNode(el.dataset.src)));

That seems to work.

I tried Browser Steps, but it didn't work because it didn't send the custom HTTP header (with a custom User Agent) I had set.