When it comes to extracting images from HTML, we usually rely on XPath, CSS selectors, or unique IDs. However, there are cases where images lack any distinguishable attributes. The structure of the HTML is as follows:
<div id="altImages" class="a-fixed-left-grid-col a-col-left" style="width:40px;margin-left:-40px;_margin-left:-20px;float:left;">
<div id="thumbs-image" class="a-hidden" customfunctionname="(function(id, state, onloadFunction){ P.when('A').execute(function(A){ A.trigger('image-block-twister-swatch-click', id, state, onloadFunction); }); });"/>
<ul class="a-nostyle a-button-list a-vertical a-spacing-top-micro">
<li class="a-spacing-small template">
<span class="a-list-item">
<span class="a-declarative" data-thumb-action="{}" data-action="thumb-action">
<span id="a-autoid-10" class="a-button a-button-thumbnail a-button-toggle">
<span class="a-button-inner">
<input class="a-button-input" type="submit" aria-labelledby="a-autoid-10-announce"/>
<span id="a-autoid-10-announce" class="a-button-text" aria-hidden="true">
<span class="placeHolder"/></span>
</span>
</span>
</span>
</span>
</li>
<li class="a-spacing-small item">
<span class="a-list-item">
<span class="a-declarative" data-thumb-action="{"index":"0", "thumbnailIndex":"0", "type": "image", "variant": "MAIN"}" data-action="thumb-action">
<span id="a-autoid-10" class="a-button a-button-thumbnail a-button-toggle">
<span class="a-button-inner">
<input class="a-button-input" type="submit" aria-labelledby="a-autoid-10-announce"/>
<span id="a-autoid-10-announce" class="a-button-text" aria-hidden="true"></span>
</span>
</span>
</span>
</li>
<li class="a-spacing-small item">
<span class="a-list-item">
<span class="a-declarative" data-thumb-action="{"index":"1", "thumbnailIndex":"1", "type": "image", "variant": "PT01"}" data-action="thumb-action">
<span id="a-autoid-10" class="a-button a-button-thumbnail a-button-toggle">
<span class="a-button-inner">
<input class="a-button-input" type="submit" aria-labelledby="a-autoid-10-announce"/>
<span id="a-autoid-10-announce" class="a-button-text" aria-hidden="true"></span>
</span>
</span>
</span>
</li>
<li class="a-spacing-small item">
<span class="a-list-item">
<span class="a-declarative" data-thumb-action="{"index":"2", "thumbnailIndex":"2", "type": "image", "variant": "PT02"}" data-action="thumb-action">
<span id="a-autoid-10" class="a-button a-button-thumbnail a-button-toggle a-button-selected a-button-focus">
<span class="a-button-inner">
<input class="a-button-input" type="submit" aria-labelledby="a-autoid-10-announce"/>
<span id="a-autoid-10-announce" class="a-button-text" aria-hidden="true"></span>
</span>
</span>
</span>
</li>
All elements share the ID id="a-autoid-10-announce". The distinguishing factor among them lies in the snippet
data-thumb-action="{"index":"0", "thumbnailIndex":"0"P.S.
In addition to using findElements and iterating through a list, could the described method serve as an alternative? I'm working with Java and Selenium. The target product can be found at: http://www.amazon.com/dp/B00I8BIBCW.
Thank you!