Discover

the automating power of Selenium

Presented by:

Faisal

3
Selenium IDE Test Runner

Discover the automating power of Selenium

Selenium IDE Test Runner

Open a Test Suite

Discover the automating power of Selenium

Selenium IDE Test Runner

Click Play with Selenium TestRunner

Discover the automating power of Selenium

Selenium IDE Test Runner

Current Test Suite
Chrome Protocol

Application Under Test

Click to run Test Suite

You Can click here to view individual the test cases

Selenium IDE Test Runner

Result of the Test

Failed Test Cases Selenium TestRUnner Control Panel Click to view the DOM of AUT

To view the Log click here

Selenium IDE Test Runner

Click + or to expand/collapse

HTML DOM View

What is DOM? The Document Object Model (DOM) is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. "Dynamic HTML" is a term used by some vendors to describe the combination of HTML, style sheets and scripts (JavaScript) that allows documents to be animated. The DOM presents an HTML document as a tree-structure (a node tree), with elements, attributes, and text. The HTML DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them.
8

DOM Representation

#2

The HTML DOM is a standard for how to get, change, add, delete and traverse HTML elements using Scripts.

DOM Nodes

#3

Nodes According to the DOM, everything in an HTML document is a node. The DOM means:
The entire document is a document node Every HTML tag is an element node The text in the HTML elements are text nodes Every HTML attribute is an attribute node Comments are comment nodes In a node tree, the top node is called the root Every node, except the root, has exactly one parent node A node can have any number of children A leaf is a node with no children Siblings are nodes with the same parent
10

Relationship

DOM Inspector

#4

You can use DOM Inspector Addon for Inspecting any HTML elements within the firefox browser In the firefox address bar type: http://www.google.com Select Tools DOM Inspector Press the Inspect button You can navigate to any of the elements (click on the links) You will see an associated X-Path (Example) /html/body/center/p/font/text() Press Eval button, it will open the Xpather Add-on and show you the Xpath evolution result.

11

DOM Inspector
Eval Opens Xpather and shows the result Click here to Inspect

Look at the element the Xpath Currently Pointing to

12

DOM Xpather
In Xpather, you can right click and Blink the node which shows the element in DOM Inspector

Look at the element the Xpath Currently Pointing to

13