Mouse actions not working correctly in protractor

问题

I am trying to upload a image. But when i am uploading, some portion of the image may get cut.So we have an option to crop that image.So i drag both side of the image and click on the upload button.So after click on upload button, it successfully uploading full portion of the image while doing it manually.When i am doing all these actions via automation script, the image is not seems to be uploaded fully,still it appears like get cut.

This cropping is done in a iframe.The code i have used is given below and attaching the screen shot of the image and the html code.

browser.switchTo().frame(element(by.css(".a-va")).getWebElement()).then (function(){
  var element1= element(by.css('.Nf-ko'));
  var element2= element(by.css('.Nf-ko:nth-child(3)'));
  browser.actions().dragAndDrop(element1,{x:0,y: -100}).mouseUp().perform();
  browser.actions().dragAndDrop(element2,{x:0,y: 100}).mouseUp().perform();
  element(by.css("[role='button']")).click();
});

also i tried

browser.switchTo().frame(element(by.css(".a-va")).getWebElement()).then (function(){
  var element1= element(by.css('.Nf-ko'));
  var element2= element(by.css('.Nf-ko:nth-child(3)'));
  browser.actions().mouseDown(element1).mouseMove({x:0,y: -100}).mouseUp().mouseDown(element2).mouseMove({x:0,y: 100}).mouseUp().perform();
 element(by.css("[role='button']")).click(); 
});

By using above code, i can see in the browser, that the dragging action is performed.But after clicking upload button,instead of cropped image it shows the uncropped one itself.I am not understanding what is the wrong action here.Can anyone help me.Thanks in Advance

回答1:

When i changed the locator of upload button, it worked perfectly.

 browser.switchTo().frame(element(by.css(".a-va")).getWebElement()).then (function(){
   var element1= element(by.css('.Nf-ko'));
   var element2= element(by.css('.Nf-ko:nth-child(3)'));
   browser.actions().dragAndDrop(element1,{x:0,y: -100}).mouseUp().perform();
   browser.actions().dragAndDrop(element2,{x:0,y: 100}).mouseUp().perform();
   element(by.css(".Nf-tb-Qk-mk")).click();
 });

来源：https://stackoverflow.com/questions/55275737/mouse-actions-not-working-correctly-in-protractor