2

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.

undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
RShome
  • 489
  • 2
  • 11
  • 35
  • 2
    Possible duplicate of [How to verify bold appearance of a certain field in selenium](https://stackoverflow.com/questions/10100438/how-to-verify-bold-appearance-of-a-certain-field-in-selenium) – Manoj Choudhari Jun 19 '19 at 08:02
  • Not a duplicate, I have tried that link and it doesn't work for me, and I'm using c# – RShome Jun 19 '19 at 08:11
  • @RShome the answer there may be in java but the logic is the same... `if el.style('font-weight') >= 700...` – Moshe Slavin Jun 19 '19 at 08:18
  • I have tried this, but it won't let me GetCSSValue of a string. The text is a string, not an element. so .getcssvalue doesn't work – RShome Jun 19 '19 at 08:26

2 Answers2

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");
undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
  • 1
    How can I getcssvalue of the text at the /p/ level? I want to make the text italic as well and verify but then the HTML becomes – RShome Jun 19 '19 at 08:52
  • @RShome _WebDriverWait_ returns elements. _Css_ is applied on elements not on texts so the innerHTML gets the specific style which you can extract through `GetCssValue()` method. – undetected Selenium Jun 19 '19 at 08:55
  • 1
    Ok I understand, but what if I just wanted to locate some text on a webpage and check if it is bold or not? I.e just text on a page, not within an element? – RShome Jun 19 '19 at 09:16
  • 1
    @RShome Each and every text will definitely be within an element (parent-child node) – undetected Selenium Jun 19 '19 at 09:17
  • 1
    So `el.style('font-weight')` wiil return `""` but `GetCssValue("font-weight")` will return the actual font-weight. – Moshe Slavin Jun 19 '19 at 12:33
  • 1
    @MosheSlavin The key point is to wait for _ElementIsVisible_ so the Css is applied to the element i.e. to the innerHTML – undetected Selenium Jun 19 '19 at 12:35
0

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;
}
  • As per @Maryannah answer, you can set the `font-weight` or you can go with this: https://stackoverflow.com/questions/47412103/how-to-get-text-from-strong-tag-using-xpath – Utkarsh Dubey Jun 19 '19 at 08:23
  • @UtkarshDubey this selects `strong` elements, it doesn't ensure that those elements are in bold font. Big difference. –  Jun 19 '19 at 08:25