Watir - file_field call is clicking on the wrong element when driving Chrome - selenium

Working on a web page that contains a form with a choose file input as in the following snippet:
<form ... >
<div class="form__wrap">
<ul class="form__list">
Import:
<label for="fileUploadInput" class="btn mediaChoose inline" id="fileUpload">Choose File</label>
<input class="mediaFile" id="fileUploadInput" name="file" type="file" />
</ul>
</div>
...
</form>
Using Watir WebDriver, the following returns true:
puts file_field(:id => "fileUploadInput").exists?
but, the file_field call below results in the following error on Chrome (works on Firefox and IE):
file_field(:id => "fileUploadInput").set(pathtofile)
Element is not clickable at point (695, 314). Other element would receive the click:
<label for="fileUploadInput" class="btn mediaChooseinline" id="fileUpload">...</label>

My guess is that you are driving Chrome, since I have seen errors like that before. The error message is saying that you are trying to click file upload element, but label is displayed over it, so clicking the desired coordinates on the screen will click the label instead of file upload element. Chrome gets confused at that point and refuses to click.
To make sure that is the problem, try the same code with another browser, Fireofox for example. Experience has shown that Firefox does not care if another element will receive the click.

I tried a scaled down form similar to your posted form and it has worked for me in Chrome and Firefox. This was tested on a Windows machine. I did notice that FireFox and Chrome have different syntaxes for the path directory.
HTML -
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Import:
<label for="fileUploadInput" class="btn mediaChoose inline" id="fileUpload" >test</label>
<input class="mediaFile" id="fileUploadInput" name="file" type="file" />
</form>
</body>
</html>
Test Code
require 'watir-webdriver'
browser = Watir::Browser.new :firefox
browser.goto "C:\\Users\\mike\\ruby\\chrome1.html"
puts browser.file_field(:id => "fileUploadInput").exists?
#browser.file_field(:id => "fileUploadInput").set("c:\\Windows\\") #chrome
browser.file_field(:id => "fileUploadInput").set("c:\\Windows\\..") #firefox
browser.file_field(:id => "fileUploadInput").click

Related

I add an radio button to the opener Window with appendChild. But in MS Edge it doesnt work

I add a Radio button with the function appendChild to the opener window. That works fine in Firefox and Chrome, but not in Microsoft Edge.
From the first HTML page I call with form Action a new targed window. Inside this window I placed a Javascript that insert with appendChild a new Radio Button on the first opener Window. The Code works fine in Firefox and Chrom. In MS Edge it has an error with the appendChild command.
Part of HTML Code from the first Window
//Position of Radio button
</td><td id="logos">
<input type="radio" name="logo_radio" value="test5.jpg" checked>test5.jpg<br>
<input type="radio" name="logo_radio" value="malvorlagenfeuerwehr04.jpg">malvorlagenfeuerwehr04.jpg<br>
</td></tr>
//Calling now window with a button:
<input name="logo_test" type="button" onclick="document.formLogo.submit();" Value="Neues Logo laden">
<form name="formLogo" enctype="multipart/form-data" action="add_logo.php" method="post" accept-charset="ISO-8859-1" target="_blank">
<input type="hidden" name="id" value="{$_POST['id']}">
<input type="hidden" name="eintrag" value="$eintrag">
</form>
Javascript function in the second Window:
<script type="text/javascript">
try {
var newRadioButton = document.createElement("input");
newRadioButton.setAttribute('type','radio');
newRadioButton.setAttribute('name','logo_radio');
newRadioButton.setAttribute('value','$file_new');
var obj1 = window.opener.document.getElementById("logos");
obj1.appendChild(newRadioButton);
}catch(err) {alert(err.message);}
</script>
IE returns a error message "SCRIPT 65535: invalid argument"
Manny thanks for your help.
I found the solution. The new Radio element have to create into the opener window:
var newRadioButton = window.opener.document.createElement("input");

PhantomJS or CasperJS form autosubmit

I am building a laboratory task for exploitation CSRF vulnerability.
I need a bot, who will visit my page and execute JS:
<html>
<head>
</head>
<body>
<form action="http://localhost:9010/csrf/register.php" method="POST" id="csrf-form">
<input type="hidden" name="login" value="casper" />
<input type="hidden" name="password" value="casper" />
<input type="submit" value="Submit request"/>
</form>
</body>
<script>document.getElementById("csrf-form").submit()</script>
</html>
I can't proceed it with PhantomJS or CasperJS.
I don't know how HTML code will look like for different students (form id attribute can be different), I just want to execute JS code on page.
CasperJS version 1.1.4 at /opt/casperjs, using phantomjs version 2.1.1
var casper = require('casper').create();
casper.start('http://127.0.0.1/mypage.html');
Since you do not know the form id attribute (and since other element attributes are specific to each student), you can use casper.fillXPath() to use general selectors to fill out and auto-submit your form.
Example:
casper.start('https://example.com/', function () {
this.fillXPath('form', {
'//form/input[#type="hidden"][1]': username,
'//form/input[#type="hidden"][2]': password,
}, true);
});
Otherwise, you can look into using casper.fill(), casper.fillSelectors(), or casper.fillLabels() if you know more information about the selectors being used in the form.
If you need to simply execute JavaScript into the Page DOM environment, you can use casper.evaluate().

Simple MVC4 unobtrusive ajax not working

I am writing a very simple MVC4 test page and unobtrusive Ajax does not seem to be working. When I click my submit Button the page is not submitted.
I have a breakpoint is VS and can tell there is no request.
I am using Firefox and when I click the submit button the Web Console shows this JavaScript error:
--- Empty string passed to getElementById()
Which occurs at line 16 in.--- jquery.unobtrusive-ajax.js
I setup ajax Options as follows:
AjaxOptions ajaxOpts = new AjaxOptions { UpdateTargetId = "officeList", Confirm = "Are you sure?", Url = Url.Action("GetOfficeData") };
Here is my AjaxForm:
#using (Ajax.BeginForm("GetOfficeData", ajaxOpts))
{
<div>
#Html.DropDownList("orgList", new SelectList(Model.Organizations, "ORGID", "ORGNAME"));
<button type="submit" id="btnSubmit">Submit</button>
</div>
}
I do get the 'Are you sure prompt' when I click the submit button (as defined in the ajax options).
If I change Ajax.BeginForm to:
#using (Html.BeginForm())
...
Then there is a request, my breakpoints get hit, and there as no JS errors.
I have used NuGet to get the latest version of both jQuery and unobtrusive-ajax. Here are
my script tags from view source (all of them – in order):
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/modernizr-2.5.3.js"></script>
Here is the form that gets rendered:
<form action="/Selectee/GetOfficeData" data-ajax="true" data-ajax-confirm="Are you sure?" data-ajax-mode="replace" data-ajax-update="#officeList" data-ajax-url="/Selectee/GetOfficeData" id="form0" method="post">
<div>
/*--my drop down .....
<br />
<button type="submit" id="btnSubmit">Submit</button>
</div>
</form>
Any ideas?
I have it working.
I did not have an Html.BeginForm(), only the Ajax.BeginForm(). Is that valid?
I added an Html.BeginForm() with an Ajax.BeginForm() and all my controls inside that form and it started working.
I thought Ajax.BeginForm() took the place of Html.BeginForm, but it appears I need both. Is that correct?

Using attachFile and Submit

I have the following HTML:
<form action="upload" method="post" enctype="multipart/form-data" >
Select a file to upload:
<input type="file" name="file"/>
<input type="hidden" name="USER_NAME" id="USER_NAME" value="user_name"/>
<input type="submit" value="Submit"/>
</form>
I'm having a couple of problems.
Firstly, in the entry field (named "file") I want to set the name of the file to upload. I can do that just with WebElement.type(), but I get a warning about using attachFile. I'm happy to use that, but when I do so I get the error:
com.thoughtworks.selenium.SeleniumException: Element must be user-editable in order to clear it.
My second problem is that if I set the content of the entry field by type(), the submit button doesn't work. I can get the WebElement by css, but neither click() or submit() works. Nothing happens at all when I do either.
Thanks in advance for any help, and apologies for dumbness.

Grails acegi plugin remember me not working

Im am having problems with the remember me functionality of the grails acegi plugin (version 0.5.3)
The first time I login I check the remember me check box and login. This works. I then shutdown my browser and restart it and browse to the app. The login page is presented with the user name populated, password empty and remember me check box checked. I would have expect to navigate straight into the application (http://localhost:8080/application normally redirects to my landing page). If I try and manually login (enter password) it now doesnt work, I cant get past the login page.
Here is my login form:
<form action='${postUrl}' method='POST' id='loginForm' class='cssform'>
<p>
<label for='j_username'>Email</label>
<input type='text' class='text_' name='j_username' id='j_username' value='${request.remoteUser}' />
</p>
<p>
<label for='j_password'>Password</label>
<input type='password' class='text_' name='j_password' id='j_password' />
</p>
<p>
<label for='remember_me'>Remember me</label>
<input type='checkbox' class='chk' name='_spring_security_remember_me' id='remember_me'
<g:if test='${hasCookie}'>checked='checked'</g:if> />
</p>
<p>
<input type='submit' value='Login' />
</p>
</form>
SecurityConfig.groovy
/** rememberMeServices */
cookieName = 'grails_remember_me'
alwaysRemember = false
tokenValiditySeconds = 1209600 //14 days
parameter = '_spring_security_remember_me'
rememberMeKey = 'grailsRocks'
This is just the default generated behavior. Am I missing something simple? Do I need to manually setup rememberMeServices or something?
I have confirmed that the "grails_remember_me" cookie is being created by using the chrome developer tools. I also get this same behavior with firefox.
Any ideas? Thanks
Never really got to the bottom of this. The way I "fixed" it was by upgrading to the new spring security plugin.
http://grails.org/plugin/spring-security-core