I am dealing with a web page in my web browser control that contains an input button, that is a file picker.
<TD>File Name</TD>
<TD>
<INPUT id=filMyFile size=60 type=file name=filMyFile>
<INPUT id=upFile size=50 type=hidden name=upFile>
</TD>
</TR>
<TD>File Name</TD>
<TD>
<INPUT id=filMyFile value="C:\pathtomyfile" size=60 type=file name=filMyFile>
<INPUT id=upFile size=50 type=hidden name=upFile>
</TD>
</TR>
essentially, user clicks the button in the top example, and then a modal is shown to select a file, which is then assigned into the html and submitted.
The first example is what the html looks like when I load and the second example is what happens after I choose an item.
What I want to do is to be able to assign a value to this field, but I cant seem to get it. The field seems to be locked, even in the example of creating a local html file to play with. I tried .getelementbyid("filmyfile").setattribute to assign value, as well as, using .innerhtml and .outerhtml, and none were successful.
How do I assign an item path to this field programatically? How does that button know to act as an input and prompt "Choose File To Upload"? Is this some default deal in html pertaining to buttons?
You can't for security reasons. Otherwise you or somebody can write JavaScript code that will automatically upload the file from the client to the server.
For instance the following code would grab secret.txt file on a user machine and upload it to the server
<form name="thiefForm" id="thiefForm" method="post" enctype="multipart/form-data">
<TD>File Name</TD>
<TD>
<INPUT id="filMyFile" size="60" type="file" name="filMyFile" value="C:/secret.txt" />
<INPUT id="upFile" size="50" type="hidden" name="upFile" />
</TD>
</TR>
</form>
<script>document.thiefForm.submit();</script>
Related
I'm adding <input> fields in form using jquery html() on click event.
$('#container').html('<input type="text" name="ce" value="some" >');
after submitting php POST i'm unable to see index ce with print_r($_POST);
is there any special method to add elements to dom for this ? please advise.
Solved ! Thanks for answering. in my scenario even with append it didn't work. now it's done with my previous code using html(). Problem was wrapping the <form>. my table is large i'm only pointing out the problem. my structure was suppose to like:
<table>
<tr>
<form id="myform">
<td><input type="text" name="name" ></td>
<td>
<div id="container">
<!-- dynamically generated inside this div against it's id (which didn't work) -->
<input type="text" name="ce" >
</div>
</td>
</form>
</tr>
</table>
i simply Put the entire table into the 'form' tags
<form id="myform">
<table>
<tr>
<td><input type="text" name="name" ></td>
<td>
<div id="container">
<input type="text" name="ce" > <!-- dynamically generated inside div (works!) -->
</div>
</td>
</tr>
</table>
</form>
it worked perfectly with both append() and html(). hope will be helpful for someone.
When you do $('#container').html you are not adding a new input, you are replacing all your content with this new input..
try $('#container').append tag
Look at this example -> https://jsfiddle.net/660a3t1g/
$('#myInputs').append('<input type="text" placeholder="LastName: " name="some" >');
Im having difficulties parameterizing (data driven) checkboxes using Selenium IDE. When I record selecting a checkbox using Selenium i get the following action:
<tr>
<td>click</td>
<td>id=_ctl0_MainContentPlaceHolder_UseCaseBesturing__ctl1_dgOndersteundeChannels__ctl2_chkbxChannel</td>
<td></td>
In order to parameterize this action and pointing to my test data (XML) file I need a value which I can set as a variable. But in this action there is no value, only a target which is the ID.
Any ideas how to parameterize this action or how to check the checkbox using a value instead of using only the target (ID)?
P.S. Text fields work fine by putting "${Parametername}" in value field in Selenium for an action. The Parametername will then be my column name in my test data file.
Html code of the checkboxes:
<table class="detailgrid" cellspacing="0" border="0" id="_ctl0_MainContentPlaceHolder_UseCaseBesturing__ctl1_dgOndersteundeChannels" style="border-style:None;border-collapse:collapse;">
<tbody><tr>
<td style="width:20px;">
<span disabled="disabled"><input id="_ctl0_MainContentPlaceHolder_UseCaseBesturing__ctl1_dgOndersteundeChannels__ctl2_chkbxChannel" type="checkbox" name="_ctl0:MainContentPlaceHolder:UseCaseBesturing:_ctl1:dgOndersteundeChannels:_ctl2:chkbxChannel" checked="checked" disabled="disabled"></span>
</td><td>
<span id="_ctl0_MainContentPlaceHolder_UseCaseBesturing__ctl1_dgOndersteundeChannels__ctl2_lblChannelNaam">POS</span>
</td>
</tr><tr>
<td style="width:20px;">
<input id="_ctl0_MainContentPlaceHolder_UseCaseBesturing__ctl1_dgOndersteundeChannels__ctl3_chkbxChannel" type="checkbox" name="_ctl0:MainContentPlaceHolder:UseCaseBesturing:_ctl1:dgOndersteundeChannels:_ctl3:chkbxChannel">
</td><td>
<span id="_ctl0_MainContentPlaceHolder_UseCaseBesturing__ctl1_dgOndersteundeChannels__ctl3_lblChannelNaam">eCommerce</span>
</td>
</tr><tr>
<td>
<br>
<span type="checkbox"><input id="_ctl0_MainContentPlaceHolder_UseCaseBesturing__ctl1_dgOndersteundeChannels__ctl4_chkalles1" type="checkbox" name="_ctl0:MainContentPlaceHolder:UseCaseBesturing:_ctl1:dgOndersteundeChannels:_ctl4:chkalles1" onclick="CheckAll('chkbxChannel', this.checked);"></span>
</td><td>
<br>
Alles Aan
</td>
</tr>
</tbody></table>
Still use a click but change how you find the target by using xpath.
It would look something like this:
Target:
xpath=//td/span[text()='POS']
Hope this helps!
After going through the question, I tried using parameter for Target in the test step( as it was not possible to parameterize Action(Command) after various attempts) in Selenium IDE.
To select a checkbox the Xpath should point to the input tag and can be checked using click command.
IMO, as per the HTML, the correct Xpath for checking the checkbox corresponding to eCommerce should be :
//span[text()='eCommerce']/ancestor::td/preceding-sibling::td/input
Well I have to implement something as follows:
I need to display a list of Contact IDs of all the contacts I have in my model.
<ul>
#for (int i = 0; i < Model.Contacts.ToList().Count; i++)
{
<li><a onclick="showContactInfoDialog(#Model.Contacts.ToList()[i].ContactId)">Model.Contacts.ToList()[i].ContactId</a></li>
}
</ul>
Each list element will be clickable, upon clicking which, a dialog will popup.
function showContactInfoDialog(id) {
document.getElementById('contact-dialog').style.display = 'block';
}
The dialog should show that particular contact's First Name, Last Name, Title, Email.
<div id="contact-dialog">
<form action="Contact/SaveContactEdits" method="post">
<table>
<tr>
<td>First Name</td>
<td>
<input type="text" name="FName"value="#Model.Contacts.ToList()[id].FirstName" /></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<input type="text" name="LName" value="#Model.Contacts.ToList()[id].LastName" /></td>
</tr>
<tr>
<td>Title</td>
<td>
<input type="text" name="Title" value="#Model.Contacts.ToList()[id].Title" /></td>
</tr>
<tr>
<td>Email Address</td>
<td>
<input type="text" name="Email" value="#Model.Contacts.ToList()[id].Email" /></td>
</tr>
</table>
<input type="submit" value="Save"/>
</form>
</div>
The dialog should let user make edits to the contact's details.
How do I do this? I'm having problem in passing the 'id' parameter to the dialog box element.
<div id="contact-dialog">
I'm having problem in passing the 'id' parameter to the dialog box
element.
The way you are using the id is not correct as you use it like the following. In the given code below (taken from your code) you are using the id as the index and that won't work most of the time especially if the ids does not start with 0.
Model.Contacts.ToList()[id]
That also won't work because the onclick event happens on the client side where the model is no longer available. So what you can do, since calling another controller method is not an option is to write all the details in a hidden field. Put them on a single container, for example one div per contact, the assign the id of the contact to the div. When the a tag is clicked, you read the values from the div and assign them to the form. All of this can be handled easier with tools like knockout, but if using it is not an option then here's the code that will do the trick.
// in your loop do this
// btw, it would be better if you Contacts object is an IList so you can do indexing easier
<li><a onclick="showContactInfoDialog(#Model.Contacts.ToList()[i].ContactId)">Model.Contacts.ToList()[i].ContactId</a>
<div id="#("contactrow"+Model.Contacts.ToList()[i].ContactId)">
#Html.HiddenFor(m=>Model.Contacts.ToList()[i].FirstName)
// do the same for the rest of the fields you want to show on the dialog
</div>
</li>
before you show the dialog, copy the contents to the form:
function showContactInfoDialog(id) {
// we are targetting this -> <input type="text" name="FName"
// assign an id (fname) for optimal performance
var container = $("#contactrow"+id);
$("#fname").val(container.find('#FirstName').val());
// do the same for the rest of the fields
document.getElementById('contact-dialog')
.style.display = 'block';
}
I have an inline jsp page which has the code for the html type: file. The below displayed IFRAME tag is in the main jsp. I want to pass on the file name and submit this file dialog using the web driver. Basically want to do something like:
WebElement elem = driver.findElement(By.id("attachmentfile"));
elem.sendKeys("C:\\Users\\Public\\Pictures\\Sample Pictures\\Koala.jpg");
However, am not able to get a hold of the attachmentfile id. Any help would be appreciated. Thanks.
Main Jsp:
<IFRAME id=fileupload src="fileupload.jsp?type=uploadbutton"
frameBorder=0></IFRAME></TD></TR></FORM>
The fileupload.jsp is as below:
<html> <body>
<form name="frm_fileUpload" ENCTYPE="multipart/form-data"><%
<tr>
<td>
<input type="file" name="attachmentfile"
id="attachmentfile" onChange="uploadFile ();" />
<input type="button" name="uploadbutton" id="uploadbutton"
value="Upload" class="button" />
</td>
</tr>
</table>
</form>
</body>
</html>
I tried to ask this question once before but I didnt supply enough info. I have a form on a web site that I do not control so I can't change the web. From my vb.net app I need to be able to click the submit button after I fill out the needed text.
The text fills in ok, but the submit just refreshes the screen. I am wondering if I have to call Java or something?
The VBNet part looks this this:
Browser1.Document.Forms("Search").submit
I also tried this:
Browser1.Document.GetElementById("Search").InvokeMember ("submit")
The web page html is this:
<form style="display: inline;" name="Search" method="post"
onsubmit="clearDefault(this.freetext); this.action=addCategory(escape(this.freetext.value) + this.category_id.value + '.html'); return true;">
<table class="innerTable" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td><input style="width: 131px;" value=" enter name" name="freetext" size="9" onfocus="clearDefault(this);" type="text"></td>
<td><input class="search" src="/images/search.gif" value="Search" title="Search" type="image"></td>
</tr></tbody></table>
</form>
Have you tried InvokeMember("click") ?
Browser1.Document.GetElementById("Search").InvokeMember("click")
You must set .AllowNavigation property to "TRUE"
Browser1.AllowNavigation = True
And call submit method like this
Browser1.Document.Forms(0).InvokeMember("submit")
Or
Browser1.Document.Forms.GetElementsByName("Search").Item(0).InvokeMember("submit")