使用量角器打字稿，我如何检测这个元素方形白框，然后单击并拖动白框，它有 ng-mousedown 和转换

Question

我需要帮助创建一个 typescript/javascript 量角器代码吗？用于网络自动化。

如何单击此白框并将其从左向右拖动？

从左向右拖动，也会将 transform="translate(205)" 的值更改为 transform="translate(206)" 以及 <text>2/20/18</text>.

网址代码：

<g id="IndicateNav" ng-attr-trnsform="translate({{trVM._indicate || 0}})" ng-mousedown="trVM.mousedown($event, 'indicator')" ng-show="trVM._indicate" class="move-horizonal show-label-on-hover" transform="translate(205)">
   <line x1="0" x2="0" ng-attr-y1="{{trVM.bTop}}" ng-attr-y2="{{trVM.height}}" stroke="black" stroke-width="2" y1="20" y2="45"></line>
        <g ng-attr-trnsform="translate(0,{{trVM.bTop + ( (trVM.height - trVM.bTop) / 2) }})" transform="translate(0,32.5)">
            <square sx="0" sy="0" r="6" fill="white" stroke="black" stroke-width="2" ng-non-bindable=""></square>
        </g>
            <text x="14" ng-attr-y="{{3 + trVM.bTop + ( (trVM.height-trVM.bTop) / 2 )}}" text-anchor="start" font-size="12px" fill="white" style="pointer-events:none;" y="35.5">2/20/18</text>
</g>

Answer 1

您可以利用 browser.actions() 提供的功能。

解决方案：

将 ID 添加到 square 标签 [假设 ID 是 'whiteBox']。
获取 'whiteBox' 元素并将其保存到变量中。
```
const whiteBox = element(by.css('#whiteBox'));
```
通过以下代码模拟用户的拖动行为：
```
browser.actions().mouseDown(whiteBox).mouseMove({x: 50, y: 0}).mouseUp().perform()  
```
这会将白框拖动到右侧 50 像素。

如果您想将 'whiteBox' 拖到其他元素，您也可以这样做：

browser.actions().mouseDown(whiteBox).mouseMove(element2).mouseUp().perform()

完整的测试代码：

describe('whiteBox Dragging Test', function() {
  it('Drag whiteBox to right', function () {
    const EC = protractor.ExpectedConditions;
    const whiteBox = element(by.css('#whiteBox'));
    browser.wait(EC.presenceOf(whiteBox), 5000).then(() => {
      browser.actions().mouseDown(whiteBox).mouseMove({x: 50, y: 0}).mouseUp().perform();
    });
  });
});

使用量角器打字稿，我如何检测这个元素方形白框，然后单击并拖动白框，它有 ng-mousedown 和转换

Using protractor typescript, how do i detect this element square white box, then click and drag the white box, it has ng-mousedown and transform

webautomation

jasmine

typescript

protractor

angular

解决方案：

完整的测试代码：