How can I verify text is bold using selenium on an angular website with C#

Question

I am trying to verify whether text is bold or not, within a free text area. When I select the element, I cannot verify the text part.

I have tried using .getCSSValues as per the duplicate link suggestion but it doesn't work as it doesn't get the 'text' of that freetext area, which is a string. The freetext area is an element.

IWebElement isBold = _driver.FindElement(By.TagName("p"));
isBold.GetCssValue("font-weight");

But the font weight returns "400" regardless of whether the text is bold or not.

The HTML is

<div class="fr-element fr-view" dir="auto" contenteditable="true" aria-disabled="false" spellcheck="true"><p style=""><strong>TEXT</strong></p></div>

I would expect the selected text to be "700" when it is bold.

Answer 1

strong does NOT mean your text is bold.

It means that your element should be underlined to be seen clearly from the rest of the paragraph.

The fact that it is bold is because of your browser that considers strong elements should be in bold font. I don't know how Selenium works under the hood, but if you have an headless browser, it will not render the styles, thus not make it bold (and that's just one specific case, but they are plenty more)

Same goes for any HTML element : they serve a structure purpose, not a styling purpose :
HTML = structure, CSS = style.

Consider giving all of your strong elements a bold font through

strong {
  font-weight: 700;
}

Answer 2

Seems you were close. You need to consider the following facts:

• As the element is an Angular element so to locate the element you have to induce WebDriverWait for the ElementIsVisible()
• Next you can use the GetCssValue() method to extract the font-weight

• You can use either of the following Locator Strategies :

  • cssSelector :

     new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementIsVisible(By.CssSelector("div.fr-element.fr-view>p>strong"))).GetCssValue("font-weight"); 

  • xpath :

     new WebDriverWait(driver, TimeSpan.FromSeconds(20)).Until(ExpectedConditions.ElementIsVisible(By.XPath("//div[@class='fr-element fr-view']/p/strong[text()='TEXT']"))).GetCssValue("font-weight");