selenium-webdriver.html

<script type="text/x-red" data-template-name="open-web">
	<div class="form-row">
		<label for="node-input-server"><i class="fa fa-globe"></i> <span>Server</span></label>
		<input type="text" id="node-input-server">
	</div>
	<div class="form-row">
		<label for="node-input-name"><i class="fa fa-globe"></i> <span>Name</span></label>
		<input type="text" id="node-input-name">
	</div>
	<div class="form-row">
        <label for="node-input-browser"><i class="fa fa-empire"></i> <span>Browser</span></label>
        <select id="node-input-browser" style="width:125px !important">
            <option value="chrome">Chrome</option>
            <option value="firefox">Firefox</option>
            <option value="safari">Safari</option>
            <option value="opera">Opera</option>
            <option value="ie">IE</option>
        </select>
    </div>
	<div class="form-row">
		<label for="node-input-weburl"><i class="fa fa-empire"></i> <span>Web URL</span></label>
		<input type="text" id="node-input-weburl">
	</div>
	<div class="form-row">
		<label for="node-input-width"><i class="fa fa-empire"></i> <span>Width</span></label>
		<input type="text" id="node-input-width" value="1024">
	</div>
	<div class="form-row">
		<label for="node-input-height"><i class="fa fa-empire"></i> <span>Height</span></label>
		<input type="text" id="node-input-height" value="768">
	</div>
	<div class="form-row">
		<label for="node-input-webtitle"><i class="fa fa-empire"></i> <span>Web Title</span></label>
		<input type="text" id="node-input-webtitle">
	</div>
	<div class="form-row">
		<label for="node-input-timeout"><i class="fa fa-empire"></i> <span>Timeout</span></label>
		<input type="text" id="node-input-timeout" value="1000">
	</div>
	<div class="form-row">
		<input type="checkbox" id="node-input-maximized" checked style="display: inline-block; width: auto; vertical-align: top;">
		<label for="node-input-maximized" style="width: auto;">Maximize window</label>
	</div>
</script>

<script type="text/x-red" data-help-name="open-web">
	<p>Create an instance of selenium webdriver and connect to the Selenium Server when an event is triggered.</p>
	<strong>Inputs:</strong>
	<p><ul>
	    <li><a>Browser</a>: specify the selenium node which support the web browser you wan tot test such as [Chrome, Firefox etc.,]</li>
		<li><a>Server</a>: specify the selenium server configuration. It could be localhost or remote Selenium Server.</li>
		<li><a>Web URL</a>: specify the web page to start browsing the targeted application for your test.</li>
		<li><a>Web Title</a>: specify the expected title to compare if set. Otherwise this node will bypass the sanity check operation.</li>
		<li><a>Timeout</a>: specify the timeout during lookup for the title operation.</li>
	</ul></p>
	<strong>Outputs:</strong>
	<p><code>msg.error</code> When the title is unexpected or cannot find element, this node generates the error with detail information</p>
	<p><code>msg.driver</code> Always pass webdriver object to the next node for ad-hoc function code.</p>
	<p><code>msg.element</code> If the element is found, it will be passed though the msg object to the next node.</p>
	<p><code>msg.payload</code> contains the title of the opened web page. This payload value will be used to compare with the expected Web Title value if that value is set.</p>
</script>

<script type="text/javascript">
	RED.nodes.registerType('open-web', {
		category : 'selenium',
		defaults : {
			name : {
				value : ""
			},
            browser : {
                value : "chrome",
                required : true
            },
			weburl : {
				value : "https://www.google.com/",
				required : true
			},
			width : {
				value : 1024,
				validate : RED.validators.number()
			},
			height : {
				value : 768,
				validate : RED.validators.number()
			},
			webtitle : {
				value : "Google"
			},
			timeout : {
				value : 3000,
				required : true,
				validate : RED.validators.number()
			},
			maximized : {
				value : true,
				required : true
			},
			server : {
				type : "selenium-server",
				required : true
			}
		},
		color : "#d8bfd8",
		inputs : 1,
		outputs : 1,
		icon : "white-globe.png",
		label : function() {
			return this.name || this.topic || "Open URL";
		},
		labelStyle : function() {
			return this.name ? "node_label_italic" : "";
		}
	}); 
</script>

<script type="text/x-red" data-template-name="close-web">
	<div class="form-row">
		<label for="node-input-name"><i class="fa fa-globe"></i> <span>Name</span></label>
		<input type="text" id="node-input-name">
	</div>
	<div class="form-row">
		<label for="node-input-waitfor"><i class="fa fa-empire"></i> <span>Wait For</span></label>
		<input type="text" id="node-input-waitfor" value="00">
	</div>
</script>

<script type="text/x-red" data-help-name="close-web">
	<p>Close the web browser which is openned by the open-web node and finalize the selenium session.</p>
</script>

<script type="text/javascript">
	RED.nodes.registerType('close-web', {
		category : 'selenium',
		defaults : {
			name : {
				value : ""
			}, 
			waitfor : {
				value : 500,
				validate : RED.validators.number()
			}
		},
		color : "#d8bfd8",
		inputs : 1,
		outputs : 1,
		icon : "white-globe.png",
		label : function() {
			return this.name || "Close";
		},
		labelStyle : function() {
			return this.name ? "node_label_italic" : "";
		}
	}); 
</script>

<script type="text/x-red" data-template-name="find-object">
	<div class="form-row">
		<label for="node-input-name"><i class="fa fa-globe"></i> <span>Name</span></label>
		<input type="text" id="node-input-name">
	</div>
	<div class="form-row">
		<label for="node-input-selector"><i class="fa fa-empire"></i> <span>By</span></label>
		<select id="node-input-selector" style="width:125px !important">
			<option value="id">id</option>
			<option value="name">name</option>
			<option value="link">link</option>
			<option value="xpath">xpath</option>
			<option value="tagName">tagName</option>
			<option value="className">className</option>
			<option value="linkText">linkText</option>
			<option value="cssSelector">cssSelector</option>
		</select>
	</div>
	<div class="form-row">
		<label for="node-input-target"><i class="fa fa-empire"></i> <span>Target</span></label>
		<input type="text" id="node-input-target">
	</div>
	<div class="form-row">
		<label for="node-input-timeout"><i class="fa fa-empire"></i> <span>Timeout</span></label>
		<input type="text" id="node-input-timeout" value="1000">
	</div>
	<div class="form-row">
		<label for="node-input-waitfor"><i class="fa fa-empire"></i> <span>Wait For</span></label>
		<input type="text" id="node-input-waitfor" value="00">
	</div>
</script>

<script type="text/x-red" data-help-name="find-object">
	<p>Find an object or element by using selenium webdriver <code>findElement()</code>.</p>
	<strong>Inputs:</strong>
	<p><ul>
		<li><a>By</a>: specify the way to find an element by selector. The <code>msg.selector</code> will override the <code>By</code> field if set.</li>
		<li><a>Target</a>: specify the selector's value to lookup. The<code>msg.target</code> will override the <code>Target</code> field if set.</li>
		<li><a>Timeout</a>: specify the timeout during lookup operation. The <code>msg.timeout</code> will override the <code>Timeout</code> field if set.</li>
		<li><a>Wait For</a>: specify the time to wait before looing up. The <code>msg.waitfor</code> will override the <code>Wait For</code> field if set.</li>
	</ul></p>
	<strong>Outputs:</strong>
	<p><code>msg.error</code> When the object is unexpected or cannot find element, this node generates the error with detail information</p>
	<p><code>msg.element</code> If the element is found, it will be passed though the msg object to the next node.</p>
</script>

<script type="text/javascript">
	RED.nodes.registerType('find-object', {
		category : 'selenium',
		defaults : {
			name : {
				value : ""
			},
			selector : {
				value : "",
				required : true
			},
			target : {
				value : "",
				required : true
			},
			timeout : {
				value : 1000,
				required : true,
				validate : RED.validators.number()
			}, 
			waitfor : {
				value : 500,
				validate : RED.validators.number()
			}
		},
		color : "#d8bfd8",
		inputs : 1,
		outputs : 1,
		icon : "debug.png",
		label : function() {
			return this.name || "Find Element";
		},
		labelStyle : function() {
			return this.name ? "node_label_italic" : "";
		}
	}); 
</script>

<script type="text/x-red" data-template-name="send-keys">
	<div class="form-row">
		<label for="node-input-name"><i class="fa fa-globe"></i> <span>Name</span></label>
		<input type="text" id="node-input-name">
	</div>
	<div class="form-row">
		<label for="node-input-text"><i class="fa fa-empire"></i> <span>Value</span></label>
		<input type="text" id="node-input-text">
	</div>
	<div class="form-row">
		<label for="node-input-selector"><i class="fa fa-empire"></i> <span>By</span></label>
		<select id="node-input-selector" style="width:125px !important">
			<option value="id">id</option>
			<option value="name">name</option>
			<option value="link">link</option>
			<option value="xpath">xpath</option>
			<option value="tagName">tagName</option>
			<option value="className">className</option>
			<option value="linkText">linkText</option>
			<option value="cssSelector">cssSelector</option>
		</select>
	</div>
	<div class="form-row">
		<label for="node-input-target"><i class="fa fa-empire"></i> <span>Target</span></label>
		<input type="text" id="node-input-target">
	</div>
	<div class="form-row">
		<label for="node-input-timeout"><i class="fa fa-empire"></i> <span>Timeout</span></label>
		<input type="text" id="node-input-timeout" value="1000">
	</div>
	<div class="form-row">
		<label for="node-input-waitfor"><i class="fa fa-empire"></i> <span>Wait For</span></label>
		<input type="text" id="node-input-waitfor" value="00">
	</div>
	<div class="form-row">		
		<input type="checkbox" id="node-input-clearval" value="false" style="display: inline-block; width: auto; vertical-align: top;">
		<label for="node-input-clearval" style="width: 70%"> <span>Clear the element value before sending the keys.</span></label>
	</div>
</script>

<script type="text/x-red" data-help-name="send-keys">
	<p>Send keyboard keys to the <code>msg.element</code> from previous node or after waiting for the expected element is located.</p>
	<strong>Inputs:</strong>
	<p><ul>
		<li><a>Value</a>: specify the value to get. The <code>msg.value</code> will override the <code>Value</code> field if set.</li>
		<li><a>By</a>: specify the way to find an element by selector. The <code>msg.selector</code> will override the <code>By</code> field if set.</li>
		<li><a>Target</a>: specify the selector's value to lookup. The<code>msg.target</code> will override the <code>Target</code> field if set.</li>
		<li><a>Timeout</a>: specify the timeout during lookup operation. The <code>msg.timeout</code> will override the <code>Timeout</code> field if set.</li>
		<li><a>Wait For</a>: specify the time to wait before looing up. The <code>msg.waitfor</code> will override the <code>Wait For</code> field if set.</li>
	</ul></p>	
	<strong>Outputs:</strong>
	<p><code>msg.error</code> When the object is unexpected or cannot find element, this node generates the error with detail information</p>
	<p><code>msg.element</code> If the element is found, it will be passed though the msg object to the next node.</p>
</script>

<script type="text/javascript">
	RED.nodes.registerType('send-keys', {
		category : 'selenium',
		defaults : {
			name : {
				value : ""
			},
			text : {
				value : ""
			},
			selector : {
				value : ""
			},
			target : {
				value : ""
			},
			timeout : {
				value : 1000,
				validate : RED.validators.number()
			},
			waitfor : {
				value : 500,
				validate : RED.validators.number()
			},
			clearval : {
				value : false
			}
		},
		color : "#d8bfd8",
		inputs : 1,
		outputs : 1,
		icon : "debug.png",
		label : function() {
			return this.name || "Send Keys";
		},
		labelStyle : function() {
			return this.name ? "node_label_italic" : "";
		}
	}); 
</script>

<script type="text/x-red" data-template-name="click-on">
	<div class="form-row">
		<label for="node-input-name"><i class="fa fa-globe"></i> <span>Name</span></label>
		<input type="text" id="node-input-name">
	</div>
	<div class="form-row">
		<label for="node-input-selector"><i class="fa fa-empire"></i> <span>By</span></label>
		<select id="node-input-selector" style="width:125px !important">
			<option value="id">id</option>
			<option value="name">name</option>
			<option value="link">link</option>
			<option value="xpath">xpath</option>
			<option value="tagName">tagName</option>
			<option value="className">className</option>
			<option value="linkText">linkText</option>
			<option value="cssSelector">cssSelector</option>
		</select>
	</div>
	<div class="form-row">
		<label for="node-input-target"><i class="fa fa-empire"></i> <span>Target</span></label>
		<input type="text" id="node-input-target">
	</div>
	<div class="form-row">
		<label for="node-input-timeout"><i class="fa fa-empire"></i> <span>Timeout</span></label>
		<input type="text" id="node-input-timeout" value="1000">
	</div>
	<div class="form-row">
		<label for="node-input-waitfor"><i class="fa fa-empire"></i> <span>Wait For</span></label>
		<input type="text" id="node-input-waitfor" value="00">
	</div>
	<div class="form-row">		
		<input type="checkbox" id="node-input-clickon" style="display: inline-block; width: auto; vertical-align: top;">
		<label for="node-input-clickon" style="width: 70%"> <span>Require manual approval on click to continue</span></label>
	</div>
</script>

<script type="text/x-red" data-help-name="click-on">
	<p>Click on the <code>msg.element</code> which is passed by previous node or after waiting for the expected element is located.</p>
	<strong>Inputs:</strong>
	<p><ul>
		<li><a>By</a>: specify the way to find an element by selector. The <code>msg.selector</code> will override the <code>By</code> field if set.</li>
		<li><a>Target</a>: specify the selector's value to lookup. The<code>msg.target</code> will override the <code>Target</code> field if set.</li>
		<li><a>Timeout</a>: specify the timeout during lookup operation. The <code>msg.timeout</code> will override the <code>Timeout</code> field if set.</li>
		<li><a>Wait For</a>: specify the time to wait before looing up. The <code>msg.waitfor</code> will override the <code>Wait For</code> field if set.</li>
	</ul></p>	
	<strong>Outputs:</strong>
	<p><code>msg.error</code> When the object is unexpected or cannot find element, this node generates the error with detail information</p>
	<p><code>msg.element</code> If the element is found, it will be passed though the msg object to the next node.</p>
</script>

<script type="text/javascript">
	RED.nodes.registerType('click-on', {
		category : 'selenium',
		defaults : {
			name : {
				value : ""
			},
			selector : {
				value : ""
			},
			target : {
				value : ""
			},
			timeout : {
				value : 1000,
				validate : RED.validators.number()
			}, 
			waitfor : {
				value : 500,
				validate : RED.validators.number()
			},
			clickon : {
				value : false
			}
		},
		color : "#d8bfd8",
		inputs : 1,
		outputs : 1,
		icon : "debug.png",
		label : function() {
			return this.name || "Click On";
		},
		labelStyle : function() {
			return this.name ? "node_label_italic" : "";
		},
		button: {			
            onclick: function() {
                var node = this;
                $.ajax({
                    url: "onclick/" + this.id,
                    type:"POST",
                    success: function(resp) {
                        RED.notify(node._("inject.success",{ label:label }),"success");
                    },
                    error: function(jqXHR,textStatus,errorThrown) {
                        if (jqXHR.status == 404) {
                            RED.notify(node._("common.notification.error",{message:node._("common.notification.errors.not-deployed")}),"error");
                        } else if (jqXHR.status == 500) {
                            RED.notify(node._("common.notification.error",{message:node._("inject.errors.failed")}),"error");
                        } else if (jqXHR.status == 0) {
                            RED.notify(node._("common.notification.error",{message:node._("common.notification.errors.no-response")}),"error");
                        } else {
                            RED.notify(node._("common.notification.error",{message:node._("common.notification.errors.unexpected",{status:jqXHR.status,message:textStatus})}),"error");
                        }
                    }
                });
            }
        }
	}); 
</script>

<script type="text/x-red" data-template-name="set-value">
	<div class="form-row">
		<label for="node-input-name"><i class="fa fa-globe"></i> <span>Name</span></label>
		<input type="text" id="node-input-name">
	</div>
	<div class="form-row">
		<label for="node-input-text"><i class="fa fa-empire"></i> <span>Value</span></label>
		<input type="text" id="node-input-text">
	</div>
	<div class="form-row">
		<label for="node-input-selector"><i class="fa fa-empire"></i> <span>By</span></label>
		<select id="node-input-selector" style="width:125px !important">
			<option value="id">id</option>
			<option value="name">name</option>
			<option value="link">link</option>
			<option value="xpath">xpath</option>
			<option value="tagName">tagName</option>
			<option value="className">className</option>
			<option value="linkText">linkText</option>
			<option value="cssSelector">cssSelector</option>
		</select>
	</div>
	<div class="form-row">
		<label for="node-input-target"><i class="fa fa-empire"></i> <span>Target</span></label>
		<input type="text" id="node-input-target">
	</div>
	<div class="form-row">
		<label for="node-input-timeout"><i class="fa fa-empire"></i> <span>Timeout</span></label>
		<input type="text" id="node-input-timeout" value="1000">
	</div>
	<div class="form-row">
		<label for="node-input-waitfor"><i class="fa fa-empire"></i> <span>Wait For</span></label>
		<input type="text" id="node-input-waitfor" value="00">
	</div>
</script>

<script type="text/x-red" data-help-name="set-value">
	<p>Set a value to the <code>value</code> attribute of the <code>msg.element</code> or after waiting for the expected element is located.</p>
	<strong>Inputs:</strong>
	<p><ul>
		<li><a>Value</a>: specify the value to get. The <code>msg.value</code> will override the <code>Value</code> field if set.</li>
		<li><a>By</a>: specify the way to find an element by selector. The <code>msg.selector</code> will override the <code>By</code> field if set.</li>
		<li><a>Target</a>: specify the selector's value to lookup. The<code>msg.target</code> will override the <code>Target</code> field if set.</li>
		<li><a>Timeout</a>: specify the timeout during lookup operation. The <code>msg.timeout</code> will override the <code>Timeout</code> field if set.</li>
		<li><a>Wait For</a>: specify the time to wait before looing up. The <code>msg.waitfor</code> will override the <code>Wait For</code> field if set.</li>
	</ul></p>	
	<strong>Outputs:</strong>
	<p><code>msg.error</code> When the object is unexpected or cannot find element, this node generates the error with detail information</p>
	<p><code>msg.element</code> If the element is found, it will be passed though the msg object to the next node.</p>
</script>

<script type="text/javascript">
	RED.nodes.registerType('set-value', {
		category : 'selenium',
		defaults : {
			name : {
				value : ""
			},
			text : {
				value : ""
			},
			selector : {
				value : ""
			},
			target : {
				value : ""
			},
			timeout : {
				value : 1000,
				validate : RED.validators.number()
			},
			waitfor : {
				value : 500,
				validate : RED.validators.number()
			}
		},
		color : "#d8bfd8",
		inputs : 1,
		outputs : 1,
		icon : "debug.png",
		label : function() {
			return this.name || "Set Value";
		},
		labelStyle : function() {
			return this.name ? "node_label_italic" : "";
		}
	}); 
</script>

<script type="text/x-red" data-template-name="to-file">
	<div class="form-row">
		<label for="node-input-name"><i class="fa fa-globe"></i> <span>Name</span></label>
		<input type="text" id="node-input-name">
	</div>
	<div class="form-row">
		<label for="node-input-filename"><i class="fa fa-empire"></i> <span>File</span></label>
		<input type="text" id="node-input-filename">
	</div>	
	<div class="form-row">
		<label for="node-input-waitfor"><i class="fa fa-empire"></i> <span>Wait For</span></label>
		<input type="text" id="node-input-waitfor" value="00">
	</div>
</script>

<script type="text/x-red" data-help-name="to-file">
	<p>Save a value to the <code>File</code> location with <code>msg.payload</code> content as a string.</p>
	<strong>Inputs:</strong>
	<p><ul>
		<li><a>File</a>: specify the file path to write to. The <code>msg.filename</code> will override the <code>File</code> field if set.</li>
		<li><a>Wait For</a>: specify the time to wait before looing up. The <code>msg.waitfor</code> will override the <code>Wait For</code> field if set.</li>
	</ul></p>	
	<strong>Outputs:</strong>
	<p><code>msg.error</code> When the file writing operation is failed or unexpected operation occurred.</p>
</script>

<script type="text/javascript">
	RED.nodes.registerType('to-file', {
		category : 'selenium',
		defaults : {
			name : {
				value : ""
			},
			filename : {
				value : "./filename"
			},
			waitfor : {
				value : 500,
				validate : RED.validators.number()
			}
		},
		color : "#d8bfd8",
		inputs : 1,
		outputs : 1,
		icon : "debug.png",
		label : function() {
			return this.name || "To File";
		},
		labelStyle : function() {
			return this.name ? "node_label_italic" : "";
		}
	}); 
</script>

<script type="text/x-red" data-template-name="get-value">
	<div class="form-row">
		<label for="node-input-name"><i class="fa fa-globe"></i> <span>Name</span></label>
		<input type="text" id="node-input-name">
	</div>
	<div class="form-row">
		<label for="node-input-expected"><i class="fa fa-globe"></i> <span>Expected</span></label>
		<input type="text" id="node-input-expected">
	</div>
	<div class="form-row">
		<label for="node-input-selector"><i class="fa fa-empire"></i> <span>By</span></label>
		<select id="node-input-selector" style="width:125px !important">
			<option value="id">id</option>
			<option value="name">name</option>
			<option value="link">link</option>
			<option value="xpath">xpath</option>
			<option value="tagName">tagName</option>
			<option value="className">className</option>
			<option value="linkText">linkText</option>
			<option value="cssSelector">cssSelector</option>
		</select>
	</div>
	<div class="form-row">
		<label for="node-input-target"><i class="fa fa-empire"></i> <span>Target</span></label>
		<input type="text" id="node-input-target">
	</div>
	<div class="form-row">
		<label for="node-input-timeout"><i class="fa fa-empire"></i> <span>Timeout</span></label>
		<input type="text" id="node-input-timeout" value="1000">
	</div>
	<div class="form-row">
		<label for="node-input-waitfor"><i class="fa fa-empire"></i> <span>Wait For</span></label>
		<input type="text" id="node-input-waitfor" value="00">
	</div>	
	<div class="form-row">		
		<input type="checkbox" id="node-input-savetofile" value="false" style="display: inline-block; width: auto; vertical-align: top;">
		<label for="node-input-savetofile" style="width: 70%"> <span>Save the value to a specific filename.</span></label>
	</div>
</script>

<script type="text/x-red" data-help-name="get-value">
	<p>Get the value from <code>value</code> attribute of the <code>msg.element</code> or after waiting for the expected element is located.</p>
	<strong>Inputs:</strong>
	<p><ul>
		<li><a>Expected</a>: specify the expected value to compare. The <code>msg.expected</code> will override the <code>Expected</code> field if set.</li>
		<li><a>By</a>: specify the way to find an element by selector. The <code>msg.selector</code> will override the <code>By</code> field if set.</li>
		<li><a>Target</a>: specify the selector's value to lookup. The<code>msg.target</code> will override the <code>Target</code> field if set.</li>
		<li><a>Timeout</a>: specify the timeout during lookup operation. The <code>msg.timeout</code> will override the <code>Timeout</code> field if set.</li>
		<li><a>Wait For</a>: specify the time to wait before looing up. The <code>msg.waitfor</code> will override the <code>Wait For</code> field if set.</li>
	</ul></p>	
	<p>If the <code>msg.filename</code> is passed through, the <code>msg.payload</code> will be written into the file path.</p>
	<strong>Outputs:</strong>
	<p><code>msg.error</code> When the object is unexpected or cannot find element, this node generates the error with detail information</p>
	<p><code>msg.element</code> If the element is found, it will be passed though the msg object to the next node.</p>
	<p><code>msg.payload</code> contains the result of the <code>value</code> attribute.</p>
</script>

<script type="text/javascript">
	RED.nodes.registerType('get-value', {
		category : 'selenium',
		defaults : {
			name : {
				value : ""
			},
			expected : {
				value : ""
			},
			selector : {
				value : ""
			},
			target : {
				value : ""
			},
			timeout : {
				value : 1000,
				validate : RED.validators.number()
			},
			waitfor : {
				value : 500,
				validate : RED.validators.number()
			},
			savetofile : {
				value : false
			}
		},
		color : "#d8bfd8",
		inputs : 1,
		outputs : 1,
		icon : "debug.png",
		label : function() {
			return this.name || "Get Value";
		},
		labelStyle : function() {
			return this.name ? "node_label_italic" : "";
		}
	}); 
</script>

<script type="text/x-red" data-template-name="get-attribute">
	<div class="form-row">
		<label for="node-input-name"><i class="fa fa-globe"></i> <span>Name</span></label>
		<input type="text" id="node-input-name">
	</div>
	<div class="form-row">
		<label for="node-input-attribute"><i class="fa fa-empire"></i> <span>Attribute</span></label>
		<input type="text" id="node-input-attribute">
	</div>
	<div class="form-row">
		<label for="node-input-expected"><i class="fa fa-empire"></i> <span>Expected</span></label>
		<input type="text" id="node-input-expected">
	</div>
	<div class="form-row">
		<label for="node-input-selector"><i class="fa fa-empire"></i> <span>By</span></label>
		<select id="node-input-selector" style="width:125px !important">
			<option value="id">id</option>
			<option value="name">name</option>
			<option value="link">link</option>
			<option value="xpath">xpath</option>
			<option value="tagName">tagName</option>
			<option value="className">className</option>
			<option value="linkText">linkText</option>
			<option value="cssSelector">cssSelector</option>
		</select>
	</div>
	<div class="form-row">
		<label for="node-input-target"><i class="fa fa-empire"></i> <span>Target</span></label>
		<input type="text" id="node-input-target">
	</div>
	<div class="form-row">
		<label for="node-input-timeout"><i class="fa fa-empire"></i> <span>Timeout</span></label>
		<input type="text" id="node-input-timeout" value="1000">
	</div>
	<div class="form-row">
		<label for="node-input-waitfor"><i class="fa fa-empire"></i> <span>Wait For</span></label>
		<input type="text" id="node-input-waitfor" value="00">
	</div>
	<div class="form-row">		
		<input type="checkbox" id="node-input-savetofile" value="false" style="display: inline-block; width: auto; vertical-align: top;">
		<label for="node-input-savetofile" style="width: 70%"> <span>Save the value to a specific filename.</span></label>
	</div>
</script>

<script type="text/x-red" data-help-name="get-attribute">
	<p>Get the attribute from <code>attribute</code> of the <code>msg.element</code> or after waiting for the expected element is located.</p>
	<strong>Inputs:</strong>
	<p><ul>
		<li><a>Attribute</a>: specify the attribute to get. The <code>msg.attribute</code> will override the <code>Attribute</code> field if set.</li>
		<li><a>Expected</a>: specify the expected value to cpmpare. The <code>msg.expected</code> field if set.</li>
		<li><a>By</a>: specify the way to find an element by selector. The <code>msg.selector</code> will override the <code>By</code> field if set.</li>
		<li><a>Target</a>: specify the selector's value to lookup. The<code>msg.target</code> will override the <code>Target</code> field if set.</li>
		<li><a>Timeout</a>: specify the timeout during lookup operation. The <code>msg.timeout</code> will override the <code>Timeout</code> field if set.</li>
		<li><a>Wait For</a>: specify the time to wait before looing up. The <code>msg.waitfor</code> will override the <code>Wait For</code> field if set.</li>
	</ul></p>	
	<p>If the <code>msg.filename</code> is passed through, the <code>msg.payload</code> will be written into the file path.</p>
	<strong>Outputs:</strong>
	<p><code>msg.error</code> When the object is unexpected or cannot find element, this node generates the error with detail information</p>
	<p><code>msg.element</code> If the element is found, it will be passed though the msg object to the next node.</p>
	<p><code>msg.payload</code> contains the result of the <code>value</code> attribute.</p>
</script>

<script type="text/javascript">
	RED.nodes.registerType('get-attribute', {
		category : 'selenium',
		defaults : {
			name : {
				value : ""
			},
			attribute : {
				value : ""
			},
			expected : {
				value : ""
			},
			selector : {
				value : ""
			},
			target : {
				value : ""
			},
			timeout : {
				value : 1000,
				validate : RED.validators.number()
			},
			waitfor : {
				value : 500,
				validate : RED.validators.number()
			},
			savetofile : {
				value : false
			}
		},
		color : "#d8bfd8",
		inputs : 1,
		outputs : 1,
		icon : "debug.png",
		label : function() {
			return this.name || "Get Attribute";
		},
		labelStyle : function() {
			return this.name ? "node_label_italic" : "";
		}
	}); 
</script>

<script type="text/x-red" data-template-name="get-text">
	<div class="form-row">
		<label for="node-input-name"><i class="fa fa-globe"></i> <span>Name</span></label>
		<input type="text" id="node-input-name">
	</div>
	<div class="form-row">
		<label for="node-input-expected"><i class="fa fa-globe"></i> <span>Expected</span></label>
		<input type="text" id="node-input-expected">
	</div>
	<div class="form-row">
		<label for="node-input-selector"><i class="fa fa-empire"></i> <span>By</span></label>
		<select id="node-input-selector" style="width:125px !important">
			<option value="id">id</option>
			<option value="name">name</option>
			<option value="link">link</option>
			<option value="xpath">xpath</option>
			<option value="tagName">tagName</option>
			<option value="className">className</option>
			<option value="linkText">linkText</option>
			<option value="cssSelector">cssSelector</option>
		</select>
	</div>
	<div class="form-row">
		<label for="node-input-target"><i class="fa fa-empire"></i> <span>Target</span></label>
		<input type="text" id="node-input-target">
	</div>
	<div class="form-row">
		<label for="node-input-timeout"><i class="fa fa-empire"></i> <span>Timeout</span></label>
		<input type="text" id="node-input-timeout" value="1000">
	</div>
	<div class="form-row">
		<label for="node-input-waitfor"><i class="fa fa-empire"></i> <span>Wait For</span></label>
		<input type="text" id="node-input-waitfor" value="00">
	</div>
	<div class="form-row">		
		<input type="checkbox" id="node-input-savetofile" value="false" style="display: inline-block; width: auto; vertical-align: top;">
		<label for="node-input-savetofile" style="width: 70%"> <span>Save the value to a specific filename.</span></label>
	</div>
</script>

<script type="text/x-red" data-help-name="get-text">
	<p>Get the text of the <code>msg.element</code> passed from previous node or after waiting for the expected element is located.</p>
	<strong>Inputs:</strong>
	<p><ul>
		<li><a>Expected</a>: specify the expected value to cpmpare. The <code>msg.expected</code> will override the <code>Expected</code> field if set.</li>
		<li><a>By</a>: specify the way to find an element by selector. The <code>msg.selector</code> will override the <code>By</code> field if set.</li>
		<li><a>Target</a>: specify the selector's value to lookup. The<code>msg.target</code> will override the <code>Target</code> field if set.</li>
		<li><a>Timeout</a>: specify the timeout during lookup operation. The <code>msg.timeout</code> will override the <code>Timeout</code> field if set.</li>
		<li><a>Wait For</a>: specify the time to wait before looing up. The <code>msg.waitfor</code> will override the <code>Wait For</code> field if set.</li>
	</ul></p>	
	<p>If the <code>msg.filename</code> is passed through, the <code>msg.payload</code> will be written into the file path.</p>
	<strong>Outputs:</strong>
	<p><code>msg.error</code> When the object is unexpected or cannot find element, this node generates the error with detail information</p>
	<p><code>msg.element</code> If the element is found, it will be passed though the msg object to the next node.</p>
	<p><code>msg.payload</code> contains the result of the <code>text</code> attribute.</p>
</script>

<script type="text/javascript">
	RED.nodes.registerType('get-text', {
		category : 'selenium',
		defaults : {
			name : {
				value : ""
			},
			expected : {
				value : ""
			},
			selector : {
				value : ""
			},
			target : {
				value : ""
			},
			timeout : {
				value : 1000,
				validate : RED.validators.number()
			},
			waitfor : {
				value : 500,
				validate : RED.validators.number()
			},
			savetofile : {
				value : false
			}
		},
		color : "#d8bfd8",
		inputs : 1,
		outputs : 1,
		icon : "debug.png",
		label : function() {
			return this.name || "Get Text";
		},
		labelStyle : function() {
			return this.name ? "node_label_italic" : "";
		}
	}); 
</script>

<script type="text/x-red" data-template-name="run-script">
	<div class="form-row">
		<label for="node-input-name"><i class="fa fa-globe"></i> <span>Name</span></label>
		<input type="text" id="node-input-name">
	</div>
	<div class="form-row">
		<label for="node-input-selector"><i class="fa fa-empire"></i> <span>By</span></label>
		<select id="node-input-selector" style="width:125px !important">
			<option value="id">id</option>
			<option value="name">name</option>
			<option value="link">link</option>
			<option value="xpath">xpath</option>
			<option value="tagName">tagName</option>
			<option value="className">className</option>
			<option value="linkText">linkText</option>
			<option value="cssSelector">cssSelector</option>
		</select>
	</div>
	<div class="form-row">
		<label for="node-input-target"><i class="fa fa-empire"></i> <span>Target</span></label>
		<input type="text" id="node-input-target">
	</div>
	<div class="form-row">
		<label for="node-input-timeout"><i class="fa fa-empire"></i> <span>Timeout</span></label>
		<input type="text" id="node-input-timeout" value="1000">
	</div>
	<div class="form-row">
		<label for="node-input-waitfor"><i class="fa fa-empire"></i> <span>Wait For</span></label>
		<input type="text" id="node-input-waitfor" value="00">
	</div>
	<div class="form-row" style="margin-bottom: 0px;">
		<label for="node-input-func"><i class="fa fa-wrench"></i> <span>Function</span></label>
		<input type="hidden" id="node-input-func" autofocus="autofocus">
		<input type="hidden" id="node-input-noerr">
	</div>
	<div class="form-row node-text-editor-row">
	<div style="height: 250px;" class="node-text-editor" id="node-input-func-editor" ></div>
	</div>
</script>

<script type="text/x-red" data-help-name="run-script">
	<p>A function block where you can write code to run in the browser context of an existing element.</p>
	<p>The parameters is passed in as a JavaScript object called <code>msg.driver</code> and <code>msg.element</code>.</p>
	<strong>Outputs:</strong>
	<p><code>msg.error</code> When the object is unexpected or cannot find element, this node generates the error with detail information</p>
	<p><code>msg.element</code> If the element is found, it will be passed though the msg object to the next node.</p>	
	<strong>Logging and Error Handling</strong>
	<p>To log any information, or report an error, the following functions are available:</p>
	<ul>
	<li><code>node.log("Log")</code></li>
	<li><code>node.warn("Warning")</code></li>
	<li><code>node.error("Error")</code></li>
	</ul>
	</p>
	<p>The Catch node can also be used to handle errors. To invoke a Catch node,
	pass <code>msg</code> as a second argument to <code>node.error</code>:</p>
	<pre>node.error("Error",msg)</pre>
	<h4>Sending messages</h4>
	<p>The function can either return the messages it wants to pass on to the next nodes
	in the flow, or can call <code>node.send(messages)</code>.</p>
	<p>It can return/send:</p>
	<ul>
	<li>a single message object - passed to nodes connected to the first output</li>
	<li>an array of message objects - passed to nodes connected to the corresponding outputs</li>
	</ul>
	<p>If any element of the array is itself an array of messages, multiple
	messages are sent to the corresponding output.</p>
	<p>If null is returned, either by itself or as an element of the array, no
	message is passed on.</p>
	<p>See the <a target="_new" href="http://nodered.org/docs/writing-functions.html">online documentation</a> for more help.</p>
</script>

<script type="text/javascript">
	RED.nodes.registerType('run-script', {
		category : 'selenium',
		defaults : {
			name : {
				value : ""
			},
			func : {
				value : "console.log(arguments[0].innerHTML);\nreturn msg;"
			},
			selector : {
				value : ""
			},
			target : {
				value : ""
			},
			timeout : {
				value : 1000,
				validate : RED.validators.number()
			},
			waitfor : {
				value : 500,
				validate : RED.validators.number()
			}
		},
		color : "#d8bfd8",
		inputs : 1,
		outputs : 1,
		icon : "debug.png",
		label : function() {
			return this.name || "Run Script";
		},
		labelStyle : function() {
			return this.name ? "node_label_italic" : "";
		},
		oneditprepare : function() {
			var that = this;
			function functionDialogResize() {
				var rows = $("#dialog-form>div:not(.node-text-editor-row)");
				var height = $("#dialog-form").height();
				for (var i = 0; i < rows.size(); i++) {
					height -= $(rows[i]).outerHeight(true);
				}
				var editorRow = $("#dialog-form>div.node-text-editor-row");
				height -= (parseInt(editorRow.css("marginTop")) + parseInt(editorRow.css("marginBottom")));
				$(".node-text-editor").css("height", height + "px");
				that.editor.resize();
			}


			$("#dialog").on("dialogresize", functionDialogResize);
			$("#dialog").one("dialogopen", function(ev) {
				var size = $("#dialog").dialog('option', 'sizeCache-function');
				if (size) {
					$("#dialog").dialog('option', 'width', size.width);
					$("#dialog").dialog('option', 'height', size.height);
					functionDialogResize();
				}
			});
			$("#dialog").one("dialogclose", function(ev, ui) {
				var height = $("#dialog").dialog('option', 'height');
				$("#dialog").off("dialogresize", functionDialogResize);
			});

			this.editor = RED.editor.createEditor({
				id : 'node-input-func-editor',
				mode : 'ace/mode/javascript',
				value : $("#node-input-func").val()
			});
			this.editor.focus();
		},
		oneditsave : function() {
			var annot = this.editor.getSession().getAnnotations();
			this.noerr = 0;
			$("#node-input-noerr").val(0);
			for (var k = 0; k < annot.length; k++) {
				//console.log(annot[k].type,":",annot[k].text, "on line", annot[k].row);
				if (annot[k].type === "error") {
					$("#node-input-noerr").val(annot.length);
					this.noerr = annot.length;
				}
			}
			$("#node-input-func").val(this.editor.getValue());
			delete this.editor;
		}
	}); 
</script>

<script type="text/x-red" data-template-name="screenshot">
	<div class="form-row">
		<label for="node-input-name"><i class="fa fa-globe"></i> <span>Name</span></label>
		<input type="text" id="node-input-name">
	</div>
	<div class="form-row">
		<label for="node-input-filename"><i class="fa fa-empire"></i> <span>File</span></label>
		<input type="text" id="node-input-filename">
	</div>
	<div class="form-row">
		<label for="node-input-selector"><i class="fa fa-empire"></i> <span>By</span></label>
		<select id="node-input-selector" style="width:125px !important">
			<option value="id">id</option>
			<option value="name">name</option>
			<option value="link">link</option>
			<option value="xpath">xpath</option>
			<option value="tagName">tagName</option>
			<option value="className">className</option>
			<option value="linkText">linkText</option>
			<option value="cssSelector">cssSelector</option>
		</select>
	</div>
	<div class="form-row">
		<label for="node-input-target"><i class="fa fa-empire"></i> <span>Target</span></label>
		<input type="text" id="node-input-target">
	</div>
	<div class="form-row">
		<label for="node-input-timeout"><i class="fa fa-empire"></i> <span>Timeout</span></label>
		<input type="text" id="node-input-timeout" value="1000">
	</div>
	<div class="form-row">
		<label for="node-input-waitfor"><i class="fa fa-empire"></i> <span>Wait For</span></label>
		<input type="text" id="node-input-waitfor" value="00">
	</div>
</script>

<script type="text/x-red" data-help-name="screenshot">
	<p>Schedule a command to take a screenshot.</p>
	<strong>Inputs:</strong>
	<p><ul>
		<li><a>File</a>: specify the file path to write to. The <code>msg.filename</code> will override the <code>File</code> field if set.</li>
		<li><a>By</a>: specify the way to find an element by selector. The <code>msg.selector</code> will override the <code>By</code> field if set.</li>
		<li><a>Target</a>: specify the selector's value to lookup. The<code>msg.target</code> will override the <code>Target</code> field if set.</li>
		<li><a>Timeout</a>: specify the timeout during lookup operation. The <code>msg.timeout</code> will override the <code>Timeout</code> field if set.</li>
		<li><a>Wait For</a>: specify the time to wait before looing up. The <code>msg.waitfor</code> will override the <code>Wait For</code> field if set.</li>
	</ul></p>	
	<strong>Outputs:</strong>
	<p><code>msg.payload</code> contains the screenshot as a base-64 encoded PNG if <code>filename</code> is not specified.</p>
</script>

<script type="text/javascript">
	RED.nodes.registerType('screenshot', {
		category : 'selenium',
		defaults : {
			name : {
				value : ""
			},
			filename : {
				value : ""
			},
			selector : {
				value : ""
			},
			target : {
				value : ""
			},
			timeout : {
				value : 1000,
				validate : RED.validators.number()
			},
			waitfor : {
				value : 500,
				validate : RED.validators.number()
			}
		},
		color : "#d8bfd8",
		inputs : 1,
		outputs : 1,
		icon : "debug.png",
		label : function() {
			return this.name || "Screenshot";
		},
		labelStyle : function() {
			return this.name ? "node_label_italic" : "";
		}
	}); 
</script>

<script type="text/x-red" data-template-name="nav-to">
	<div class="form-row">
		<label for="node-input-name"><i class="fa fa-globe"></i> <span>Name</span></label>
		<input type="text" id="node-input-name">
	</div>
	<div class="form-row">
		<label for="node-input-url"><i class="fa fa-globe"></i> <span>URL</span></label>
		<input type="text" id="node-input-url">
	</div>
	<div class="form-row">
		<label for="node-input-waitfor"><i class="fa fa-empire"></i> <span>Wait For</span></label>
		<input type="text" id="node-input-waitfor" value="00">
	</div>
</script>

<script type="text/x-red" data-help-name="nav-to">
	<p>Using Selenium WebDriver to schedules a command to navigate to a new URL.</p>
	<strong>Inputs:</strong>
	<p><ul>		
		<li><a>URL</a>: specify the url to navigate to.</li>		
		<li><a>Wait For</a>: specify the delay before executing this operation.</li>
	</ul></p>
</script>

<script type="text/javascript">
	RED.nodes.registerType('nav-to', {
		category : 'selenium',
		defaults : {
			name : {
				value : ""
			},
			url : {
				value : "",
				required : true
			},
			waitfor : {
				value : 500,
				validate : RED.validators.number()
			}
		},
		color : "#d8bfd8",
		inputs : 1,
		outputs : 1,
		icon : "debug.png",
		label : function() {
			return this.name || "Go to";
		},
		labelStyle : function() {
			return this.name ? "node_label_italic" : "";
		}
	}); 
</script>

<script type="text/x-red" data-template-name="nav-back">
	<div class="form-row">
		<label for="node-input-name"><i class="fa fa-globe"></i> <span>Name</span></label>
		<input type="text" id="node-input-name">
	</div>
	<div class="form-row">
		<label for="node-input-waitfor"><i class="fa fa-empire"></i> <span>Wait For</span></label>
		<input type="text" id="node-input-waitfor" value="00">
	</div>
</script>

<script type="text/x-red" data-help-name="nav-back">
	<p>Using Selenium WebDriver to schedules a command to navigate back to previous page.</p>
	<strong>Inputs:</strong>
	<p><ul>
		<li><a>Wait For</a>: specify the delay before executing this operation.</li>
	</ul></p>
</script>

<script type="text/javascript">
	RED.nodes.registerType('nav-back', {
		category : 'selenium',
		defaults : {
			name : {
				value : ""
			},
			waitfor : {
				value : 500,
				validate : RED.validators.number()
			}
		},
		color : "#d8bfd8",
		inputs : 1,
		outputs : 1,
		icon : "debug.png",
		label : function() {
			return this.name || "Back";
		},
		labelStyle : function() {
			return this.name ? "node_label_italic" : "";
		}
	}); 
</script>

<script type="text/x-red" data-template-name="nav-forward">
	<div class="form-row">
		<label for="node-input-name"><i class="fa fa-globe"></i> <span>Name</span></label>
		<input type="text" id="node-input-name">
	</div>
	<div class="form-row">
		<label for="node-input-waitfor"><i class="fa fa-empire"></i> <span>Wait For</span></label>
		<input type="text" id="node-input-waitfor" value="00">
	</div>
</script>

<script type="text/x-red" data-help-name="nav-forward">
	<p>Using Selenium WebDriver to schedules a command to navigate forward to next page.</p>
	<strong>Inputs:</strong>
	<p><ul>
		<li><a>Wait For</a>: specify the delay before executing this operation.</li>
	</ul></p>
</script>

<script type="text/javascript">
	RED.nodes.registerType('nav-forward', {
		category : 'selenium',
		defaults : {
			name : {
				value : ""
			},
			waitfor : {
				value : 500,
				validate : RED.validators.number()
			}
		},
		color : "#d8bfd8",
		inputs : 1,
		outputs : 1,
		icon : "debug.png",
		label : function() {
			return this.name || "Forward";
		},
		labelStyle : function() {
			return this.name ? "node_label_italic" : "";
		}
	}); 
</script>

<script type="text/x-red" data-template-name="nav-refresh">
	<div class="form-row">
		<label for="node-input-name"><i class="fa fa-globe"></i> <span>Name</span></label>
		<input type="text" id="node-input-name">
	</div>
	<div class="form-row">
		<label for="node-input-waitfor"><i class="fa fa-empire"></i> <span>Wait For</span></label>
		<input type="text" id="node-input-waitfor" value="00">
	</div>
</script>

<script type="text/x-red" data-help-name="nav-refresh">
	<p>Using Selenium WebDriver to schedules a command to refreash the current page.</p>
	<strong>Inputs:</strong>
	<p><ul>
		<li><a>Wait For</a>: specify the delay before executing this operation.</li>
	</ul></p>
</script>

<script type="text/javascript">
	RED.nodes.registerType('nav-refresh', {
		category : 'selenium',
		defaults : {
			name : {
				value : ""
			},
			waitfor : {
				value : 500,
				validate : RED.validators.number()
			}
		},
		color : "#d8bfd8",
		inputs : 1,
		outputs : 1,
		icon : "debug.png",
		label : function() {
			return this.name || "Refresh";
		},
		labelStyle : function() {
			return this.name ? "node_label_italic" : "";
		}
	}); 
</script>

<script type="text/x-red" data-template-name="selenium-server">
	<div class="form-row">
		<ul style="background: #fff; min-width: 600px; margin-bottom: 20px;" id="node-config-selenium-server-tabs"></ul>
	</div>
		<div id="node-config-selenium-server-tabs-content" style="min-height: 170px;">
			<div id="selenium-server-tab-connection" style="display:none">
			<div class="form-row node-input-remoteurl">
				<label for="node-config-input-remoteurl"><i class="fa fa-globe"></i> <span>Remote Url</span></label>
				<input class="input-append-left" type="text" id="node-config-input-remoteurl" placeholder="http://localhost:4444/wd/hub" style="width: 40%;" >
			</div>
		</div>
	</div>
</script>

<script type="text/javascript">
	RED.nodes.registerType('selenium-server', {
		category : 'config',
		defaults : {
			remoteurl : {
				value : "http://localhost:4444/wd/hub",
				required : true
			}
		},
		label : function() {
			return (this.remoteurl ? this.remoteurl : "localhost@4444");
		},
		oneditprepare : function() {
			var tabs = RED.tabs.create({
				id : "node-config-selenium-server-tabs",
				onchange : function(tab) {
					$("#node-config-selenium-server-tabs-content").children().hide();
					$("#" + tab.id).show();
				}
			});
			tabs.addTab({
				id : "selenium-server-tab-connection",
				label : "Selenium Server"
			});
			setTimeout(function() {
				tabs.resize();
			}, 0);
		}
	}); 
</script>