3
votes

L'élément ne bouge pas dans le canevas

Je suis impatient de déplacer l'élément dans le canevas, mais d'une manière ou d'une autre, cela ne se produit pas.

Code que j'ai essayé:

   @FindBy(xpath = "//div[@id='diagramDiv']//canvas")
    protected WebElement flowCanvas;

Mon xpath:

        Actions actions = new Actions(driver);
        actions.moveToElement(flowCanvas, 434, 177);
        actions.clickAndHold();
        actions.moveToElement(flowCanvas, 592 , 373);
        actions.release();
        actions.perform();

URL où j'essaye: https : //gojs.net/latest/samples/panelLayout.html

J'utilise Selenium Webdriver et Java. Je n'obtiens aucune erreur dans le code ci-dessus mais il ne déplace pas non plus l'élément.

Tentative de déplacement de l'élément suivant:

java selenium-webdriver gojs

3 commentaires

Dans quel système de coordonnées ces nombres (offsetX et offsetY) sont-ils censés se trouver? Les valeurs X que vous utilisez semblent beaucoup trop grandes pour manipuler le nœud supérieur gauche des quatre nœuds du diagramme.

@WalterNorthwoods - pouvez-vous s'il vous plaît dire comment puis-je obtenir les coordonnées exactes de ce contrôle que je souhaite déplacer?

gojs.net/latest/intro/viewport.html décrit les systèmes de coordonnées dans un GoJS Diagramme. myDiagram.nodes.first (). location est en coordonnées de document; myDiagram.transformDocToView (myDiagram.nodes.first (). locatio‌ n) produit un point dans les coordonnées de la fenêtre.

3 Réponses :

0
votes

Essayez les combinaisons d'actions et d'actions

Actions builder = new Actions(driver);
Action moveAction = builder.moveToElement(flowCanvas,434,177)  
                 .click()
                 .moveByOffset(592, 373) 
                 .doubleClick()
                 .build();
moveAction.perform();

1 commentaires

Ça ne bouge pas copain.

3
votes

Fondamentalement, le problème vient des coordonnées que vous utilisez et de l'implémentation du pilote bowser / web que vous utilisez. La spécification W3C indique que le décalage des commandes Action est à partir du centre du élément. Mais toutes les implémentations du pilote Web ne suivent pas cela. Donc, fondamentalement, les décalages x et y moveToElement pour le pilote gecko (Firefox) sont calculés à partir du centre de l'élément dans votre cas à partir du centre du canevas, mais pour le pilote Chrome (Google Chrome), les coordonnées sont calculées dans le coin supérieur gauche. Donc, si vous voulez un support cross borwser du glisser-déposer, vous aurez besoin de quelque chose comme ça.

WebDriver driver = getDriver();

driver.get("https://gojs.net/latest/samples/panelLayout.html");
WebElement flowCanvas = driver.findElement(By.xpath("//div[@id='myDiagramDiv']//canvas"));

if(isGoogleChrome()){
    new Actions(driver)
   .moveToElement(flowCanvas, 100, 125).clickAndHold()
   .moveToElement(flowCanvas, 150, 175).release()
   .perform();
} else if (isFireFox()){
    new Actions(driver)
    .moveToElement(flowCanvas, -50, -50).clickAndHold()
    .moveToElement(flowCanvas, 100, 100).release()
    .perform();
}

Comme vous pouvez le voir pour Firefox, vous devez utiliser des valeurs négatives pour déplacer la souris du centre vers le haut à gauche élément dans le canevas et pour le chrome, vous devez déplacer la souris légèrement vers le bas et vers la droite.

4 commentaires

Hé merci beaucoup pour la réponse. Pouvez-vous me dire comment vous avez obtenu ces coordonnées pour l'élément? J'ai installé une extension dans chrome pour x et y mais elle montre autre chose comme coordonnées, veuillez vérifier: prnt.sc/ mf52jk

Certainement, les coordonnées de l'outil ne sont pas correctes, car le div de travail est défini comme 400 px sur 400 px, il n'y a donc aucun moyen d'avoir un 502 comme l'une des coordonnées. J'utilise la règle des outils de développement Firefox. Mais vous pouvez obtenir les coordonnées de chrome comme suggéré en exécutant le myDiagram.transformDocToView (myDiagram.nodes.first (). Locatio‌ n) qui renverra les coordonnées en haut à gauche du premier nœud afin que vous puissiez ajoutez 5 ou 10 px avant d'exécuter l'action de clic pour être sûr que vous cliquez sur le nœud.

@Babl - J'essaie de faire travailler le glisser-déposer sur une page avec 2 toiles, d'un canevas à l'autre, et je n'ai pas pu faire sortir l'élément du premier canevas. Une idée / suggestion?

@misha aura besoin d'un exemple de ce que vous faites, ne peut pas aider sans exemple de code

0
votes

J'ai essayé de déplacer cet objet avec Sikuli et cela a fonctionné comme un charme. Veuillez vérifier l'extrait ci-dessous.

    Pattern p = new Pattern("Win/AboutScreen/Move.PNG");
    Region r1 = screen.exists(p);
    r1.hover();
    r1.mouseDown(Button.LEFT);
    r1.mouseMove(50, 50);
    r1.mouseUp(Button.LEFT);

Vous devez enregistrer une capture d'écran à un endroit et mentionner le chemin. La méthode hover (); trouvera l'écran et le survol de la souris dessus. mouseDown (Button.LEFT) maintiendra le clic gauche enfoncé et le dernier mouserMove (50,50) déplacera l'élément à coordonner.

C'est très facile à installer Sikuli si vous utilisez le projet Maven, ajoutez simplement une simple dépendance et vous avez terminé.

J'espère que cette aide :)

1 commentaires

Mon ami merci, mais ma toile a plus de 500 contrôles et je n'ai pas pu prendre 500 captures d'écran pour les déplacer