I have a table with multiple divs inside it, many of which are identical except for their background colors! Is there a way to select a specific div based solely on its background color? Here is an example of the HTML structure:
<div class="fc-event fc-event-hori fc-event-draggable fc-event-start fc-event-end ui-draggable" style="position: absolute; left: 3px; background-color: rgb(255, 92, 51); border-color: rgb(255, 92, 51); width: 160px; top: 469px; -moz-user-select: none;" unselectable="on">
<div class="fc-event-inner">
<span class="fc-event-title">My Event</span>
</div>
<div class="ui-resizable-handle ui-resizable-e"/>
</div>
Although they look the same, the RGB values differ.
A basic XPATH that directly targets it is as follows: -
.//*[@id='calendar']/div/div/div/div[5]/div[1]
To select all elements containing "My Event", modify it as shown below:
.//*[@id='calendar']/div/div/div/div/div/*[text()='My Event']/..
When attempting to select one based on a specific style setting, I've encountered issues. Any suggestions on how to properly include the style portion would be greatly appreciated...
.//*[@id='calendar']/div/div/div/div[@style="background-color: rgb(255, 92, 51)"]
Even when trying to highlight elements with the correct style across the entire page, using the following approach, it still doesn't work...
.//*[@style="background-color: rgb(255, 92, 51)"]