css - 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

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");