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!
Related
I am trying to add a horizontal line option to the Trix editor in Rails 6.1.4. The example that I am finding for this (https://codepen.io/javan/pen/oQpevW) works perfectly, as long as it runs in CodePen. When I implement the example I am getting the option on the toolbar, but when I attempt to use it, I get the error message that "insertAttachment" is not a function.
addEventListener("trix-initialize", (event) ->
toolbarElement = event.target.previousSibling
blockTools = toolbarElement.querySelector("[data-trix-button-group=block-tools]")
if !!blockTools
blockTools.insertAdjacentHTML("afterbegin", '<button type="button" class="trix-button" data-trix-action="x-horizontal-rule" title="Horizontal Rule" tabindex="-1">-</button>')
)
addEventListener("trix-action-invoke", (event) ->
if (event.actionName == "x-horizontal-rule")
editor = event.target
attachment = new Trix.Attachment({ content: "<hr>", contentType: "application/vnd.trix.horizontal-rule.html" })
editor.insertAttachment(attachment)
)
As an interesting side-note, the initialize event was always triggered on the edit div, not the toolbar div, so I had to grab the previous sibling of the event target, otherwise the "block-tools" button group was never found. The "trix-action-invoke" event is triggering as it should and I have verified that the target is the correct div.
Because the example is using Trix 1.0.0, I tried with this version as well, but it generated the error message stating "Trix.Attachment is not a constructor".
I read a post for a different issue ("new Trix is not defined" when using Basecamp / Trix Editor) that implied that there could be a problem with Trix not being loaded yet by the time I want to use it, and it suggested to pull the JS from cloudflare directly, but this didn't solve my issue.
Any suggestions on what could be done to get this to work?
I saw this error when I was scraping dashboard with Capybara + Poltergeist. I already tried the option suggested in the other posts but didn't work yet.
Firing a click at co-ordinates [1571.5, 584] failed. Poltergeist detected another element with CSS selector 'html body div#app div.layout div div.dashboard div.dashboard-content div.monitor div.fixed.loading.show' at this position. It may be overlapping the element you are trying to interact with. If you don't care about overlapping elements, try using node.trigger('click').
Options I tried
Adding window_size got the same error. The coordinate(1571.5, 584) seems to be within the window size specified in the option(1600, 1200)
Capybara.register_driver :poltergeist do |app|
Capybara::Poltergeist::Driver.new(app, window_size: [1600, 1200])
end
Use trigger("click") instead of .click. This doesn't throw error but couldn't get the correct html response.
Could anyone give me some advice?
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')")
Since upgrading to Geb 0.12.2 and Selenium 2.48.2, I cant get the following to work:
$("form").validOn(dateString)
I have tried variations like:
$("input",name:"validOn").value(dateString)
and
$("form").validOn << Keys.chord(Keys.CONTROL, "a")
$("form").validOn << Keys.chord(Keys.DELETE)
if(date){
$("form").validOn << date
}
The element I am trying to set is using a jquery datepicker:
<form class="form-inline">
<label>Valid On:</label>
<input size="10" type="text" id="datepicker-validOn" name="validOn" value="${validOn}">
...
</form>
..
..
<r:script type="text/javascript">
$("#datepicker-validOn").datepicker({
format:"${session.sessionPreferences?.globalDatepickerFormat}"
});
...
The datepicker is opened which means that selecting the field works, but the string value is not placed inside the input field. I suspect that this has to do with the focus moving to the datepicker, but have not found a way to fix it. I tried having two .value(dateString) hoping that the second will return focus to the field but this has not worked. Also, the original html is not altered by the datepicker.
I am using firefox 33.1.1
This only happens on headless environment, using Hudson with Xvfb to run the functional tests. Running locally on desktop with same version of firefox works as expected, using this format : $("input",name:"validOn").value(dateString)
Any suggestions?
Changing the resolution for Xvfb from 1024x1024x24 to 1600x1200x24 has fixed the issue.. Not sure how this could affect the element focusing, but apparently it does.
I have a simple modal that appears in which the user is shown the browse button to add the file to upload. Due to an unknown issue, be it the fact its an HTML5 file input therefore the browser adds its own functions to it, this has become a pain to test.
On my page I have:
<input type="file" id="photo_upload">
Capybara offers a solution out of the box which is:
attach_file <<upload_file_id>>, <<file_path>>
This behind the scenes executes a send_keys command to push the file_path into the path container for this input, however this simply did not work with my setup. I am running Firefox 25.0.1 on Windows 8. I tried both a relative path and a full path to this file, with forward and backslash combinations.
When I mean it did not work, I mean when my ajax script executes from clicking the button 'upload' next to it, it does not send any file object in the params.
I even tried to use capybara to send the file path directly:
find_field(<<upload_file_id>>).native.send_keys(<<file_path>>)
Next up, was to attempt to use selenium to push it in using:
element = driver.find_element(:id, <<upload_file_id>>)
element.send_keys <<file_path>>
Then I tried executing script to ensure the element was visible, and then setting it:
element = page.execute_script(
"document.getElementById('#{<<upload_file_id>>}').style.visibility = 'visible';
document.getElementById('#{<<upload_file_id>>}').style.height = '20px';
document.getElementById('#{<<upload_file_id>>}').style.width = '60px';
document.getElementById('#{<<upload_file_id>>}').style.opacity = 1; return
document.getElementById('#{<<upload_file_id>>}')")
find_field(field_locator).native.send_keys(<<file_path>>)
This didn't work either. Now I am completely stuck. All the help on here and google points to using the above, but it just simply does not work for my setup.
My options as far as I can see it are to use a windows automation script and jump out of capybara, run the script, and then continue, or to directly call the upload url either from capybara using a post or calling the js ajax that currently does it.
So I have solved it, and its not too ugly. I used the automation route via AutoIT. The bundle you download with AutoIT includes a script to exe converter and using the below script (I can not take credit for the script) I created an exe:
Local Const $dialogTitle = $CmdLine[2]
Local Const $timeout = 5
Local $windowFound = WinWait($dialogTitle, "", $timeout)
$windowFound = WinWait($dialogTitle, "", $timeout)
Local $windowHandle
If $windowFound Then
$windowHandle = WinGetHandle("[LAST]")
WinActivate($windowHandle)
ControlSetText($windowHandle, "", "[CLASS:Edit; INSTANCE:1]", $CmdLine[1])
ControlClick($windowHandle, "", "[CLASS:Button; TEXT:&Open]")
Else
MsgBox(0, "", "Could not find window.")
Exit 1
EndIf
In my capybara script, I merely run:
find_field(<<upload_file_id>>).click
system("<<full_path>>\\file_upload.exe \"#{<<file_path>>}\" \"File Upload\"")
and it works perfectly! In fact, I think I prefer the fact it exactly mimics what a user would be doing.