Locating the same text in XPATH with the same address location - html

While this info doesn't help resolve my issue, I'll let it be known I'm creating automation tests in Python using Selenium WebDriver.
I have an issue where I want to verify the existence of two identical text elements that appear to have identical XPATH addresses. As you can see from the XPATH of the web page below...
<div class="pagebox">
<h2>Database</h2>
Restrict access to group: <input id="database_group" name="database_group" value="postgres" type="text">
<br></br>
<h2>Sessions</h2>
User sessions time out after
<input id="session_timeout" name="session_timeout" maxlength="5" value="1200" type="text">
minutes.
<br></br>
<h2>HMI</h2>
<input id="use_large_header_text" name="use_large_header_text" type="checkbox">
Use large text in the header bar and link bar on HMI
<br></br>
<input id="display_tagging_button" name="display_tagging_button" checked="true" type="checkbox">
Display tagging button and information in HMI control dialog
<br></br>
<br></br>
<h2>Inactive Redirect</h2>
Auto redirect after user is inactive for
<input id="inactive_time" name="inactive_time" maxlength="4" placeholder="Min: 0 (Default) Max: 1440" size="25" value="0" type="text"></input>
minutes.
<span id="ieInactTime" style="font-style: italic"> Min: 0 (Default) Max: 1440</span>
<br></br>
Redirect Address:
<input id="inactive_page" name="inactive_page" placeholder="File Path e.g. /Home/" size="30" value="" type="text"><span id="ieInactPage" style="font-style: italic"> File Path e.g. /Home/</span>
<br></br>
...the phrase "minutes." shows up twice [line 8 and line 21], but it doesn't show up in a way where I can use the element's XPATH to locate which element I want to verify the existence of as I normally would using methods you'd find here, here, or here. Both text elements appear to have the same exact XPATH address:
//div[#class='pagebox']
I tried to distinguish between the two text elements using brackets to signify which text elements I'd like to verify...
e.g. //div[#class='pagebox']/[1] & //div[#class='pagebox']/[2]
...but that didn't work.
The closest I could find to distinguishing between the two of these text elements was to use the 'text()' feature of XPATH.
//div[#class='pagebox']/text()[contains(.,'minutes')][1]
//div[#class='pagebox']/text()[contains(.,'minutes')][2]
Is there any way to verify these two text elements using XPATH?

You can use JavaScriptExecutor to find text node inside the element div. See C# code below:
IWebElement e = driver.FindElement(By.ClassName("pagebox"));
string script = "var nodes = arguments[0].childNodes;" +
"var text = [];" +
"var count=0;" +
"for (var i = 0; i < nodes.length; i++) {" +
" if ((nodes[i].nodeType == Node.TEXT_NODE) && (nodes[i].textContent.trim()=='minutes.')) {" +
" text[count]= nodes[i].textContent.trim();" +
" count++;" +
" }" +
"}" +
"return text;";
Object obj = ((IJavaScriptExecutor)driver).ExecuteScript(script,e);

To distinguish between the two different text elements "minutes.", you need the following XPATH:
For the 1st "minutes.": //div[#class='pagebox'][text()[contains(.,'minutes')][1]]
For the 2nd "minutes.": //div[#class='pagebox'][text()[contains(.,'minutes')][2]]

Related

How to get Validators to allow white space?

The problem is that my angular code triggers an error on the form controls when I add a white space to the text input.I would like the regex to allow white spaces. I've tried several different regex patterns. I believe the one im currently using should be allow letters and whitespaces.
TypeScript
form = this.fb.group({
title: [,[Validators.required,Validators.pattern("[a-zA-Z\s]+")]],
author: [,[Validators.required,Validators.pattern('/^[a-zA-Z\s]*$/')]],
description: [,Validators.required],
date: [new Date]
})
HTML
<div class="form-group">
<label for="title"> Article Title </label>
<span
style="color: red;font-style: italic"
*ngIf="(mouseOverSubmit || form.controls.title?.touched)
&& form.controls.title?.errors?.required">
Required
</span>
<span
style = "color:red;font-style: italic"
*ngIf= "form.controls.title?.touched
&& form.controls.title?.errors?.pattern">
Only letters and numbers allowed
</span>
<input (ngModel)="title"
name="title"
formControlName="title"
class="form-control"
type="text"
id="title">
</div>
Here is validator example for you
\s Any Whitespace
\S Any Non-whitespace character
Use in this way Validators.pattern("^[a-zA-Z ]*$")
To allow only one space between two words use in this way
Validators.pattern("^[\w+ ?]*$")

Form with select and text options

I have an HTML form that needs to collect information entered into a text box as well as options that are chosen from a set of dropdown menus. To give a little context, I am creating virtual machines that can be configured by the user on a web page. They must enter a name (arbitrary) and a hostmachine in two separate boxes in addition to selecting options from three different dropdown menus. Because I am working with clusters, there could be as many as 99 "rows" of dropdown menus representing different system configurations that will be a part of the cluster.
Is it possible (if so, advisable?) to have both the text fields and the dropdowns contained in one form? If not, how do I make sure that the submit button sends all the data to my Django server for processing as I need all of this information to ultimately come to the same place.
I currently have them in different forms, but just ignore this for now as it doesn't do anything at the moment. Also don't worry about the lack of dropdowns present in this code as the addSelect() JS function is fully functional. Just know that each added node is given a unique name (node1, node2, etc.) and goes into the div "nodes".
<body><b>Virtual Cluster Initialization</b><br></br>
<div id="container">
<div id="general">
<form method="POST" id="naming">Cluster name:<br>
<input type="text" name="cluster_name">
<br>
Host Machine:<br>
<input type="text" name="host_machine">
</form>
</div>
<form method="POST" id="node_config"></form>
<div id="nodes" form="node_config"></div>
<div id=node1">
<select name="node_type" id="node_type">Node Type</option>
(two options go here)
<select name="issp_version" id="issp_version>ISSP Version</option>
(7 or so options go here)
<select name="os" id="os">Operating System </option>
(about 20 options)
<button id="add" onclick="addSelect('nodes');">+</button>
</div>
<br></br><input type="submit"></input>
</body>
EDIT1: Added the an example dropdown for clarity. Would it be better to NOT make a new div for each node? I did this initially because it seemed like a good way to keep each node's configuration separate. Like I said, there could be up to 99 nodes, each with three dropdown menus.
Not really sure if I understand what you're asking. Showing us the code after your drop downs are added would help. Syntax wise, this wont work. Inputs should be inside forms and div doesn't have a form property.
Put everything into one form if you want it to all be in one post. If your dynamically adding new form elements you can use an array as element names.
How about something like this?
<script>
var nodeID = 0;
function addSelect() {
var html = "<div id='node_" + nodeID + "'>";
html += "<select name='node_type[" + nodeID + "]' id='node_type'><option>example</option></select>";
html += "<select name='issp_version[" + nodeID + "]' id='issp_version'><option>ISSP Version</option></select>";
html += "<select name='os[" + nodeID + "]' id='os'><option>Operating System </option></select>";
html += "</div>";
document.getElementById('nodes').innerHTML += html;
nodeID++;
}
</script>
<div style="margin-bottom:20px;"><b>Virtual Cluster Initialization</b>
</div>
<form>
<div id="container">
<div id="general">
<div>Cluster name:</div>
<div>
<input name="cluster_name" type="text">
</div>
<div>Host Machine:</div>
<div>
<input name="host_machine" type="text">
</div>
</div>
<div id="nodes">
<div>Nodes</div>
<div id="node_0">
<select name="node_type[0]" id="node_type"><option>example</option></select>
<select name="issp_version[0]" id="issp_version"><option>ISSP Version</option></select>
<select name="os[0]" id="os"><option>Operating System </option></select>
</div>
<div id="node_1">
<select name="node_type[1]" id="node_type"><option>example</option></select>
<select name="issp_version[1]" id="issp_version"><option>ISSP Version</option></select>
<select name="os[1]" id="os"><option>Operating System </option></select>
</div>
</div>
<div>
<button type="button" id="add" onclick="addSelect();">+</button>
</div>
</div>
<div>
<input type="submit">
</div>
</form>
Here is a JSfiddle to help you visualize what this does:
https://jsfiddle.net/fdss08w9/2/
Example of how you might use this in Django:
if request.method == 'POST':
# create a form instance and populate it with data from the request:
form = NameForm(request.POST)
# check whether it's valid:
if form.is_valid():
# Get the number of nodes we added
for id, node_type in enumerate(form.cleaned_data['node_type']):
issp_version = form.cleaned_data['issp_version'][id]
os = form.cleaned_data['os'][id]
#do stuff with node_type, issp_version, os

Knockout Html binding

I'd bound my model &lt ; input type=&quot ; radio &quot ; name=&quot ;&quot ; &gt ; with the view model of razor engine file.
** I've separated the tags just to show how the html codes were saved in the original format.
When the above data get's displayed over the view, the data is shown as "< input type="radio" name="" />".
The knockout tag that I use at the cshtml page is "<label data-bind = "html: XYZ"></label>".
I want to know why the above data reflects as a string message rather than an html control?
If the string you have provided is correct, I would say it is because of the whitespace between < and input. Make it <input. Secondly, depending on how you are quoting within the html to be rendered, you'll need to escape some of the " or change them to '.
Viewmodel
vm={
html1: "C<input type=\"radio\" name=\"\" />",
html2: "D<input type='radio' name='' />",
html3: "Your example has whitespace causing it to be invalid HTML: < input type='radio' name=''/>"}
ko.applyBindings(vm)
Html
<body>
With escaped double quotes <label data-bind="html: html1"></label>
<br/>
With single qoutes <label data-bind="html: html2"></label>
<br/>
<label data-bind="html: html3"></label>
</body>
See this fiddle for working example of the above.

Submit form to calculate quadratic equation

Am just learning html. I need to write code that solves the quadratic equation formula. I tried php code embeding in html but am getting blank output. How do I get user values a, b, c and display conditional answers?
Here's a simple example of what you need to do. First make a HTML form:
<form method="post" action="index.php">
<input type="text" name="a" value="Enter 'a'" />
<input type="text" name="b" value="Enter 'b'" />
<input type="text" name="c" value="Enter 'c'" />
<input type="submit" name='calc' value="Calculate" />
</form>
There is your form. Now the calculations:
<?php
// Check if the form is submitted
if (isset($_POST['calc'])) {
//assign variables
$a = $_POST['a'];
$b = $_POST['b'];
$c = $_POST['c'];
//after assigning variables you can calculate your equation
$d = $b * $b - (4 * $a * $c);
$x1 = (-$b + sqrt($d)) / (2 * $a);
$x2 = (-$b - sqrt($d)) / (2 * $a);
echo "x<sub>1</sub> = {$x1} and x<sub>2</sub> = {$x2}";
} else {
// here you can put your HTML form
}
?>
You need to do more checks on it, but as I said before this is a simple example.
Edit: learn from the source , the official php site: http://php.net/manual/en/tutorial.forms.php
1.Create a form with the fields you want. <form method='post' ....>...</form>
2.The user submit the form and then write a PHP code which get the posted data ($_POST)
and manipulate it according to the quadratic equation formula.
3.Echo the result.
I have smaller example.
This file sends data from form to itself. When it sends something - result of condition
$_SERVER['REQUEST_METHOD']=='POST'
is true. If its true - server process code in "if" block. It assigns data sent from form to 2 variables, then adds them and store in "$sum" variable. Result is displayed.
<html>
<body>
<form method="POST">
<p>
A: <br />
<input name="number_a" type="text"></input>
</p>
<p>B: <br />
<input name="number_b" type="text"></input>
</p>
<p>
<input type="submit"/>
</p>
</form>
<?php
if ($_SERVER['REQUEST_METHOD']=='POST') // process "if block", if form was sumbmitted
{
$a = $_POST['number_a'] ; // get first number form data sent by form to that file itself
$b = $_POST['number_b'] ; // get second number form data sent by form to that file itself
$sum = $a + $b; // calculate something
echo "A+B=" . $sum; // print this to html source, use "." (dot) for append text to another text/variable
}
?>
</body>
</html>
You need PHP server to test/use this! PHP file must be processed by web server, which creates page. Opening php file from disk will not work. If you need more explanations - ask for it in comments.

Search: what should the form page look like?

I'm new to html and am trying to implement a search function. I've created an input box and search buttons but I have no idea what the form page should look like. Please Help. Thank you!
Here's the code:
"<form name=MB method=\"POST\" action=\"formpage-->not sure what this page should look like">\n "
"<p align=MIDDLE>Search for Tokens: " + //Search Description
"<input name=\"term\" type=\"text\" onkeypress=\"if(event.keyCode==13) " +
"document.MB.exact.click();\" size=30> </p> \n" + //Search Box
"\n<FONT FACE=\"Geneva,Arial,Helvetica,lucida sans,san-serif\"><STRONG>" + //search buttons
"<input name=\"exact\" type=\"submit\" value=\"Find Exact\"" +
"\n<input name=\"AND\" type=\"submit\" value=\"Find All Tokens\">" +
"\n<input name=\"OR\" type=\"submit\" value=\"Find Any Tokens\">" +
"\n</STRONG></FONT></TD>\n</TR>\n</TABLE>\n</form>\n"
PS the reaszon it's all in quotes is because its a java program that generates the htmlenter code here
This is a pretty vague question but you probably want something like:
<form action="URL_FOR_SEARCH_HERE" method="GET">
<input type="text" name="query"/><br />
<input type="submit" value="Search"/>
</form>
(URL_FOR_SEARCH_HERE would be replaced by something like "/search.php", depending on what server-side technology you're using to do the actual search processing.)
It depends what you are searching for as well. If you are searching through a database then your form should point to some code that executes a sql search function.