1 Fetching a Page
driver . Url = "http://www.google.com" ;
2 Locating UI Elements (WebElements)
By ID
This is the most efficient and preferred way to locate an element. Common pitfalls that UI developers make is having non-unique id’s on a page or auto-generating the id, both should be avoided. A class on an html element is more appropriate than an auto-generated id.
Example of how to find an element that looks like this:
<div
id=
"coolestWidgetEvah"
>
...
</div>
IWebElement element = driver . FindElement ( By . Id ( "coolestWidgetEvah" ));
By Class Name
“Class” in this case refers to the attribute on the DOM element. Often in practical use there are many DOM elements with the same class name, thus finding multiple elements becomes the more practical option over finding the first element.
Example of how to find an element that looks like this:
<div class= "cheese" ><span> Cheddar </span></div><div class= "cheese" ><span> Gouda </span></div>
IList < IWebElement > cheeses = driver . FindElements ( By . ClassName ( "cheese" ));
By Tag Name
The DOM Tag Name of the element.
Example of how to find an element that looks like this:
<iframe
src=
"..."
></iframe>
IWebElement
frame
=
driver
.
FindElement
(
By
.
TagName
(
"iframe"
));
By Link Text
Find the link element with matching visible text.
Example of how to find an element that looks like this:
<a
href=
"http://www.google.com/search?q=cheese"
>
cheese
</a>
IWebElement
cheese
=
driver
.
FindElement
(
By
.
LinkText
(
"cheese"
));
By CSS
Like the name implies it is a locator strategy by css. Native browser support is used by default, so please refer to w3c css selectors <http://www.w3.org/TR/CSS/#selectors> for a list of generally available css selectors. If a browser does not have native support for css queries, then Sizzle is used. IE 6,7 and FF3.0 currently use Sizzle as the css query engine.
Beware that not all browsers were created equal, some css that might work in one version may not work in another.
Example of to find the cheese below:
<div
id=
"food"
><span
class=
"dairy"
>
milk
</span><span
class=
"dairy aged"
>
cheese
</span
IWebElement
cheese
=
driver
.
FindElement
(
By
.
CssSelector
(
"#food span.dairy.aged"
));
By XPATH
At a high level, WebDriver uses a browser’s native XPath capabilities wherever possible. On those browsers that don’t have native XPath support, we have provided our own implementation. This can lead to some unexpected behaviour unless you are aware of the differences in the various xpath engines.
| Driver | Tag and Attribute Name | Attribute Values | Native XPath Support |
|---|---|---|---|
| HtmlUnit Driver | Lower-cased | As they appear in the HTML | Yes |
| Internet Explorer Driver | Lower-cased | As they appear in the HTML | No |
| Firefox Driver | Case insensitive | As they appear in the HTML | Yes |
This is a little abstract, so for the following piece of HTML:
<input
type=
"text"
name=
"example"
/>
<INPUT
type=
"text"
name=
"other"
/>
IList
<
IWebElement
>
inputs
=
driver
.
FindElements
(
By
.
XPath
(
"//input"
));
Using JavaScript
You can execute arbitrary javascript to find an element and as long as you return a DOM Element, it will be automatically converted to a WebElement object.
Simple example on a page that has jQuery loaded:
IWebElement
element
=
(
IWebElement
)
((
IJavaScriptExecutor
)
driver
).
ExecuteScript
(
"return $('.cheese')[0]"
);
