blocks|key|2719837|text|对于这样的问题，我将业务代码(它实际上对拖放事件做了一些有用的事情)与UI隔离开来。这样，我就可以确保拖放启动代码将正确地填充数据结构，并且我可以确保拖放处理代码将执行正确的操作，而无需实际发送真正的拖放事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2719838|这样，真正的事件处理代码只有1-2行，所以它崩溃的机会非常非常小。此外，没有理由测试浏览器或操作系统的拖放代码；这些代码应该可以工作。|2719839|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

With problems like this one, I isolate the business code (which actually does something useful with the drag &amp; drop events) from the UI. That way, I can make sure the drag-start code will fill out the data structures correctly and I can make sure that the drop handling code will do the right thing without actually having to have something send real drag&amp;drop events.

That way, the real event handling code is just 1-2 lines, so the chances that it breaks there are very, very slim. Also, there is no reason to test the drag&amp;drop code of your browser or OS; this code should work.

blocks|key|2509459|text|好了，玩来玩去，我发现我有更好的方法。可能我之前看过的资料已经过时了。下面的脚本将会非常干净和简单地完成这个技巧…|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2509460|it(+'step+:+6+:+select+star+rating+min+===+1+and+max+===+2'+,+function+(done)+{

++++driver.actions()
++++++++.mouseDown(element(by.css('.filter-editorial-rating+.ngrs-handle-max')))
++++++++.mouseMove(element(by.css('.filter-editorial-rating+.step-2')))
++++++++.mouseUp()
++++++++.perform();


element(+by.css(+'.results-indicator'+)+).getText()
++++.then(+function+(+text+)+{
++++++++resultsB+=+parseInt+(text.split("+")[0]);
++++++++expect(+resultsB+).toBeLessThan(+resultsA+);++++++++++++++++++++++++++++
++++++++done();
++++});
});|code-block|syntax|javascript|2509461|你可以像这样得到驱动程序...|2509462|browser.get(url);
var+driver+=+browser.driver;|2509463|干杯|2509464|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Ok playing around I found that I there are better ways. probably the sources I was looking before were outdated. The following script will do the trick very clean and easy...

<pre><code>it( 'step : 6 : select star rating min === 1 and max === 2' , function (done) {

 driver.actions()
 .mouseDown(element(by.css('.filter-editorial-rating .ngrs-handle-max')))
 .mouseMove(element(by.css('.filter-editorial-rating .step-2')))
 .mouseUp()
 .perform();


element( by.css( '.results-indicator' ) ).getText()
 .then( function ( text ) {
 resultsB = parseInt (text.split(" ")[0]);
 expect( resultsB ).toBeLessThan( resultsA ); 
 done();
 });
});
</code></pre>

you can get driver like this ...

<pre><code>browser.get(url);
var driver = browser.driver;
</code></pre>

Cheers

blocks|key|2509480|text|elem+=要移动的元素；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2509481|target+=要拖放elem的元素；|2509482|对于WebdriverJS:-|2509483|browser.driver.actions().dragAndDrop(elem,target).mouseUp().perform();|code-block|syntax|javascript|2509484|对于量角器：-|2509485|browser.actions().dragAndDrop(elem,target).mouseUp().perform();|2509486|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

elem = Element you want to move;

target = Element where you want to drop elem;

For WebdriverJS:- 

<pre><code>browser.driver.actions().dragAndDrop(elem,target).mouseUp().perform();
</code></pre>

For Protractor:-

<pre><code>browser.actions().dragAndDrop(elem,target).mouseUp().perform();
</code></pre>

blocks|key|2719881|text|如今，这是相当简单的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2719882|browser.actions().dragAndDrop(elem,+target).perform();|code-block|syntax|javascript|2719883|2719884|其中dragAndDrop+behind+the+scenes为mouseDown+%2B+mouseMove+%2B+mouseUp|offset|length|style|CODE|2719885|/**
+*+Convenience+function+for+performing+a+"drag+and+drop"+manuever.+The+target
+*+element+may+be+moved+to+the+location+of+another+element,+or+by+an+offset+(in
+*+pixels).
+*+@param+{!webdriver.WebElement}+element+The+element+to+drag.
+*+@param+{(!webdriver.WebElement%7C{x:+number,+y:+number})}+location+The
+*+++++location+to+drag+to,+either+as+another+WebElement+or+an+offset+in+pixels.
+*+@return+{!webdriver.ActionSequence}+A+self+reference.
+*/
webdriver.ActionSequence.prototype.dragAndDrop+=+function(element,+location)+{
++return+this.mouseDown(element).mouseMove(location).mouseUp();
};|2719886|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/SeleniumHQ/selenium/blob/ab1e647d0fc8fc39e6b00ae94321ab228b6728f2/javascript/webdriver/actionsequence.js#L218-L229^0|0|0|0|2|B|W|9|18|9|1K|7|2|T|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|10|8|@$J|11|K|12|L|M]|$J|13|K|14|L|M]|$J|15|K|16|L|M]|$J|17|K|18|L|M]]|9|@$J|19|K|1A|1|1B]]|A|$]]|$1|N|3|O|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|P|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

This is quite straightforward nowadays:

<pre><code>browser.actions().dragAndDrop(elem, target).perform();
</code></pre>

<hr>

Where <a href="https://github.com/SeleniumHQ/selenium/blob/ab1e647d0fc8fc39e6b00ae94321ab228b6728f2/javascript/webdriver/actionsequence.js#L218-L229" rel="noreferrer"><code>dragAndDrop</code> behind the scenes</a> is <code>mouseDown</code> + <code>mouseMove</code> + <code>mouseUp</code>:

<pre><code>/**
 * Convenience function for performing a "drag and drop" manuever. The target
 * element may be moved to the location of another element, or by an offset (in
 * pixels).
 * @param {!webdriver.WebElement} element The element to drag.
 * @param {(!webdriver.WebElement|{x: number, y: number})} location The
 * location to drag to, either as another WebElement or an offset in pixels.
 * @return {!webdriver.ActionSequence} A self reference.
 */
webdriver.ActionSequence.prototype.dragAndDrop = function(element, location) {
 return this.mouseDown(element).mouseMove(location).mouseUp();
};
</code></pre>

blocks|key|39099|text|++++++++var+plot0+=+ptor.element(protractor.By.id(''));

++++++++ptor.driver.actions()

++++++++.dragAndDrop(plot0,+{x:+200,+y:+100})

++++++++.mouseMove(plot0,+{x:+200,+y:+100})+//+200px+from+left,+200+px+from+top+of+plot0

++++++++.mouseDown()

++++++++.mouseMove({x:+600,+y:+0})+//+600px+to+the+right+of+current+location

++++++++.perform();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|39100|这对我来说很管用。我的场景是拖动一个没有目标元素的弹出对话框。|unstyled|39101|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code> var plot0 = ptor.element(protractor.By.id(''));

 ptor.driver.actions()

 .dragAndDrop(plot0, {x: 200, y: 100})

 .mouseMove(plot0, {x: 200, y: 100}) // 200px from left, 200 px from top of plot0

 .mouseDown()

 .mouseMove({x: 600, y: 0}) // 600px to the right of current location

 .perform();
</code></pre>

This works for me guys. My scenario is drag a pop up dialog box which does not have a target element.

blocks|key|39128|text|我正在将自动化项目从使用SELENIUM_PROMISE_MANAGER转换到使用JS原生async/await。以前，我一直在使用user3800138+%5E描述的方法，但是它不再像这里描述的所有其他方法一样对我起作用。对我来说起作用的是通过then方法链接每个动作，如下所示|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|39129|dragAndDrop:+(+$element,+$destination+)+=>
++++browser
++++++++.actions()
++++++++.mouseMove(+$element+)
++++++++.perform()
++++++++.then(+()+=>+browser
++++++++++++.actions()
++++++++++++.mouseDown(+$element+)
++++++++++++.perform()+)
++++++++.then(+()+=>+browser
++++++++++++.actions()
++++++++++++.mouseMove(+$destination+)
++++++++++++.perform()+)
++++++++.then(+()+=>+browser
++++++++++++.actions()
++++++++++++.mouseUp()
++++++++++++.perform())|code-block|syntax|javascript|39130|然后像这样命名为await+dragAndDrop($leftSlider,+$lastDateTitle);|39131|或者相同的使用await将如下所示|39132|dragAndDrop:+async(+$element,+$destination+)+=>+{
++++await+browser.actions().mouseMove(+$element+).perform();
++++await+browser.actions().mouseDown(+$element+).perform();
++++await+browser.actions().mouseMove(+$destination+).perform();
++++await+browser.actions().mouseUp().perform();
}|39133|我知道这有点笨重，但我找不到更好的选择了|39134|entityMap^0|3D|4|0|0|8|1B|0|7|5|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|O|3|P|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|15|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|T|$]]

I'm in a middle of converting automation project from the use of SELENIUM_PROMISE_MANAGER to the use of JS native async/await. Previously, I've been utilizing the way described by user3800138 ^, however it didn't work for me anymore as well as all other approaches described here. What did work for me is chaining every single action through <code>then</code> method like this

<pre><code>dragAndDrop: ( $element, $destination ) =&gt;
 browser
 .actions()
 .mouseMove( $element )
 .perform()
 .then( () =&gt; browser
 .actions()
 .mouseDown( $element )
 .perform() )
 .then( () =&gt; browser
 .actions()
 .mouseMove( $destination )
 .perform() )
 .then( () =&gt; browser
 .actions()
 .mouseUp()
 .perform())
</code></pre>

and then calling it like this <code>await dragAndDrop($leftSlider, $lastDateTitle);</code>

Or the same using <code>await</code> will look like this

<pre><code>dragAndDrop: async( $element, $destination ) =&gt; {
 await browser.actions().mouseMove( $element ).perform();
 await browser.actions().mouseDown( $element ).perform();
 await browser.actions().mouseMove( $destination ).perform();
 await browser.actions().mouseUp().perform();
}
</code></pre>

I know it's a bit bulky, but I couldn't find a better option

blocks|key|2720004|text|正如有人已经提到的(但有点过时)，你也可以通过提供x，y坐标将滑块移动到任何方向：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2720005|browser.actions().dragAndDrop(sliderElement,+{x:+10}).perform()

browser.actions().dragAndDrop(sliderElement,+{x:+-10}).perform()

browser.actions().dragAndDrop(modalElement,+{x:+100,+y:100}).perform()|code-block|syntax|javascript|2720006|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

As someone already mentioned (but is a bit outdated) you can also move the slider to any direction by just providing x,y coordinates:

<pre><code>browser.actions().dragAndDrop(sliderElement, {x: 10}).perform()

browser.actions().dragAndDrop(sliderElement, {x: -10}).perform()

browser.actions().dragAndDrop(modalElement, {x: 100, y:100}).perform()
</code></pre>

blocks|key|40093|text|import+{code+as+dragAndDrop}+from+'html-dnd';

it("dragAndDropInCanvas",function(){
+++var+xy=+(element(by.className('row+ng-star-inserted')),{x:+300,+y:+300});
+++var+source_1+=+element(by.xpath('//*[@id="sidebarnav"]/li[3]/ul/li[1]'))
+++var+target+=+element(by.id('mainCanvas'));
+++browser.sleep(1000);
+++browser.executeScript(dragAndDrop,+source_1,+target);
+++browser.sleep(2000);
+++element(by.className('col-4+ng-star-inserted')).click()
+++browser.sleep(5000)
++})|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|40094|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>import {code as dragAndDrop} from 'html-dnd';

it(&quot;dragAndDropInCanvas&quot;,function(){
 var xy= (element(by.className('row ng-star-inserted')),{x: 300, y: 300});
 var source_1 = element(by.xpath('//*[@id=&quot;sidebarnav&quot;]/li[3]/ul/li[1]'))
 var target = element(by.id('mainCanvas'));
 browser.sleep(1000);
 browser.executeScript(dragAndDrop, source_1, target);
 browser.sleep(2000);
 element(by.className('col-4 ng-star-inserted')).click()
 browser.sleep(5000)
 })
</code></pre>

I have a double slider and I'd like to test that it's operable and return's the right data. The slider has a min and a max handler, it also has some "breakpoints that I can hook to. "

What I want to simulate is 

<ul>
<li>a touchStart of the ".handler-max" element</li>
<li>a move of the thumb over the element with class ".step-3"</li>
<li>a touchEnd of the ".handler-max" element</li>
</ul>

while I found how to trigger a touchStart and a touchEnd event. I'm clueless on how to simulate the move of the thumb

<pre><code>browser.executeScript('angular.element(arguments[0]).triggerHandler("touchstart");', filterHandler);
// &lt;--- move event????
browser.executeScript('angular.element(arguments[0]).triggerHandler("touchend");', filterHandler);
</code></pre>

P.S. The scope of this question is an integration test that tests if what happens to the application when a user interact's with a double slider directive is the desirable result.

How to simulate a drag and drop action in protractor?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个双滑块，我想测试它是否可操作，并返回正确的数据。滑块有一个最小和最大处理程序，它也有一些“我可以挂钩的断点”。我想要模拟的是a touchStart of ".handler-max“elementa touchStart of the ".handler-max”element -3\f25“a touchE...

问如何在量角器中模拟拖放操作？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在量角器中模拟拖放操作？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在量角器中模拟拖放操作？
EN