Coded UI - Unable to identify a html controls on a Wpfbrowser - html

I am new to CodedUI & C#.
I am trying to automate a wpf application which has a WPF Browser.
So basically, It's WPF container with html content inside. I have created a similar sample small application and shared it here. This application opens the amazon.in website within wpfwindow.
WPF Browser application
My problem is Coded UI is not able to identify the Html-Controls/elements like 'Buttons', 'Text input fields' properly.
Below, the top image is from the WPF Browser app [Link which i have shared].
Here you can see a blue square box on the top-left. The coded UI identifies that area has the Search Go button.
Bottom part of the image is of the amazon website in IE browser where coded ui is properly highliting/ identifying the Search Go button.
Does this mean i cannot automate WPFBrowser apps using Coded UI.?
Can someone please tell what to do to identify the buttons properly in coded ui

You need to specify Id attributes for the controls that you want exposed to Coded UI.

To me this looks like CodedUI is getting some control that's similar, rather than the correct one.
You haven't mentioned if you're recording and executing tests or handwriting them in a separate CodedUI solution.
If you're recording them: Be sure that you're recording using your WPF application and interactions inside of them, rather than recording using your browser and then trying to execute tests using the WPF application
If you're writing them by hand: Be sure that you're correctly creating trees of inheritance when writing your tests. For instance, in a traditional CodedUI scenario the absolute top level object that all other controls inherit from is a web browser. In your scenario, that object should be the WPF object. There are probably going to be some other windows or various controls that are children of the WPF application which in turn will finally have the browser as a child.

Related

How do we get iframes to allow state changes to reflect in our components?

I'm building a component that uses an <iframe> to display another component. This component connects to an NGXS state which needs to reflect changes made to the state. After a lot of failures and testing I discovered the component will always only load the default settings of the state. I created a <button> to toggle a boolean and added an *ngIf to the <iframe> so I can force it to reload manually after trying things like this.Frame.(contentDocument || contentWindow).location.reload(true); didn't make any difference.
I created a stablitz app to demonstrate this issue however I think stackblitz blocks the use of <iframe>s in their platform so you might need to copy it into a local project to tinker with it. It's a simple app that shows the state outside of the <iframe> as well as inside with a button that toggles the <iframe> on and off so you can see how only the default values load after you update the value I have available for demonstration purposes. I'm not getting any type of errors and the issue isn't a matter of something being wrong with the code so I don't know what more to show that isn't in the stackblitz.
Does anybody know why and how <iframe>s do this and if there's a way around it? The only thing I can think to try is make a NestJS app to see if putting the data outside the app and making an API request from the component inside the <iframe> will be allowed, however I don't know why this issue is occurring to in turn know if that too won't be rejected for that same reason. How this can be handled?
The document running in an iframe is isolated from its host. They do not share memory- Angular does not provide a way to synchronize state between a host and an iframe on the page out of the box. The example is actually booting two Angular apps (one inside the frame and one outside). If you are using an iframe for security and isolation purposes, you'll need to devise a way to pass state between the host and the child via postMessage (and be aware that you are running two copies of your application). If this isn't for security/isolation, simply do not use an iframe to contain the child component.

How to hide a Vaadin 7 UI embedded on a non-Vaadin page?

I'm embedding a Vaadin application within a non-Vaadin web page, using a the "div" technique, as described in https://vaadin.com/book/-/page/advanced.embedding.html
I'd like to completely hide the Vaadin UI in some circumstances and show at other times.
Is this possible from within the Vaadin app and if so, how?
We've looked at:
JavaScript.getCurrent().execute("document.getElementById('my_vaadin_div').style.display = 'none';"); - Works but not pure Java...
GWT's DOM.getElementById("my_vaadin_div").setAttribute("display", "none"); - Doesn't work probably because DOM is client side GWT.
I think your second option is the way to go. You want to hide the div that contains your Vaadin app, so here you have a pure client side manipulation. You can do that with GWT to stay in the realm of Java. Of course, you can't execute the GWT code you proposed directly from the server side. But you can write a component extension which you can use to extend your UI instance. Using a ClientRPC you can switch the div on or off.

Current panel in jqmobi app

I am porting a mobile app from jQueryMobile to jqMobi and am looking for a way to determine the currently viewed panel. In jQuery they had
$.mobile.activePage
Does jqMobi have something similar, or do i need to track it myself?
There is a property called "activeDiv" that you can use - it is the raw DOM node.
$.ui.activeDiv

using PopUpManager in a Flex 4.5 Mobile App

This is more of a best practices question rater than something technical.
I'm working on a mobile app using the Flex 4.5 SDK and I'm trying to figure out the best way to handle notification windows. In most cases these windows will be alerting the user to when something goes wrong. Ex: bad login, no data, cannot resolve server.
I'm using a singleton design pattern, I have a Requests class that handles server calls. Most popups will be originating from this class (IOErrorEvents from my loader being used to access the API). Since this class is a singleton and is used from all Views inside the app it is not aware of applications current view. I'm also not sure having this class keep track of the current view and having it push popups on top of it would be best practice.
I'm hoping that I can use PopUpManager to keep track of where to add popups and what popups are currently on the stage. Though all examples I've seen online about this show static Components being used in a views Declarations tag.
I'm really just looking for any examples or input on how you would solve this problem. Any help would be greatly appreciated!
I had the same problem, and sorted it by making an Alert popup component that you can call from anywhere in the code base, and it will pop up in the currently active window. It also has an always visible scrollbar text area which is handy
http://bbishop.org/blog/?p=502
It works for a view navigator application, but if your using a tabbed navigator application, you can add a call for that, or simply change the code to
mainTabbedNavigator = FlexGlobals.topLevelApplication.tabbedNavigator;
currentTab = mainTabbedNavigator.selectedNavigator as ViewNavigator;

Display HTML pages in WPF application without WebBrowser

We have an application that transmits data responses over a radio in the form of an HTML page that is then displayed on a mobile device. The mobile application is beign rewritten in WPF.
We need to display this HTML page in an area of our UI. I have used the WebBrowser control and it displays the page fine. However, the WebBrowser gives you no ability to customize. I have two main stumbling blocks preventing us from using the WebBrowser control for our implementation.
We need to provide particular functionality on a right-click on the control. I cannot get the built in context menu of the WebBrowser control to not display.
We need to customize the scroll bars, which you cannot do with the WebBrowser. We deploy on touch screen devices, so thoroughout our appplicaiton we have fatter scroll bars and additional features for scrolling that the WebBrowser control doesn't allow for.
I'd like to find an alternative.
There is a project/product call Awesomium, which is based on Chromium/WebKit. It is a commercial product, which used to be open-source.
For .NET/WPF it uses the AwesomiumSharp wrapper.