I am using webaii to write some test automation, and can't figure out how to Click() an < i> element.
They seem to define the Click() method for Control elements, and < i> is not defined as a Control element.
Any suggestions?
Used the Browser.Actions.Click() method to click the element.
Those elements that webaii does not wrap up in classes (which have the methods you need), can still have these actions applied via the Actions class. The framework arranges for the actions to be applied via Javascript.
Related
In Angular to change the styling of an element or component I understand there are tools available in the form of directives (ngStyle, ngClass). However as far as I can tell, ngClass allows for conditional styling only in which one changes styling based on a particular scenario. These are therefore changes based on discrete conditions.
ngStyle allows an object to be passed which can in theory do this by returning a style object which is custom defined, but then ngStyle is listening perpetually to page changes, whereas I wish to trigger the style change when a specific action occurs, instead of listening to all page changes if possible?
I would like to programmatically change an images's css properties programmatically (rotation, width, height, opacity) based on perhaps a button press, or a mouse event, or just when a function is called, but the key is I want those changes to be continuous, for example, a rotation based on a variable in the component class, no discrete options of class changes.
In Angular, how would this be done? ViewChild allows access to the DOM and therefore the styling, but the styles are read-only it would seem as they are computed.
I can't post code, as I don't know where to start to make such a thing work.
but then ngStyle is listening perpetually to page changes, whereas I wish to trigger the style change when a specific action occurs, instead of listening to all page changes if possible?
That's the whole point of Angular: you bind data to the view via a declarative template syntax it offers, and let it figure out when to update.
If you try to trigger update by manually knowing when data changes, you're probably doing something wrong (or you're optimizing a specific part of the library). Letting Angular do the update is the correct thing to do.
update () {
this.styles = { /* ... */ }
}
<div [ngStyle]="styles">...</div>
I am using WebDriver and Asserts as modules in my acceptance testing.
Using WebDriver, I am trying to click on a label that acts as the javascript anchor for a form checkbox (the actual checkbox being hidden and a ::before font element being used to represent the checkbox as checked or not).
There is a link in this label which is located at the center of the element; the position I assume is targeted by the click() method. Due to this, I can't just click() on the element, as it will click the link instead of triggering the checkbox.
I envisioned that the solution for this problem would be to moveMouseOver(), using coordinates arguments in order to displace it to the side, then to trigger a click... but click() does not allow for a click event at the current cursor location, instead requiring a selector to be applied, thus defeating my purpose.
Is there any way to accomplish what I am attempting in the current WebDriver module in Codeception? Alternately, is there a way to accomplish this targeting of an uneven element for clicking without the process I've outlined?
Thank you for whatever help you are able to give.
I use a workaround: just making element visible via JavaScript:
$I->executeJS("$('css_selector').css({'display':'block'});");
Depending of some flag I want to use certain component in my mxml.
There is not a default value. So it's probably incorrect to put one in mxml and then with states remove it and add the other.
Both also share the same interface, and I call methods in Actionscript using id. That means that if I put them in different states in mxml, the compiler will complain about same id used 2 times.
Is there any conditional statement or state management like: if x use this component, else use other one (preferably with mxml not actionscript) ? And in a way they are mutually exclusive (can have same id)?
Make ie. both components properties visible and includeInLayout listen (bound) to the flag. You can also use states. Always react on events that the components should dispatch. In the listener you can use the currentTarget to get the sending component.
The other way arround if you like to set a behaviour from somwhere without having access to the component id, define bindable properties and let both components listen to changes through bindings like I said with ie. the visible attribute.
This normaly should work for all requirements. If you can give me some sample code I could write you a short sample and moreover we could add it to your question.
In short:
I need an event listener in a custom component so all its instances (without editing them) react at the same time, fired by a dispatched event in its parent container.
In detail:
I have a custom component with Tab navigator. (The tabs are intended to show different preferences for different Languages.)
I have a button bar with buttons for all the languages.
There are a lot of instances of the custom component.
I want to click in a button of the languages bar and get ALL the instances switched to the same tab (the custom component contains the logic to change the tab).
I can do it by adding the event listener for EACH INSTANCE of the custom component, so it calls an internal function that changes the tab. But it seems to be very coupled, isn't it?
I wonder if it can be done in the master CLASS of the component, so it listen for events in its parent container, whichever it is.
In my mind this code shoud work, but it doesn´t (obviously ill'use a custom event to pass the new language value):
this.parent.addEventListener("lang_change", this.change_tab);
This way I can just drop an instance of the component, and see it working for itself.
Thank you in advance
I need an event listener in a custom
component so all its instances
(without editing them) react at the
same time, fired by a dispatched event
in its parent container.
The very thing you want to do, by definition, breaks encapsulation. In an ideal world, a component should know nothing of it's parent. If the component needs to communicate with it's parent, it should dispatch an event. IF a parent needs to communicate to children it should call a public method on that child (or change a public property). From an encapsulation stand point, I cannot recommend that the child listen for events on the parent.
I want to click in a button of the
languages bar and get ALL the
instances switched to the same tab
(the custom component contains the
logic to change the tab).
So, then put a click handler for the button and do something like this:
public function onClick():void{
myCustomTabNavigator1.selectedIndex = 1
myCustomTabNavigator2.selectedIndex = 1
myCustomTabNavigator2.selectedIndex = 1
}
You can also set the selectedItem if you a reference to it. , If you have your custom TabNavigators in an Array, you can loop over them. IF the custom TabNavigators are child of your custom component you can create a method in that custom component to set the defaults and call that method on each component instead of setting selectedIndex directly.
I think you should to use some MVC model like:
Cairngorm
http://code.google.com/p/swizframework/
http://www.robotlegs.org/
http://puremvc.org/
Can anyone think of a (preferably quick) way to move the data() attached to a DOM element to a new instance of itself?
The lightbox plugin I'm using deletes and re-appends and element to the page in order to display it in the lightbox (to aviod the multiple-ids issue that ASP.net has), and obviously the .data() that is attached to the element is lost when this happens.
There's a relatively new overload for .clone() you can use to do this.
.clone(true) will copy the element with events and data intact.
Alternatively, change your plugin to use .detach() rather than .remove() which keeps data intact. From the docs:
The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.