How to Verify Text Is Bold Using Selenium on an Angular Website with C#

How to verify bold appearance of a certain field in selenium

You can check the font-weight using the style() method (assuming you are actually using Selenium-Webdriver).

So say you have HTML like:

<body>
<div id='1' style='font-weight:normal'>
<div id='2' style='font-weight:bold'>Field Label</div>
<div id='3'>Field</div>
</div>
</body>

You can do the following to check the font-weight of the field label div (the following is in Ruby, though similar should be possible in the other languages).

el = driver.find_element(:id, "2")
if el.style('font-weight') >= 700
puts 'text is bold'
else
puts 'text is not bold'
end

I want to verify if the word anything is in bold or not

your xpath will be something like this

"//article[1]/div/p[contains(b/text(), 'anything')]"

Why is Selenium is giving me a case insensitive Style attribute?

The style attribute is a special attribute in that its contents must match both the HTML doc specs, but also the CSS doc specs. The HTML doc specs says this of the style tag:

The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces)

This isn't too helpful, until you go read the CSS doc specs, which state:

All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are equivalent), except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML.

Knowing that, we can conclude that as far as the CSS spec is concerned, width=WIDTH. The question remains as to why selenium lower-cases the attribute. Well, turns out that getting an element's CSS is a special case of getAttribute. With the regular getAttribute nothing is really checked, and the raw string value is returned. With the special case of CSS however, there is an extra step of getting the computed value, rather than the raw value. Here is the exact wording:


  1. Let computed value be the result of the first matching condition:
    current browsing context’s document type is not "xml"
    computed value of parameter property name from element’s style declarations.
    property name is obtained from url variables.
    Otherwise
    "" (empty string)

So you can see that the style attribute isn't actually coming straight from the raw text value, rather from the computed value, which is probably lower-casing everything simply because it doesn't matter, and because CSS attributes are usually lowercase. This is also apparent in that there are inserted spaces in your returned text as well (clue that it's getting parsed and re-output). Finally, if you put an invalid CSS property within your style tag, getAttribute will not return it in the string at all!

If you need the value as-is, I have learned through recent experimentation that the javascript version of getAttribute doesn't modify the string text, so I would recommend using the driver's execute_script method for obtaining that.

How to validate multiple error message on page having same locator?

I would get the validation message relative to each INPUT.

//input[@formcontrolname='firstName']//following::div[1]/div
^ starts with the firstName INPUT
^ finds the first DIV that follows
^ and finds the child DIV

This finds the DIV that contains the message, "First Name is required", so you can assert that these two strings are equal.

Similar locator for the second message, the only thing that changes is the formcontrolname.

//input[@formcontrolname='lastName']//following::div[1]/div

GetAttribute in Selenium VBA for style

getAttribute("style") should work but you have to induce a waiter for the element to be present/visible within the HTML DOM.

Debug.Print post.Item(i).getAttribute("style")

Precisely, to extract value of the style attributes from the elements you can use the getCssValue() method as follows:

Debug.Print post.Item(i).getCssValue("z-index")
Debug.Print post.Item(i).getCssValue("top")
Debug.Print post.Item(i).getCssValue("left")
Debug.Print post.Item(i).getCssValue("width")
Debug.Print post.Item(i).getCssValue("height")

getAttribute("innerHTML")

get_attribute("innerHTML") can be used to read the innerHTML or the text within any node / WebElement

You can find a detailed discussion in Difference between text and innerHTML using Selenium


References

You can find a couple of relevant discussions in:

  • How to get child property value of a element property using selenium webdriver, NUnit and C#
  • How can I verify text is bold using selenium on an angular website with C#


Related Topics



Leave a reply



Submit