Upload file to an input area using FileApi - ruby-on-rails

I'm using Capybara + RSpec and the capybara_webkit as driver. And a JS uploader with FileApi.
I'm trying to upload three images here:
<input type="file" name="image" multiple="" accept="image/*">
When I click on the "Select photos" button (on the browser), it opens the typical window where I can select 3 files from my computer.
I'd like to know how to reproduce it on capybara, as when the photos selector opens, I don't have the control on it. I tried to add the pictures to my tests folder and tried:
attach_file('image', File.absolute_path('../pictures/photo1.JPG'))
but with no results.

I finally found a solution. My input area has opacity set to 0, so that''s why i wasn't able to attach the files.
So i need to set its opacity to 1:
page.execute_script("$('input[name=file]').css('opacity','1')")

Related

Upload file using Jenkins Active Choices Reactive References plugin

I am using Jenkins Active Choice plugin. I want to provide a file upload function based on reference variable
The below setting allows me to enter text when i select reference parameter scan_type as vulnerability-Web
What i want is , instead of taking text input it should upload file , and content of the file should be assigned to SELENIUM_RECORDED_FILE
I tried using below groovy
if (scan_type.equals("Vulnerability-Web")) {
inputBox = "<body> <form action='upload.php' method='post' enctype='multipart/form-data'> Select file to upload: <input type='file' name='fileToUpload' id='fileToUpload'> </form>"
return inputBox
}
its adding file upload option but the file content is not stored in SELENIUM_RECORDED_FILE
Please let me know how can we achieve this
Reading through HERE, it looks like you must have
<input type="file" name="file">

attach_file isn't working the right way with capybara-webkit

I'm trying to attach some files to this input:
<input type="file" name="image" multiple="" accept="image/*">
My code, that is working when I use selenium driver, is:
attach_file('image', File.absolute_path('../pictures/pic1.JPG'))
attach_file('image', File.absolute_path('../pictures/pic2.JPG'))
attach_file('image', File.absolute_path('../pictures/pic3.JPG'))
The problems come when I use capybara-webkit: as the input is hidden and some elements overlaps it, I need to change some css properties:
page.execute_script("$('input[name=image]').css('opacity','1')")
page.execute_script("$('input[name=image]').css('position','fixed')")
page.execute_script("$('input[name=image]').css('top','620px')")
And even if the test passes, the pictures aren't uploading the right way. If I use page.save_screenshot('after_upload.png') to see what's happening:
Expected result (and result when using selenium driver) ->
Actual result when using capybara-webkit ->
I just found a "fix": put a sleep(3) after each image upload!

Image upload functional testing in Geb

When i am testing the image upload in Geb ,how i click the Open option when we
have to select image from the system My code is:
class UploadImageTestSpec extends GebReportingSpec{
def "test for UploadImage"()
{
when:
to LandingPage
waitFor(20) {title.endsWith("Jobulo")}
loginButton.click()
j_username="candidate2"
j_password="p"
login.click()
then:
at DashBoardPage
when:
at DashBoardPage
waitFor(20) {title.endsWith("Jobulo")}
uploadImage.click()
// uploadImage1.click()
Thread.sleep(1000)
//new File(".").getAbsolutePath().replace("..","");
// cd=new File(".").getAbsolutePath().replace("..",""); + "images.jpeg"
driver.manage().timeouts().implicitlyWait(200,TimeUnit.SECONDS)
crop.click();
then:
at DropDownPage
}
}
It is not possible to do image upload using geb.
Refer this link: http://www.gebish.org/manual/current/#file-upload
It’s currently not possible with WebDriver to simulate the process of a user clicking on a file upload control and choosing a file to upload via the normal file chooser. However, you can directly set the value of the upload control to the absolute path of a file on the system where the driver is running and on form submission that file will be uploaded.
<input type="file" name="csvFile">
$("form").csvFile = "/path/to/my/file.csv"
-- From the link

Draggable, Droppable, and Clone

I'm trying to make a "picture palette", where you have a bunch of images and can drag & drop them to replace the image in a particular div.
Drag works, the drop event registers, but the passed ui object doesn't seem to contain a clone of the dragged image as expected. What's wrong?
JsFiddle.
ui.helper is an array with 1 element. Console logging is an excellent feature that helps debug javascript. You need to either have Chrome, or Firefox with "Developer Tools" plugin installed.
console.log(ui.helper);
Outputs:
[<img src=​"http:​/​/​jsfiddle.net/​img/​logo.png" class=​"ui-draggable" style=​"position:​ absolute;​ left:​ 1px;​ top:​ 28px;​ opacity:​ 1;​ ">​]

Use WatiN for automation upload file on the website

I need upload file on the website.
But Have a problem, i can't choose file automatic in code. Always browser show me choose file window.
What wrong in my code?
IE ie = new IE("https://www.xxxx.com/WFrmlogin.aspx");
FileUploadDialogHandler uploadHandler = new FileUploadDialogHandler(#"D:\065-6405_URGENT.xls");
ie.WaitForComplete();
ie.TextField(Find.ById("txtUser")).TypeText("login");
ie.TextField(Find.ById("txtPassWord")).TypeText("***");
ie.Button(Find.ById("btnok")).Click();
ie.WaitForComplete();
ie.GoTo("https://www.orientspareparts.com/inq/WFrmUpOption.aspx");
ie.WaitForComplete();
ie.DialogWatcher.Clear();
ie.AddDialogHandler(uploadHandler);
// This code show choose file dialog
ie.FileUpload(Find.ById("FilUpload")).ClickNoWait();
ie.Button(Find.ById("butUpload")).Click();
ie.WaitForComplete();
I had the same problem. I'm using a GMail-like upload process, so I wanted to test actual use-cases. Just setting the Text property on my hidden file input wasn't an option.
I ended up using SendKeys to type the path to my file, then sent "{ENTER}" to submit the dialog.
SetForegroundWindow(browser.hWnd);
SendKeys.SendWait("{ENTER}");
Thread.Sleep(500); // An unfortunate necessity, to give the dialog time to pop up.
SendKeys.SendWait(#"C:\myfile.jpg{ENTER}")
I don't love this solution, especially not the sleep, but it was the best I could do in under 30 mins.
If anyone has a better option, let me know!
Why do you need to select from the Dialog? Try to just set the Text:
ie.FileUpload(Find.ById("profile_file")).Text = "C:/Desktop/image.jpg";
I guess you might talk to the fellow who asked this question:
WatiN File Upload

Resources