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"))}})
...
Related
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
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]);
});
I have a template that has a some text updated reactively once every second.
I also have a button, that when clicked, gets it's style changed to display a disabled button - this works fine but as soon as the template re-renders due to the condition above then the button reverts back to it's original style. It is almost as if the entire template is rendering from scratch (template.render is fired every second).
Is this normal? do I need to control the style via a reactive {{btnstyle}} type mechanism?
Yes, the typical way to do this is to set the style via a class that is set by a template helper function. For disabling button/input elements, you can just use the disabled attribute instead of class:
<button type="button" {{#if buttonDisabled}}disabled{{/if}}>Button Text</button>
or
<input type="button" value="Button Text" {{#if buttonDisabled}}disabled{{/if}} />
and then do:
Template.yourFormTemplate.buttonDisabled = function() {
// return true or false depending on if the button should be disabled
};
The problem is that when Meteor re-renders your template, the element which you set the style of is actually getting replaced with a new one. Note that the Meteor team is currently working on a new templating engine that works on a more fine-grained level, so that elements don't necessarily get replaced like that. You can try your current code with the preview release of the new templating engine with this command:
meteor --release shark-1-29-2014-e
or
mrt --release shark-1-29-2014-e
However, it is still generally recommended to style elements via the class attribute, set with a template helper. This is a more declarative, template-driven approach that just fits better with the "Meteor way" to do things, rather than the imperative approach of setting the style directly from your JavaScript. It also helps with separating concerns, by allowing your CSS to control the actual style.