I have a requirement to drag and item from a page and drop it at another location in the same web page which is developed in angular js
Can anyone let me know how do we do it in protractor?
This is pretty simple. You will need to use an action chain for this.
browser.actions().dragAndDrop(elem, target).perform();
you can take a look at this:
source = element you want to drag;
target = element where you want to drop the source;
browser.actions().dragAndDrop(source,target).mouseUp().perform();
Related
Im making a project for finding xpath, and i need the fastest and easiest way for the user to actually select in a webpage the element he wants the xpath to be found. Selection ideally needs to be made with just a click, which needs to return the value of outerHTML of that element,so I can take it and process against fullHTML of page to find any indicator.
For now, im stuck double-tapping element,pressing inspect element and copying, all manually, which is not good.I know to automate in selenium, but i haven't found a way to automate this process.
Any suggestion,idea or preferably answer would be greatly appreciated!
Thanks
You want to see the path to an element when you click on it? Something like this will work:
window.addEventListener("click", (e) => {
let element = e.target
let path = []
while(element.parentElement){
let i = [...element.parentElement.children].indexOf(element)
path.unshift(`${element.tagName}:nth-child(${i + 1})`)
element = element.parentElement
}
alert(path.join("/"))
})
I'm trying to select one of the optiones from this menu:
Let's say I want to click on the "Online Webinar" option.
I have to click on the input to open up the dropdown menu
I have to target the option that I'm looking for using waitForXPath, that means that I'm targeting elements for it's text content, not by class or id
This is my HTML structure:
And this is how I'm targeting the "Online Webinar" in my code:
And this is the what I'm getting from this code
As you can see, is not selecting the "Online Webinar" option, and I think that it's because there's a whitespace at the beginning and end of the string that I'm looking to target and I think this is the problem
However I don't know to workaround this issue, should I look for a way to use the trim() method, or there's a Puppeteer way to get around it?
I found a pretty simple solution
let venueOption = await page.waitForXPath(`//li[contains(text(),'Online Webinar')]`);
I been seeing this pattern a lot on websites where user drag between points along a path that trails as they drag and drop which in the ends triggers and event.
Here is one example on
http://aaa.thehitmansbodyguard.movie( You have to go through the motions to get to the questions section where you will get this)
What is this method called and is there a framework that does this?
Are is another example
http://www.sevenhillswholefoods.com/experience/#/( when you "start the journey) you have to "drag and drop" to navigate the drag and drop effect though not entirely what is the norm is the effect I'm looking for
Here is yet another example that controls a video
http://www.resteravectoi.com (NSFW)
Use the drag and drop to control the video play
Here is another one that when dragged and drop changes the slide
http://2017.makemepulse.com
Ok after researching and digging I think I found something that so far seems to be the closet match.
https://codepen.io/MAW/pen/aOzeNR
var D = document.createElement('div');
TweenMax.set('svg',{overflow:"visible"})
TweenMax.set('.knob',{x:10,y:80})
var tl = new TimelineMax({paused:true})
.from("#path2",1,{drawSVG:"0%",stroke:'orange',ease:Linear.easeNone})
.to('.knob',1,{bezier:{type:"quadratic",values:[{x:10,y:80},{x:150,y:0},{x:300,y:80}]},ease:Linear.easeNone},0);
Draggable.create(D,{trigger:".knob",
type:'x',
throwProps:true,
bounds:{minX:0,maxX:300},
onDrag:Update,
onThrowUpdate:Update});
function Update(){tl.progress(Math.abs(this.x/300))};
TweenMax.to('#path1',0.5,{strokeDashoffset:-10,repeat:-1,ease:Linear.easeNone})
which uses GSAP framework. I'm not sure if the examples I quoted in my question are using this framework so if anyone else has any idea if/ how they are using a framework let me know
I am working on a task that writing UI testcase(Automation) by selenium in Java. I have a html page that It contains the element I need to drag to a target. I have tried with the Action come-up with selenium, It's not working for me. So I have searched for a alternative way That I would like to write a script for drag and drop Action on a UI and execute this script with selenium executeScript() method. AFAIU this element drags as a copy of it's element (Cloning) and drop it where we need to. So Can anyone help me through this to write a script for drag and drop Action
As I observed the level of action for drag and drop
Click & hold on the element
Get a copy of the element (cloning) and move to desire place that we want
Release it to a target.
P.S I have am unique id for both element(#g1) I need to drag and the place(#a) I need to drop it.
You can use jquery.simulate.js which is the library JQuery use to simulate many functionalities when testing the framework.
1) first make sure all of the elements that you want drag and drop are drag-able.
2) Then we point out the elements (drag-able element) we need to move and the target (drop-able element) which the element need to be drop,
3) simulate the drag and drop using function using jquery.simulate.js
Please refer to below sample code.
var dragableElement = $("#dragableElement");
var dropableElement = $("#dropableElement");
var dropableOffset = dropableElement.offset();
var dragableOffset = dragableElement.offset();
var dx = dropableOffset.left - dragableOffset.left;
var dy = dropableOffset.top - dragableOffset.top;
dragableElement.simulate('drag', {
dx: dx,
dy: dy
});
Enjoy,
I know this will be an easy one for you guys but I couldn't figure out how to do something like this; http://backpack.tf/
On that page, when you take your mouse to any item it opens a new small window displaying some text/image. What are my options for achieving something like that? JavaScript? I tried using "onMouseOut=" with HTML but it is too simple for what I have in mind.
I'd be tempted to say this is almost certainly a duplicate: Is there a JQuery tooltip plugin that supports HTML content and automatically positions tooltips?. To name but one :)
Either way you should look at tooltips, a quick google search found this:
http://jqueryui.com/tooltip/
It should let you use html content inside the tooltop.
you can use Hover event in jQuery or javascript whatever you like and in that even write your code whatever you want to achieve etiher showing block or displaying image:-
$("#idOfElement").on("hover", function()
{
////your code
});