Skip to content
CodeKruPro

Read a CSS property of an element

Automation taskEasy-MediumAsked in: Accenture, Infosys

"How do you verify that an element's colour or visibility changes?" Read the computed CSS value, the final style after all rules apply (CSS is the language that styles a page). Colours come back in rgba(...) form in Chrome, so compare them in that form or convert them first. Here you read the visibility property of a visible element and of a hidden one.

Get CSS Value with getCssValue()

Get CSS Value

getCssValue() returns the computed CSS property value of an element. Common properties: color, background-color, font-size, visibility, display.

On the Text Messages page:

  • id="plainText" - visible text
  • id="hiddenText" - has visibility: hidden

Task:

  1. Navigate to https://testkru.com/Elements/TextMessages
  2. Get the visibility CSS property of plainText
  3. Get the visibility CSS property of hiddenText

Expected output:

plainText visibility: visible
hiddenText visibility: hidden