Applies to TestComplete 14.10, last modified on June 5, 2019

When testing web applications, you may need to verify display styles of elements on web pages. This topic provides an overview of style types and explains how to read style attributes in tests, with both browser-specific and cross-browser examples.

About Inline and Computed Styles

A web element’s style can be set in multiple ways: using the element’s style attribute and other style attributes such as align and bgcolor, using HTML elements such as I, B, FONT and others, in embedded and external stylesheets and so on. When talking about styles, it is important to differentiate between inline and computed styles.

Styles that are set directly on the element using its style attribute are called inline styles. These styles affect only the element that they are applied to. Inline styles do not include styles defined in stylesheets and inherited from parent elements. Below are examples of inline styles set in the HTML code and in scripts:

HTML

<p style="font-size: 12pt; color: red;">Red text.</p>

HTML, JavaScript

<script>
var p = document.getElementById("p1");
p.style.fontSize = "12pt";
p.style.color = "red";
</script>

The actual final style of an element after all CSS rules have been applied is called computed style. Computed style is a complete set of styles that apply to an element from various sources, including inline styles, embedded and external stylesheets, styles inherited from parent elements and so on. Computed style includes values for all style properties, even those that are not directly defined in the element and stylesheets; these unused style properties have default values.

Consider the following web page:

HTML

<html>
<head>
<style>
body {
  font-size: 12pt;
}
p {
  color: red;
}

</style>
</head>

<body>
  <p style="font-style: italic;">Red italic text.</p>
</body>
</html>

Here the final computed style for the paragraph includes italic font style defined inline within the element, font color defined in the CSS rule for the p elements and font size inherited from the parent body element.

Usually you would need to get and verify computed styles because they represent the actual final style of web page elements. However, below we will give examples for both inline and computed styles.

Getting Inline Styles

To get a web element’s inline style, use its native style property. Individual style attributes are accessible as subproperties of the returned object. For example:

JavaScript, JScript

obj.style.color

Python

obj.style.color

VBScript

obj.style.color

DelphiScript

obj.style.color

C++Script, C#Script

obj["style"]["color"]

Note: For multi-word properties, use camelCase instead of hyphenated names. For example, use fontSize, backgroundColor and borderLeftWidth instead of font-size, background-color and border-left-width.

Below is a sample script that demonstrates how to get a web element’s inline style.

JavaScript, JScript

function Test()
{
  var url = "https://services.smartbear.com/samples/testcomplete14/weborders/login.aspx";

  Browsers.Item(btIExplorer).Run(url);
  var page = Sys.Browser().Page(url);
  var infoBox = page.FindChildByXPath("//p[@class='info'][last()]");

  Log.Message(infoBox.style.textAlign);
}

Python

def Test():
  url = "http://support.smartbear.com/samples/testcomplete14/weborders/login.aspx";

  Browsers.Item[btIExplorer].Run(url);
  page = Sys.Browser().Page(url);
  infoBox = page.FindChildByXPath("//p[@class='info'][last()]");

  Log.Message(infoBox.style.textAlign);

VBScript

Sub Test
  Dim page, url, infoBox
  url = "https://services.smartbear.com/samples/testcomplete14/weborders/login.aspx"

  Browsers.Item(btIExplorer).Run url
  Set page = Sys.Browser.Page(url)
  Set infoBox = page.FindChildByXPath("//p[@class='info'][last()]")

  Log.Message infoBox.style.textAlign
End Sub

DelphiScript

procedure Test;
var url, page, infoBox;
begin
  url := 'https://services.smartbear.com/samples/testcomplete14/weborders/login.aspx';

  Browsers.Item(btIExplorer).Run(url);
  page := Sys.Browser.Page(url);
  infoBox := page.FindChildByXPath('//p[@class="info"][last()]');

  Log.Message(infoBox.style.textAlign);
end;

C++Script, C#Script

function Test()
{
  var url = "https://services.smartbear.com/samples/testcomplete14/weborders/login.aspx";

  Browsers["Item"](btIExplorer)["Run"](url);
  var page = Sys["Browser"]()["Page"](url);
  var infoBox = page["FindChildByXPath"]("//p[@class='info'][last()]");

  Log["Message"](infoBox["style"]["textAlign"]);
}

Getting Computed Styles

In most browsers, you can get an object’s computed style by using the native defaultView.getComputedStyle method of the DOM document object. This method takes a web page element as a parameter and returns an object holding the element’s style attributes. Then you can access individual style attributes as subproperties of the returned object.

Below is an example of using the getComputedStyle method:

JavaScript, JScript

var element = page.Panel(0).TextBox(0);  // Obtain the web element
var style = page.contentDocument.defaultView.getComputedStyle(element, "");
Log.Message(style.fontSize);

Python

element = page.Panel(0).TextBox(0);  # Obtain the web element
style = page.contentDocument.defaultView.getComputedStyle(element, "");
Log.Message(style.fontSize);

VBScript

Set element = page.Panel(0).TextBox(0)  ' Obtain the web element
Set style = page.contentDocument.defaultView.getComputedStyle(element, "")
Log.Message style.fontSize

DelphiScript

procedure Test;
var page, element, style;
begin
  …
  element := page.Panel(0).TextBox(0);  // Obtain the web element
  style := page.contentDocument.defaultView.getComputedStyle(element, '');
  Log.Message(style.fontSize);
  …
end;

C++Script, C#Script

var element = page["Panel"](0)["TextBox"](0);  // Obtain the web element
var style = page["contentDocument"]["defaultView"]["getComputedStyle"](element, "");
Log["Message"](style["fontSize"]);

Remarks

Different browsers can report style property values in different formats. For example, Internet Explorer can report colors as #ff0000 whereas Firefox and Chrome will report them as rgb(255, 0, 0). You should take that into account and design your tests and verifications accordingly. For more information, see Handling Browser Differences.

See Also

Testing Web Applications
Web Testing - Examples
Checking for Mailto Links
Checking if a Page Contains Specific Text
Checking Image Size Specifications
Checking the Images' ALT Attribute
Validating Web Pages With TestComplete

Highlight search results