I'm trying to replicate a one rowed table with a form, such that when I press the '+' button - I would like another table form to drop down below it exactly the way it is - however, when I do that and add the same element as the table with the HTML code, I get something different...
I got screenshot images to the form below and after that I got the code indented -
The code for the above images is listed below - the first being the forms and the second being the Javascript function
<body>
<form>
<div id="container1">
<table border="1" cellspacing="0" style="margin-top:12px width="900"">
<colgroup>
<col span="1">
</colgroup>
<tr>
<td valign="top">
<label for="company" size="3">Company:</label> <input type="text" id="company" name="company" maxlength="15" size="15">
</td>
<td valign="top">
<label for="position1" size="3">Position:</label> <input type="text" id="position1" name="position1" maxlength="20" size="12"> </td> <td valign="top"><label for="tasks" size="3"> Tasks: </label></td><td> <textarea id="tasks" name="tasks" maxlength="1000" cols="25" rows="1"></textarea></td>
<td valign="top"><label for="from1" size="3"> From: </label><input type="text" id="from1" name="from1" size="4" ></td> <td valign="top">To: <input type="text" id="to1" name="to1" size="4"> <td valign="top"><label for="location" size="3">Work Location: </label><input type="text" id="location" name="location" size="20" maxlength="25"> + <br></td>
</tr>
</table><br>
</div>
</form>
</body>
the javascipt code is posted below:
function aFields1(){
var container1 = document.getElementById("container1");
var table = document.createElement("table");
table.border=1;
table.cellspacing=0;
var tr = document.createElement("tr");
var td = document.createElement("td");
td.valign = "top";
var label = document.createElement("label");
label.for = "company";
label.size = 3;
container1.appendChild(document.createTextNode("Company: "));
container1.appendChild(label);
var company = document.createElement("input");
company.type = "text";
company.id = "company";
company.name = "company";
company.size = 15;
company.maxlenth = 15;
//append the company input element to the td element
td.appendChild(company);
tr.appendChild(td);
table.appendChild(tr);
//append the td element to the container1 element
//container1.appendChild(tr);
container1.appendChild(table);
Can anyone please tell me why the table is not showing up?
There should be a border with at least one cell with the company label and input bar INSIDE it - but as you can see from the image the Company label is on the top and the input bar with the border is below it...
where'd I go wrong? and why are the borders for the cell much much more different from what came out of the HTML code?
Part of the problem is that you're appending the label element to the DIV directly instead of appending it to the new td. This is why it's showing up outside of the Table.
From your last comment, it seems like what you really want to do is just append a cloned TR to the existing table. Ok, there are multiple ways to do this. You can completely re-build a duplicate tr in javascript, OR you can just clone the first table row and append it to the table. This is trivial with jQuery, but can be done with pure javascript.
First, let's add an id attribute to the table element. like so:
<table id="my_table" border="1" cellspacing="0" style="margin-top:12px;width:900px">
.....snip rest of your table....
</table>
Then your javascript cloning can work like this (note: code is untested):
function aFields1() {
var table, tr, cloned_row, inputs_to_clear;
// find the table
table = document.getElementById('my_table');
// find the first tr element
tr = table.querySelectorAll('tr')[0];
// clone the first tr using deep = true option to copy all children
tr_cloned = tr.cloneNode(true);
// NOTE: the values in the cloned row will already be prefilled, so you probably want to clear input-field values as well
inputs_to_clear = tr_cloned.querySelectorAll('input');
foreach (var input in inputs_to_clear) {
inputs_to_clear[input].value = '';
}
// append the new row
table.appendChild(cloned_row);
}
Related
I'm facing the problem with finding label text from table
I'm new to Selenium, help me understand what I'm doing wrong.
Thanks in advance
WebElement services = driver.findElement(By.xpath("//tr[#id='mr_2']/label"));
String strServices = services.getText();
System.out.println(strServices);
<tr class="alt" id="mr_2">
<td class="first_col">Menu Selection</td>
<td><label style="display: none" for="element_2_1">Poor</label>
<input id="element_2_1" name="element_2" type="radio" value="1"></td>
</tr>
Try changing the below line
String strServices = services.getText();
to
String strServices = services.getAttribute("textContent");
I am trying to do IE Automation through Excel VBA code.
I have a web page which has Top, Middle and results forms. I need to input values in the Middle form but unable to get any controls from this and get it as 0. Ie.Document.forms.Length gives 0. Tried the below code as well but does not work.
Ie.Document.forms("SearchForm").elements("PolicyNumber").Value = "Josh"
Looks like this form is on a frame but don't see frame reference inthe HTML code. HTML code is as below:
<body bgcolor="white">
<form method=POST name="SearchForm" action="PolicySearch" target="resultframe" >
<input type=hidden name="NewSearch" value="True" ></input>
<table class=box2 cellpadding="1" cellspacing="0" border="0" width="760" align="top" halign="left">
<tr>
<td class="name" align="left">
Policy# :<input type=text name="PolicyNumber" maxlength="10" value="" size="10"></input>
</td>
try thing as
Ie.Document.getElementsByName("PolicyNumber").Item(0).Value="Josh"
or
Iie.Document.getElementsByName("PolicyNumber").Value="Josh"
Try this:
declare a new variable:
Dim Elements As IHTMLElementCollection
Set the elements with the form and tag name, eg. input
Set Elements = IE.Document.forms("SearchForm").Document.getElementsByTagName("input")
Pass the value to the text / input
Elements("PolicyNumber").Value = "Josh"
Note: the code above is originally for frames and need to add MS HTML Objects library in the references. Though you can use Elements by declaring as object, declaring as IHTMLElementCollection will have events when you press "."
I need to getAttribute("src") of the image. When I run my script, it shows "null". BTW, action works!
My script:
WebElement image = driver.findElement(By.id("creativeLink"));
verifyDisplay(image.getAttribute("src"), By.id("creativeLink"));
action.moveToElement(image).perform();
Page HTML:
<div id="creativeContent">
<table>
<tbody><tr>
<td>
<a id="creativeLink" href="http://www.website.com" target="_new"> <img href="http://www.website.com" rel="faceboxMO" alt="" src="https://console.data.com/images/login/logo.png" height="50" border="0" width="50"></a>
</td>
<td valign="top"><div class="hint">(Note: Mouse over creative to see in correct dimensions)</div></td>
</tr>
<tr>
<td>
</td></tr></tbody></table>
</div>
Looks like you are using wrong selector there. Since you are using some custom function I was not able to test it. However, I came up with something like following and seems working. A correct selector should look like something as following:
// The selector finds the img element
By by = By.cssSelector("#creativeLink>img");
//Getting attribute on on img tag
String src = driver.findElement(by).getAttribute("src");
System.out.println(src);
Print
https://console.data.com/images/login/logo.png
Probably do something like this and it will work:
WebElement image = driver.findElement(By.cssSelector("#creativeLink>img"));
verifyDisplay(image.getAttribute("src"), By.cssSelector("#creativeLink>img"));
action.moveToElement(image).perform();
I have a a ViewData with 8 rows. The ForEach loop works fine, but I need to extract the very first row before the foreach.
I need to extract only the first row to inject the default video in the iframe.
<iframe name="myFrame" width="800" height="500" src="#item.ID?wmode=transparent" allowfullscreen="True"></iframe>
Here is the foreach that works 100%
#foreach (var item in (List<VideoModel>)ViewData["Videos"])
{
<tr class="sep">
<td>#item.DisplayNumber</td>
<td>
#Html.ActionLink("Play Video", "IframeRedirect", "Home", new { ContentID = item.ID }, new { target = "someFrame", #class = "cbutton" })
</td>
<td>#item.Time #item.Hd</td>
<td><b>#item.Title</b><br />#item.Description</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><b>Author:</b> #item.Author <br />Subscribe to youtube channel</td>
</tr>
}
you can get the first row like following:
var firstRow = ((List<VideoModel>)ViewData["Videos"]).First();
If your model is a IEnumerable
You can get the first like following:
var first = Model.First();
I wanted to delete a particular row in a table in UI using the associate id... there is delete image for each row. My logic was
1)To find the associate id and get its xpath and then equalise the row value of the xpath with that of the delete image and click on the respective image.
2) To find the associate id and get its rowspan and then give the rowspan in the xpath of the delete image as shown below. (but i dono how to get the rowspan of it).
Kindly help on it.
WebElement elem = driver.findElement(By.xpath("//*[contains(.,'EDUAR ALEX')]"));
if (elem == null)
System.out.println("The text is not found on the page!");
else {
System.out.println("The text is present!!");
}
int rowCount=driver.findElements(By.xpath("//*[contains(.,'EDUAR ALEX')]")).size();
System.out.println(rowCount);
driver.findElement(By.xpath("html/body/form/div[4]/div[2]/div[1]/div[2]/div[2]/table/tbody/tr["+rowCount+"]/td[6]/a[2]/img")).click();
Thanks in advance!!!
<tr class="borderLeft">
<td align="center" class="col2">389206</td>
<td align="center" class="col3">EDUAR ALEX</td>
<td align="center" class="col4">Administrator,GIT,Report</td>
<td align="center" class="col5">410561</td>
<td align="center" class="col6">Apr 7 2014 11:47AM</td>
<td align="center" id="389206" class="col12"><a class="Edit_User" title="edit" id="edit"><img width="16" height="16" id="389206" class="EditClass" alt="pdf" title="Administrator,GIT,Report" src="../StyleSheet/Images/page_white_edit.png"> </a><a id="389206" title="delete" class="delete"><img width="16" height="16" id="389206" class="DeleteClass" alt="Edit" src="../StyleSheet/Images/delete.png"></a></td></tr>
<tr class="altRow">
<td class="col2" align="center">360396</td>
<td class="col3" align="center">BERNIC JIM</td>
<td class="col4" align="center">Report</td>
<td class="col5" align="center">360396</td>
<td class="col6" align="center">Apr 11 2014 6:50PM</td>
<td class="col12" align="center" id="360396"><a id="edit" title="edit" class="Edit_User"><img src="../StyleSheet/Images/page_white_edit.png" width="16" height="16" title="Report" alt="pdf" class="EditClass" id="360396"> </a><a class="delete" title="delete" id="360396"><img src="../StyleSheet/Images/delete.png" width="16" height="16" alt="Edit" class="DeleteClass" id="360396"></a></td>
I think you want to delete particular row which has anchor and its successive sibling is image and you want to delete that row using that id of anchor tag can you please provide html code of any one of that row so that it would be more easier, I have done some think like it earlier using code like
WebElement element=wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//a[#name='"+Name+"']["+(rowCount+1)+"]/succeeding-sibling::*")));
element.click();
Please post html
List<WebElement> links = driver.findElements(By.tagName("td"));
Iterator<WebElement> itr = links.iterator();
while(itr.hasNext()){
String DataToDelete = itr.next().getText();
if(DataToDelete.equals("EDUAR ALEX")){
// you can find the xpath using this code but to reach and click the desired delete image u can use below code
String xpath = driver.findElement(By.name(DataToDelete)).getAttribute("xpath");
//or below code uses id to reach the desired anchor tag and then it's succeeding sibling which is image in ur case and click on that image
String id = driver.findElement(By.name(DataToDelete)).getAttribute("id");
List<WebElement> ElementID=driver.findElements(By.xpath("//a[#id='"+id+"']"));
Iterator<WebElement> anchoritr=ElementID.iterator();
while(anchoritr.hasNext()){
WebElement AllAtributes=anchoritr.next();
String GetTitle=AllAtributes.getAttribute("title").toString();
if(GetTitle.equalsIgnoreCase("delete")){
WebElement delete=AllAtributes.findElement(By.xpath("//a[#id='"+id+"']/succeeding-sibling::*"));
delete.click();
}
}
}
}
Please let me know if it works or not.