Testing ionic elements using UFT 12.02 in IE 11 - ionic-framework

I am rather new to using automated testing tools, and as a practical learning exercise, I have been trying to test a small web application using HP UFT 12.02(I updated to 12.51, but am now running into the same issue). The web app was created using the Ionic mobile development framework. I have run into a roadblock and haven't been able to find an answer or similar experience recorded anywhere.
I am not certain whether the problem I have is with UFT, the browser, or with the actual application itself.
I am using IE 11 to test the application. The UFT plugin for Firefox has been disabled at our site, and Chrome is not supposed to be installed on our machines, so I may have some awkward technical constraints.
I've tried recording my actions, and the only success I've had is using the "Insight Recording" mode. In order to make the test readable, I have to do a lot of manual inspection of the objects and renaming. Unfortunately, it seems there is a limitation to what I can select or inspect using UFT's tools.
Using the Object Spy, it seems that I can only select top-level web elements, and for the most part, it seems to work OK. But here is the blocker:
In the app, there is a form that contains a series of pop-up selectors that allow me to select a building, a floor, and a date to reserve a space on that building's floor.
Selector Screen from office reservation application
In IE, if I click the first selector (the Site), nothing happens--regardless of whether I have pop-ups blocked or not. I get the same result performing a manual test on any of those selectors outside of UFT.
If I perform a manual test in Firefox, I get an ion-alert object that contains a series of radio buttons and OK/Cancel
If I inspect the element with Object Spy, I get a "Web Element" that includes the entire contents of the
This includes the form title, all the ion-select elements and labels, etc (way too long to include in this question).
Object Spy view of the site selector object
Is it possible to select an individual element within the form without resorting to x,y coordinates on the screen or window? If so, how? I cannot guarantee who will be running the test in future, nor how their screen or browser dimensions will be set.

Related

How do I select elements within div frames?

I am pretty new to Selenium IDE, hoping to use it with a certain web app which a client would like to be able to run automated tests for after periodic uplifts. The tests would all involve only clicks and text entry.
I cannot get the application to execute clicks on certain form elements on specific pages.
My test so far is simple. I am simply navigating to a page and trying to click an icon whose target, according to the IDE, is "css=#MGOpenButton-btnEl > .btn-icon". The Selenium IDE will register the click as having been performed successfully (i.e. no failures) but the actual desired output of the click (i.e. a pop-up search box appearing) isn't actually happening. I have tried click, click at, double-click, mouseover before click, all to no success.
Reading back through some other topics, I thought it may have something to do with the element being embedded in frames, but if that is the case I'm not sure how the click is being read as successful by the IDE. The second thing I'm wondering is if it might not be playing nicely with Javascript.
Is it common for the basic IDE front-end functionality to fail when a webpage incorporates Javascript?

How to use IUIAutomation::ElementFromPoint to get deeper web elements

I would like to obtain elements on my web browser (Chrome) using the IUIAutomation::ElementFromPoint method.
https://learn.microsoft.com/ja-jp/windows/win32/api/uiautomationclient/nf-uiautomationclient-iuiautomation-elementfrompoint
When I call the ElementFromPoint method with the point shown below, I can only get as far as the Chrome window.
But once I've used the Inspect tool, I can get to the deeper elements when I call the same method.
I am hoping to do the same with my tools.
How do you use the ElementFromPoint method to get the deepest web elements?
Before using inspect tool.
After using inspect tool.
Get from point only returns the topmost window around the cursor.
To go lower you have to drill into the components and check that their bounds contain your cursor position (I know, but it’s not as slow as you’d think).
Make sure you’re using either a raw tree view walker or at least a control tree view walker.
Firefox and chrome (and I guess the new edge) require that your code Is signed to drill into web pages (otherwise you could be building something to steal card info etc) - so triple check what your program performs like when used on a machine that it wasn’t developed on , in release mode, and not on an admin account.

Mouseup event is not propagated to a popup window in IE 11

I've a legacy app that features a DND from a popup window to the main one.
It works fine in IE 8 but not in any of the newer versions of IE. The effect results in the drag ghost image being stuck in the source window and not going away after the drop had occurred.
Some debugging did in fact confirm that the 'mouseup' event does not get propagated back to the source window. What can be done to fix it? Many thanks!
ITs a bit hard to begin to answer your question without some code....
use the File>Properties menu to find out which IE security zones the two windows(domains) map too...IE uses a different security model to other browsers... drag/drop is probably not allowed between local web files (using file: protocol) and internet or intranet sites.
Have you used the Dev tool yet to debug it? If you are using showModalDialog (which normally disables context menus) you can right click on a link (a) or input element to display the context menu so you can display the debugger for showModal content page.
If possible include a link to your website or a mashup (jsfiddle) with your questions.

Mysterious severe performance issue on mobile Safari for just one web page

I have a very large (as in feature-rich) responsive website. It consists of over 150 different UI pages, and so far both rendering and performance on mobile are fine (I'm using an iPhone5 to test, and occasionally other devices).
Except for one page, which I am coding now. Here's the temporary dev URL:
http://www.jungledragon.org/apps/jd3/daylight
On Mobile Safari, this page performance extremely poorly:
- It takes several seconds to load, much slower than all other pages
- Once loaded, a touch scroll can take 5-10 secs to do anything
- Mobile Safari as a whole becomes non responding or close to it
I'm trying to troubleshoot the root cause of the issue, but no luck so far. I cannot reproduce this on any desktop browser using a small viewport, not even on desktop Safari. On the desktop, I've inspected several web debuggers to check for any long-running processes, but found none.
Some explanation on what the page does:
It will try to detect your current location (using alerts I discovered this takes little time)
Based on your current location and the current date, it will calculate the sun times for the day. This too is nearly instant
Based on the suntimes, it will dynamically generate a table, and then finally show it on screen
Here's the what I am seeing in detail on mobile Safari:
The server response is fine, the page loads quickly and shows the site header soon
Next, the content body is blank and stays blank for several seconds (which I cannot explain)
Finally, the suntimes table renders.
This completes the page, yet as of this point, the page as well as the browser are extremely sluggish, scrolling takes forever, and Safari controls are nearly irresponsive. It looks and feels as if the browser can crash any moment.
Based on my research so far, and given fine performance in all other pages on the site, I'm totally in the dark on what causes this.
Edit: Using BrowserStack I did some more tests:
iPhone 4S: no issues
iPhone 5S: no issues
Galaxy SII: no issues
HTC One X: no issues
iPhone 5: same issue as above
So I'm not seeing the issue on any desktop browser, and on no mobile device except for the iPhone 5 (iOS7).
Edit2: adding more findings and explanation based on comments received:
The issue does not seem animation-related. For this I have a number of proof points. A simple proof point is the page does not do any visual rendering that is much different from any of the other 100+ pages on the site which have no performance issue.
The 2nd proof point can be explained by understanding what is going on in this specific page. What happens is this:
The system will detect the current user's time and location. For now assume that the user actually allows location sharing. Using a simple alert, I've been able to proof that location detection is not the bottleneck.
Based on the user's time and location, the daylight periods are calculated. This is done by using the Suncalc JS library (https://github.com/mourner/suncalc).
The Suncalc library returns an array of daylight periods for the given date and location. I render that array as a table with colored background rows. That is all.
Rendering a table with 12 rows and different background colors is not likely to cause such enormous issues. My theory therefore lies in step 2 being the root cause. The Suncalc library has a lot of advanced math in it. I am thinking (without evidence yet) that either my mobile processor is horrible at those kind of operations, and/or the specific calculation for some reason cause a peak in memory usage (or even a leak).
As an additional proof point: once the page is loaded on mobile, use the right arrow next to the date to navigate to "tomorrow". Again you will see the extremely bad performance. During that step, there is no network activity, no location detection, nothing, just calculations and some very simple rendering. This validates my theory that perhaps the issue lies in the calculation.
Sadly, it looks like native Javascript profilers on that platform are non-existent. You may also want to try the Javascript Microtime function referenced in this answer. You will need to seed your script with calls at points where you think the bottleneck might be.
Just ran this through Chrome remote debugger (https://developers.google.com/chrome-developer-tools/docs/remote-debugging) on my S3, and it looks like Modernizr's cancelZoom function (showing up in jd3_0006.js) is getting called recursively too many times or by too broad a selector. I've uploaded the profiles into dropbox: https://www.dropbox.com/s/kubxk44smm6qqkx/jungledragon_debug..zip
You can import them into Chrome's debugger on the "Profiles" tab.
I believe your performance problem centers around the use of navigator.geolocation.getCurrentPosition() in your runMap() function
if (urlDate != null) {
urlPos(latitude,longitude);
} else {
if (navigator.geolocation) {
$(".img-loading").show(100);
navigator.geolocation.getCurrentPosition(successPos, errorPos{maximumAge:600000,timeout:10000});
} else {
errorPos('');
}
}
Consider using watchPosition() instead with a callback which will not halt processing of the script thread. You can cancel the watchPostion() update by using clearWatch()
So I've played with this some more, and ran the "Timeline" feature on Chrome (load this file into your chrome timeline tool: https://www.dropbox.com/s/2vpl6z1ntuk3aqj/TimelineRawData-20140328T105820.json), and it looks like this might be your main problem.
Your scripts and libs (including loading Google Maps and jQuery) are getting evaluated AFTER parsing the HTML and running Google Analytics because they are at the bottom of the body, not head. Unless you have a very good reason to do that, I would recommend moving those to the head.
There seems to be a separate problem with scrolling, but perhaps it will be resolved by this change.

How to communicate between multiple windows of the same chrome app?

When using chrome developer tools, it appears that each app window (and the background 'page') has its own javascript context (space of objects, thread of execution), and yet the createdWindow callback of chrome.app.window.create apparently provides direct access to the objects of the 'other' window that was just created.
Given that, I'm unclear on the best way to communicate between windows; e.g. if I open a second window to act as a dialog box, when the user clicks OK to save changes, should I be using postMessage, sendMessage, or just call a function on an object in the main window. I've looked at the messaging samples, and they seem focused on communication between two different apps, or between an app and an extension.
So, I'm seeking a clear description of the memory and execution model within one app. Are there really separate contexts, or is it just one space of objects, with one thread of execution? What is the best way to communicate between windows of the same chrome app?
That is a great question James!
Multiple chrome windows are not completely separate. They share a single thread and object space, however the window object is different for each. In javascript unscoped references to things are looked up on the current window, so this makes the windows appear to be different object spaces - but they are not really.
So, you can reach into another window and execute a function there, or manipulate state in other ways (e.g. set a variable on another window to a function from the current window) and it is acceptable and supported.
You might find the chrome.app.window.getAll() and chrome.app.window.get() methods useful. They are however new to Chrome 33 which is not yet in the stable channel.
As an alternative you could hold an array of opened AppWindow objects in the background page context.
You can then get a reference to the background page context from any window using the chrome.runtime.getBackgroundPage() method