I'm starting with capybara, cucumber and webdriver, and I was given the task of testing the upload of an image field.
So I simulated a shipping environment in which I could learn, it worked correctly, however, I need to leave the element "hidden", and I don't know if there is any method for capybara to select it.
So my code went in this direction:
HTML
<input type="file" name="attach-file" style="display: none;">
Capybara/Cucumber
addMedicine_page.attach_file('attach-file', 'assets/asset.jpg')
However it results in an Unable to find visible file field "attach-file" message that is not disabled (Capybara :: ElementNotFound)
If you're going to make the file input element non-visible you have to have some visible element available for the user to interact with which will in turn trigger the file inputs file selection. The best solution in that case is to use the block accepting from of attach_file
page.attach_file('assets/asset.jpg') do
# perform whatever action the user would to trigger the file selection
click_button 'Upload file'
end
if you can't that to work for you, you really should be able to and it most closely replicates a users behavior therefore making the test most valid, then you can use the make_visible option
page.attach_file('attach-file', 'assets/asset.jpg', make_visible: true)
which will temporarily make the file input visible, attach a file to it, and then re-hide it. If the standard CSS applied by make_visible by your page doesn't work to make the input visible you can set hash of CSS values to use rather than true
See https://www.rubydoc.info/github/jnicklas/capybara/Capybara/Node/Actions#attach_file-instance_method
Related
i want to upload a pic using robot framework into this :
I tried this :
Add PJ
Scroll Element Into View xpath://div[#class='drop-zone text-center']
Choose File xpath://label[#class='label-dropZone'] ..\Resources/Robot-framework-logo.png
but i'm getting this error :
ElementNotInteractableException: Message: element not interactable
What the underlying Selenium function behind Choose File does is to enter the text you give to it (that's the path to the local file), in an <input> element. These elements are the ones defined in the HTML standards for uploading files.
In "fancier" upload UI these input are hidden - the user doesn't see the file path, but sees explanatory text "choose a file here or drag&drop it", with pleasing formatting. This is the case with your example - and targeting that <label>, Selenium has failed by saying it is not interactable - one cannot "type" on it; it does need an <input>.
You may/should try to find the <input> in the form, though hidden, and target it. Sometimes that is not possible though - there might be JS code preventing you to change it; so the success rate is varying.
I'm making a plugin that gets the actual panel or text selection and runs a command on the cli with that value and some params that the user adds in a input.
The idea is to have a similar view than find-and-replace package, but from the first beginning I wasn't able to use space-pane-views for a error on jQuery.
So I decided to make it with React and as far as I was making everything was okayish, but I found 2 big problems.
First I understand what's the View of space-pan and all the ShadowDOM that uses, I feel that is not compatible with React at all, is some kind of big Model that gets data from the dom and from some methods.
So I created a <input /> and I figuret out that you can't interact as normal as a website with that input, doesn't have the hability of delete normally the text and you can't use the atom-text-editor styles into it.
in another hand I try to create a Custom Web Component with React like:
<atom-text-editor
{...this.props}
mini
tabindex='-1'
class={`${this.props.className}`}
data-grammar='text plain null-grammar'
data-encoding='utf8'
/>
and it works with inheriting the styles, but I can't access to the content of the Shadow DOM, neither add eventHandlers like onChange (onKeyPress works btw), this is basically a problem more than React that Atom, but is as far as I went in the intention to create a View in Atom.
Another option could be add draft-js from Fb, but it's a crazy idea for create a simple input.
Any idea to solve one of both problems?
Thanks!
If you add a normal input in React with className='native-key-bindings' the input contains the nativew key bindings, and you can attach the eventHandlers there.
I am new to Angular & Protractor (and web development for that matter), so I apologize of this is an obvious question.
I am trying to test our angular app with protractor, and it appears that I can locate the first element on the page. But cannot find any of the other elements using (id, name, model, css). I have tried chaining off of the first element, but always get the element not found error on the second element in the chain. I've have triple check the spelling so I am confident everything is correct.
Our page is setup up with multiple sections and when I "view source" I only see the root div.
<head>
</head>
<body>
<div ng-app="app" id="wrap">
<div ui-view></div>
</div>
</body>
</html>
But when I inspect the elements using the developer tools (F12), they exist in the DOM, I just don't know how to get to them.
<input type="text" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" data-ng-model="vm.searchText" id="searchText" placeholder="(Account # / Name / Nickname / Phone #)">
I tried to access the control listed above using the following:
browser.element(by.id("searchText").sendKeys("test");
browser.element(by.model("vm.searchText").sendKeys("test");
element(by.id("searchText").sendKeys("test");
element(by.model("vm.searchText").sendKeys("test");
I also create a single button and used partialButtonText & buttonText, neither of which worked.
I also tried to add some async functionality with "then" but that didn't work either. How do I access these elements are are not contained in a single html file?
thanks.....
If an element is not visible, I believe protractor isnt able to interact with it. It can't click or get text or anything if it is not visible, that is actually checked before it can perform the action.
What you can do is check the element is present to ensure it is somewhere on the html.
var searchText = $('#searchText');
expect(searchText.isPresent()).toBeTruthy('Search Text element not present');
This will find an element with a css selector of id searchText, and then check if it is present(exists on the html).
If you want to interact with it, remember that protractor looks around like a human would. If a human cant click it, neither can protractor! Make sure it is on the page and visible.
Don't have the reputation points to add this in the comments to user2020347's response so...When you say not in "view source" I assume you're talking about dynamically generated content. Instead of using view source either use chrome or firefox developer tools to make sure you're using the right locators.
For example in chrome's console the following should return a result once the page is loaded:
$$('#searchText')
$$('input[data-ng-model="vm.searchText"]')
It also looks like you're sending keys to the same element.
Since you have an angular app protractor should wait for all elements to load, but just in case you might want to wait for the element to be present and/or visible on the page.
Same happened to me, because Protractor executed on the original (first) tab.
Try to switch between the tabs before accessing the elements:
browser.getAllWindowHandles().then(function (handles) {
browser.driver.switchTo().window(handles[1]);
});
New to meteor , I am using meteor.js to create a simple project like this
I used <input value="{{counter}}" /> to create this input box showing value consistent with the paragraph.And it is working fine as you see.
However as I check the DOM tree in dev tools of chrome, I see <input> instead of <input value="1"> as I supposed it would be.
Why is the attribute value invisible here in DOM tree?Meanwhile,Can someone explain why I can see the number in input box even though I can't find the value attribute in DOM tree?
This is because Meteor packages all your template's js and html files in the same javascript file at build time.
Then the DOM is manipulated through javascript only. And lots of changes made to DOM elements through javascript do not show up in browser's consoles. For example, try to change an element's data attribute with jQuery data() and you won't see any new data-... attribute, same if you change your input's value by typing $('input').val('some value') in the console, the value will change but the value attribute won't show up.
If you open the console in your example (assuming that you are using Chrome, press F12) and switch to "Sources" and then open the only js file named '36dcbdf8917964892be8bca43c71d137318461f5.js' you will see that the value of the input is set through javascript (at line 82):
...
HTML.INPUT({value:function(){return Spacebars.mustache(e.lookup("counter"))}})
...
I have a web application with a form that has disabled fields in it. It allows a "Save As" function which basically means the settings can be copied into a new configuration (without being modified) and in the new configuration they can be changed to something else. The problem I am running into with this is that since the fields are disabled, they are not getting posted through and do not appear in the context object on the server side.
When I removed the logic to disable the fields, that part works fine. So the remaining problem is, how to "disable" the fields (not allow any change of the data in any of the entry fields) without really "disabling" them (so that the data gets posted through when saving)?
I was originally looking for a way to do this in CSS but not sure if it exists. The best solution is of course, the simplest one. Thanks in advance!
(Note: by 'disabled' I mean "The textboxes display but none of the text inside of them can be modified at all". It does not matter to me whether the cursor appears when you click inside it, though if I had a preference it would be no cursor...)
http://www.w3schools.com/TAGS/att_input_readonly.asp
readonly attribute is what you want.
i would suggest that instead of using the non-updateable field values from the page's inputs, you retrieve the original object from the DB and copy them from there. It's pretty trivial using something like Firebug to modify the contents of the page whose form will be posted back to modify the values, even if they are marked as readonly. Since you really want the values from the original, I would simply reget the object and copy them. Then you don't need to worry about whether the original (and non-updateable) properties get posted back at all.