En utilisant le script de type Protractor, comment puis-je détecter cet élément, une boîte blanche carrée, puis cliquer et faire glisser la boîte blanche, elle a un ng-mousedown et une transformation.

Question

J'ai besoin d'aide pour créer un code protracteur typescript/javascript pour ceci ? pour l'automatisation du web.

Comment puis-je cliquer sur cette boîte blanche et la faire glisser de gauche à droite ?

Si l'on fait glisser le curseur de gauche à droite, on modifie également la valeur de l'élément suivant transform="translate(205)" a transform="translate(206)" et aussi le <text>2/20/18</text> .

Le code du site web :

<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

Vous pouvez tirer parti des fonctions fournies par browser.actions() .

Solution :

1. Ajouter l'id à square tag [Disons que l'id est 'whiteBox'].

2. Obtenir l'élément 'whiteBox' et le sauvegarder dans une variable.

   const whiteBox = element(by.css('#whiteBox'));

3. Simulez le comportement de glissement de l'utilisateur par le code suivant :

   browser.actions().mouseDown(whiteBox).mouseMove({x: 50, y: 0}).mouseUp().perform()  

   Cela va déplacer la whiteBox de 50 pixels vers la droite.

4. Si vous voulez faire glisser "whiteBox" vers un autre élément, vous pouvez également le faire :

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

---

Code de test complet :

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();
    });
  });
});