How to find elements based on computed style

user_2964934 0
Viewed 31

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?

relative-locators computed-style css-selectors xpath javascript
1 Answers

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>

user_150846450
Related