How to find elements based on computed style

Question

I wanted to find all element having specific font color in my selenium automation project. but as the font color style is not inline it will not be visible in DOM. Is there anyway to find elements based on their computed style? may be using xpath or css or finding such elements using JavaScript?

Answer 1

try this,

const color = 'rgb(255, 0, 0)' // use rgb color codes.
const elements = Array.from(document.body.getElementsByTagName("*"));
const specificFontColoredElements = elements.filter(elm => {
  const style = getComputedStyle(elm)
  return style?.color === color
})
console.log(specificFontColoredElements)

h2 {
  color: red;
}

.greencolor {
  color: green
}

<h2>I'm red</h2>
<p>I do not have user styled color!</p>
<h2 class="greencolor">I'm green</h2>