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 StylesAbout 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/testcomplete15/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/testcomplete15/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/testcomplete15/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/testcomplete15/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
Classic Web Testing
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