Drag and Drop Behavior on Chrome DevTools Protocol - google-chrome-devtools

I am trying to write a tool that open's a website and interacts with and triggers the drag/drop behavior. I am seeing Input.dragIntercepted, Input.dispatchDragEvent functions in the documentation. But when I use these functions, I am getting a ... is not a function error. Probably, I am not using them in a proper way.
How can I use these functions to trigger drag and drop behavior of the web application? I did not find any example that shows usage of these functions.

First of all, Input.dragIntercepted really isn't a function. It's an event that will be fired, but only if you enable it, using Input.setInterceptDrags with enable set as true.
This is documented both here and here.

Related

How can I simulate window.focus() with react testing-library?

I've been doing a lot of research, and I can't find a way to successfully simulate a window focus event.
I looked through "testing-library/user-event" and still can't find a way to do this.
In my component, we have window.addEventListener('focus', doSomething); but this is never getting invoked via the test runner.
I have verified that fireEvent.focus(window); does actually trigger the handler, and that the callback just isn't behaving as expected.

Can't get the DOM in a react app using testcafe

I'm new into testcafe. I have a react app which was made by create-react-app, and I'm trying to do very simple function:
await t.expect(ReactSelector('ReactHighcharts').exists.ok()
I figured out that no matter what component I put inside the selector I get flase.
When I explored more, I saw that react-scripts probably minifies/uglifies by his webpack, my code, and that's
why I can't get the DOM.
Am I right? if yes - how can I disable it? if not, I'd like to understand why the DOM is unreachable.
You can explicitly set the displayName property for a component or consider testing the dev build.
https://reactjs.org/docs/react-component.html#displayname

Why WebIde shows error for alert and console.log?

I am using WebIde of SAPUI5 development.
If I write a console.log or alert it shows error of unexpected Alert and so on inside of the editor.
While the code works and I prefer to not see these errors inside of the editor.
How can I customize WebIde to not show these kind of errors.
While it is discouraged to use console.log and alert statements in your code because
[...] such messages are considered to be for debugging purposes and therefore not suitable to ship to the client [...]
http://eslint.org/docs/rules/no-console
and
[...] JavaScripts’ alert, confirm, and prompt functions are widely considered to be obtrusive as UI elements and should be replaced by a more appropriate custom UI implementation [...]
http://eslint.org/docs/rules/no-alert
you can have your Linter configured to bypass these checks (although I would not recommend to do so)
But keep in mind these checks are not specific to SAPUI5 or Web IDE, rather for every Javascript project!
Anyway, since Web IDE uses ESLint, to disable the check, add the following on top of the affected Javascript file:
/*eslint-disable no-console, no-alert */

How do you set up an Optimizely test for a single-page app?

I have a single-page web app that presents a multi-step photo management "wizard", split up across several discrete steps (photo upload, styling, annotation, publishing) via a tab strip. On switching steps I set the URL hash to #publishing-step (or whichever step was activated).
How do I set up Optimizely tests to run on the various discrete steps of the wizard?
The browser never leaves the page, so it only gets a single window.load event. Its DOM isn't getting scrapped or regenerated, but just switches what page elements are visible at any one time via display: none or block, so the part I am trying to figure out is really mostly about in what way I go about the Optimizely test setup itself - it's fine (and likely necessary) if all edits get applied at once.
This thing unfortunately has to work in IE9, so I can't use history.pushState to get pretty discrete urls for each step.
There's actually several ways you could go about doing this, and which option you choose will largely depend on what's easiest for you AND how you plan to analyze the data.
If you want to use Optimizely's analytics dashboard:
I would recommend creating one experiment which will activate a bunch of other experiments at different times. The activation experiment will be targeted to everyone and run immediately when they get to your wizard. The other experiments will be set up with manual activation and triggered by this experiment.
The activation experiment would have code like:
window.optimizely = window.optimizely || [];
function hashChanged() {
if(location.hash === 'publishing-step') {
window.optimizely.push(['activate', 0000000000]);
}
if(location.hash === 'checkout-step') {
window.optimizely.push(['activate', 1111111111]);
}
}
window.addEventListener('hashchange', hashChanged, false);
Or you could call window.optimizely.push(['activate', xxxxxxxxx]); directly from your site's code instead of creating an activation experiment and listening for hashchange.
If you want to use a 3rd party analytics tool like Google Analytics:
You could do this all in one experiment with code similar to above, but in each "if" section instead of activating an experiment, you could run your variation code that makes changes to the wizard and sends special tracking information to your analytics sweet for later reporting. You'll have to do your own statistical significance calculation for this method (as Optimizely's data won't be "clean"), but this method actually works out better usually if properly configured.
Alternatively you could use the method outlined above but still try to use the Optimizely analytics dashboard by creating custom events on your experiment and sending data to them using calls like window.optimizely.push(["trackEvent", "eventName"]);
This article may also be helpful to you.
You'll probably need to do this yourself, using Optimizely's JS API to trigger actions on their end and tell it what your users did: https://www.optimizely.com/docs/api

how can I improve iPhone UI Automation?

I was googling a lot in order to find a solution for my problems with UI Automation. I found a post that nice summarizes the issues:
There's no way to run tests from the command line.(...)
There's no way to set up or reset state. (...)
Part of the previous problem is that UI Automation has no concept of discrete tests. (...)
There's no way to programmatically retrieve the results of the test run. (...)
source: https://content.pivotal.io/blog/iphone-ui-automation-tests-a-decent-start
Problem no. 3 can be solved with jasmine (https://github.com/pivotal/jasmine-iphone)
How about other problems? Have there been any improvements introduced since that post (July 20, 2010)?
And one more problem: is it true that the only existing method for selecting a particular UI element is adding an accessibility label in the application source code?
While UI Automation has improved since that post was made, the improvements that I've seen have all been related to reliability rather than new functionality.
He brings up good points about some of the issues with using UI Automation for more serious testing. If you read the comments later on, there's a significant amount of discussion about ways to address these issues.
The topic of running tests from the command line is discussed in this question, where a potential solution is hinted at in the Apple Developer Forums. I've not tried this myself.
You can export the results of a test after it is run, which you could parse offline.
Finally, in regards to your last question, you can address UI elements without assigning them an accessibility label. Many common UIKit controls are accessible by default, so you can already target them by name. Otherwise, you can pick out views from their location in the display hierarchy, like in the following example:
var tableView = mainWindow.tableViews()[0];
As always, if there's something missing from the UI Automation tool that is important to you, file an enhancement request so that it might find its way into the next version of the SDK.
Have you tried IMAT? https://code.intuit.com/sf/sfmain/do/viewProject/projects.ginsu . It uses the native javascript sdk that Apple provides and can be triggered via command line or Instruments.
In response to each of your questions:
There's no way to run tests from the command line.(...)
Apple now provides this. With IMAT, you can kick off tests via command line or via Instruments. Before Apple provided the command line interface, we were using AppleScript to bring up Instruments and then kick off the tests - nasty.
There's no way to set up or reset state. (...)
Check out this state diagram: https://code.intuit.com/sf/wiki/do/viewPage/projects.ginsu/wiki/RecoveringFromTestFailures
Part of the previous problem is that UI Automation has no concept of discrete tests. (...)
Agreed. Both IMAT and tuneup.js (https://github.com/alexvollmer/tuneup_js#readme) allow for this.
There's no way to programmatically retrieve the results of the test run. (...)
Reading the trailing plist file is not trivial. IMAT provides a jUnit like report after a test run by reading the plist file and this is picked up by my CI Tool (Teamcity, Jenkins, CruiseControl)
Check out http://lemonjar.com/blog/?p=69
It talks about how to run UIA from the command line
Try to check the element hierarchy, the table can be placed over a UIScrollView.
var tableV = mainWindowTarget.scrollViews()[0].tableViews()[0].scrollToElementWithName("Name of element inside the cell");
the above script will work even the element is in 12th cell(but the name should be exactly the same as mentioned inside the cell)