What exactly does the data-renderif attribute do with Batman.js?
I initially thought that it would render the DOM node only if the attribute value would be true. But then there's data-insertif that does that as expected.
data-renderif is only meant to defer evaluating the bindings of a node's children until the binding value is updated to true. You probably want to use it in conjunction with data-insertif or data-removeif.
The dataChange method for this binding can be viewed here. This function basically just removes the data-renderif attribute and initializes the children node's bindings.
Related
I am trying to learn the PageFactory model. I understood the fact that when we do a initElements, the WebElements are located. Say for example, I click on a webelement and because of which there is a change in one of the other webelements in DOM. Now, obviously I would get a StaleElementReferenceException here. How would I resolve this issue?
Should I find that specific WebElement again knowing the fact that there can be a change in the WebElement's properties in the DOM? or is there an another way to handle this?
StaleElementReferenceException
StaleElementReferenceException extends WebDriverException and indicates that the previous reference of the element is now stale and the element reference is no longer present on the DOM of the page.
Common Reasons
The common reasons behind facing StaleElementReferenceException are as follows:
The element has been deleted entirely.
The element is no longer attached to the DOM.
The webpage on which the element was part of has been refreshed.
The (previous) element has been deleted by a JavaScript or AjaxCall and is replaced by a (new) element with the same ID or other attributes.
Solution : If an (old) element has been replaced with new identical one, the simple strategy would be to use findElement() or findElements to look out for the element again.
Answering your queries
When we do a initElements, the WebElements are located : When you call initElements() method, all the WebElements of that page will get initialized. For example,
LoginPageNew login_page = PageFactory.initElements(driver, LoginPageNew.class);
This line of code will initialize all the static WebElements defined within the scope of the LoginPageNew.class whenever and wherever it is invoked from your Automation Script.
I click on a webelement and because of which there is a change in one of the other webelements in DOM : This is pretty much possible.
As an example, in general invoking click() on a <input> tag wouldn't trigger any change of any of the WebElements on the HTML DOM.
Where as invoking click() on a <button> tag or <a> tag may call a JavaScript or a Ajax which inturn may delete an element or can replace the (previous) element by a (new) element with the same ID or other attributes.
Conclusion
So, if WebDriver throws a StaleElementReferenceException, that implies even though the element still exists, the reference is lost. We should discard the current reference we have and replace it by locating the WebElement once again when it gets attached to the DOM. That means you have to again reinitialize the class through initElements() method which inturn reinitializes all the WebElements defined in that page.
Solution
If a old element has been replaced with new identical one, the simple strategy would be to invoke WebDriverWait inconjunction with ExpectedConditions to look out for the element.
You can find relevant detailed discussions in:
How to add explicit wait in PageFactory in PageObjectModel?
References
Here are the references of this discussion:
Stale Element Reference Exception
Class StaleElementReferenceException
Selenium: How to tell if RemoteWebDriver.findElements(By) can throw StaleElementReferenceException at all?
This is a known problem with the PageFactory implementation.
If you are unlucky enough for the element to become stale in the instant between the element being found, and then the element being clicked upon, you will get this error. Unfortunately the PageFactory code does not try to find the element again if it has become stale and it throws an Exception.
I would classify this as a bug with PageFactory, it should auto re-find the element if it ever becomes stale (unless the #CacheLookup annotation is used).
The suggestion to recall initElements isn't going to fix anything, you only need to init the elements once because that binds a Java proxy class to the element in question. The page factory implementation is supposed to remove the possibility of StaleElementReferenceExceptions (hence why this is a bug)
Stale element exception is thrown in two cases
The element is no longer attached to the DOM.
The element has been deleted entirely.
When this happen you wrap your code in try catch block then you can loop and retry as many times as you need until it succeeds.
public void waitForElementPresent(final By by, int timeout){
WebDriverWait wait = (WebDriverWait)new WebDriverWait(driver,timeout)
.ignoring(StaleElementReferenceException.class);
wait.until(new ExpectedCondition<Boolean>(){
#Override
public Boolean apply(WebDriver webDriver) {
WebElement element = webDriver.findElement(by);
return element != null && element.isDisplayed();
}
});
}
Note: In order to demonstrate the below issue, I've created an example in Plunker. In there, I'm using a mock server due to the flaw of the writable service from odata.org. Nevertheless, the issue is reproducible with a real server as well.
Currently, I'm binding a child collection to a list relative to an expanded single entity through a navigation property. Something like this:
<Page title="Products"
binding="{
path: 'odataModel>/BusinessPartnerSet(\'0100000000\')',
parameters: {
expand: 'ToProducts'
}
}"
>
<List items="{odataModel>ToProducts}">
<StandardListItem title="{odataModel>ProductName}" />
</List>
</Page>
Now, if I delete an item from the list, the ListBinding sends a batch request containing DELETE and GET. Here is a screenshot of the batchRequestSent event:
The deleted item is gone from the ListBinding and the list is updated as expected. If I have an additional list with the same bindings, then that additional list gets also updated because of the TwoWay data binding (like the Plunker example above). So far so good.
Problem
But the problem is: The parent ContextBinding (in this case, the element binding of the Page) is not updated. This can be seen if you call bindingContext.getProperty("ToProducts") and it will return a list of binding paths in which the ones of the already deleted items are still there. I guess this is because there was no GET request sent from the ContextBinding but from the ListBinding only.
My question
If the change took place in the child ListBinding (either through DELETE or CREATE), how can the parent ContextBinding get notified about the change and update itself without sending an additional request, so that bindingContext.getProperty("ToProducts").length returns always the correct length?
Or differently, when the change occurs, how can I prevent UI5 from sending a GET request from the child ListBinding and let it send the request from the parent ContextBinding instead, so that the change gets propagated to the child ListBinding afterwards automatically?
Is there any standard approach to solve this kind of problem in UI5?
PS: The same problem does not apply to JSON-based bindings. It seems to be OData only.
If someone encounters the same issue: it turned out to be a bug in UI5 which is fixed in 1.46.7+.
[FIX] ODataListBinding: Update expanded list array
If the fix is not available in your current release, one workaround would be to refresh the parent binding by calling parentControl.getElementBinding("modelName").refresh(false, "yourDeferredGroupId") so that the GET request can be sent together with the DELETE request in a single batch request.
Additionally, we can turn off refreshAfterChange (as krisho suggested) so that UI5 doesn't append yet other GET requests for corresponding ListBindings (relatively bound as well as absolutely bound ones). A disadvantage of this approach is that the absolutely bound ListBinding (which has the same content as the relatively bound one) has to be refreshed manually as well - if there is any.
To stop the framework from making the 'GET' call after Delete, you can use the property 'refreshAfterChange' on sap.ui.model.odata.v2.ODataModel, which can be set to 'false'.
After the success of 'Delete', you can 'refresh' the binding on the page, so that all bindings are consistent.
In my test suite I'd like to confirm the effect of entering a character into a text input field. It should result in the change of a computed value.
It is, in fact, working correctly and recomputing when I type characters into the text field.
If I set the text field using
$('#my_input_field').val("F")
the computed value is not changed. Nor does it change if I trigger a keydown or keyup event on the input element. How can the property recomputation be triggered programmatically through DOM manipulation?
You can use ractive.updateModel(keypath) to force two-way bindings to update:
<input value='{{value}}'/>
ractive.find('input').value = 'newValue';
ractive.updateModel('value'); // or just `ractive.updateModel()`
console.log( ractive.get( 'value' ) ); // 'newValue'
If you want to cause the update by triggering artificial DOM events, use the change event, because that's what the two-way binding is listening for (rather than keydown and friends). It has to be a native DOM event, not a jQuery event (which uses a different mechanism) – the Ractive test suite uses simulant to make this a bit less of a hassle.
I'm new to Ractive.js and using "magic mode" so that updates to my JS objects automatically trigger updates to my UI. Everything is working great except that I have some properties which are added to my bound objects after my Ractive instances are rendered. This means that Ractive doesn't see changes to those properties, so the "magic" doesn't work for them.
As a workaround, I've found that I can just initialize those properties with 'empty' values before passing them to Ractive, but it feels a little unnatural.
Is there a preferred way to inform Ractive that I've added a new property to an object that it should start tracking?
My experince is that you can du that in 2 ways.
The first is the one you describe in your post.
The second is to "add" the property through the template that you use to render the object.
What ractive actually do when you set magic mode to true is "wrapping/replacing" your field with a property wich monitores the changes to the field.
I have had som issues using magicmode when i use Object.DefineProperty on my data objcect. (stuff get called twice)
I would go for soulution 1, and define all fields ahead of time.
Also be aware of setting your field(wich is actually now a property replaced by ractive) to something that is not a valuetype as that will again overwrite the property and mess up magicmode.
When dynamically adding an element to the DOM, is it possible to add a binding to it?
var element = $('#div1').after('<span></span>');
element.data("name", ???); // create binding equivalent to data-name="{{Name}}"
I know that I could use ractive.observe() to watch changes to the keypath and update the element accordingly, but the binding syntax is more concise so I'm hoping I can still leverage it.
Here's a JSFiddle that shows how I'm using ractive.observe().