Je travaille avec une application angulaire 7, et j'utilise du matériel angulaire (v7.3.7 pour le moment) mais je ne peux pas tester le glisser-déposer avec le rapporteur.
J'ai essayé pour télécharger le code source du matériau angulaire afin de savoir comment le faire, mais j'ai trouvé un test e2e lié au glisser-déposer.
J'essaye avec le code suivant, et je ' Je suis sûr que les éléments sont dans le dom, et ils sont cliquables et visibles.
browser.actions().dragAndDrop(justCreatedActivity,nextColumn);
Je suis sûr que je me trompe d'une manière ou d'une autre. Quelqu'un peut m'aider?
Merci
4 Réponses :
Essayez d'ajouter .perform () à la fin de la chaîne: browser.actions().dragAndDrop(justCreatedActivity,nextColumn).perform();
Depuis l ' API Protractor :
< pré> XXXSalut Jordan, j'ai essayé mais pas de chance. J'essaye maintenant d'y aller material.angular.io/cdk/drag-drop/ aperçu , et j'essaye de faire glisser l'élément "Faites-moi glisser" mais pas de chance du tout ... Pouvez-vous faire glisser cet élément?
Je peux faire glisser cet élément et les autres sur la page, oui.
Le navigateur est chrome? Si oui, puis-je vous demander de partager avec un github repo votre exemple dans lequel avec rapporteur vous faites glisser l'élément de la page spécifiée?
Parfois, le glisser-déposer ne fonctionne pas avec l'élément HTML 5 à l'aide de l'API rapporteur. Une alternative est d'utiliser la fonction j Query ou java script:
Identifiez les éléments source et cible avec les localisateurs appropriés et passez à la fonction ci-dessous.
async PerformDragAndDrop(source: ElementFinder, target: ElementFinder){
browser.executeScript("function createEvent(typeOfEvent) {\n" +
"var event = document.createEvent('CustomEvent');\n" +
"event.initCustomEvent(typeOfEvent, true, true, null);\n" +
" event.dataTransfer = {\n" +
" data: {},\n" +
" setData: function (key, value) {\n" +
" this.data[key] = value;\n" +
" },\n" +
" getData: function (key) {\n" +
" return this.data[key];\n" +
" }\n" +
" };\n" +
" return event;\n" +
"}\n" +
"\n" +
"function dispatchEvent(element, event, transferData) {\n" +
" if (transferData !== undefined) {\n" +
" event.dataTransfer = transferData;\n" +
" }\n" +
" if (element.dispatchEvent) {\n" +
" element.dispatchEvent(event);\n" +
" } else if (element.fireEvent) {\n" +
" element.fireEvent('on' + event.type,event);\n" +
" }\n" +
"}\n" +
"\n" +
"function simulateHTML5DragAndDrop(element, target) {\n"
" var dragStartEvent =createEvent('dragstart');\n" +
" dispatchEvent(element, dragStartEvent);\n" +
" var dropEvent = createEvent('drop');\n" +
" dispatchEvent(target, dropEvent,dragStartEvent.dataTransfer);\n" +
" var dragEndEvent = createEvent('dragend'); \n" +
" dispatchEvent(element, dragEndEvent,dropEvent.dataTransfer);\n" +
"}\n" +
"\n" +
"var source = arguments[0];\n" +
"var target = arguments[1];\n" +
"simulateHTML5DragAndDrop(source,target);", source, target);
}
Il existe un problème connu avec le glisser-déposer et Chrome. Pour plus d'informations, consultez la documentation sur l'api du rapporteur .
Les actions de la souris ne fonctionnent pas sur Chrome avec l'API HTML5 Drag and Drop en raison d'un problème connu avec Chromedriver
J'utilise avec succès html-dnd depuis plus d'un an maintenant pour faire glisser et déposez des éléments dans mes tests. Il est très facile à installer et fonctionne très bien.
J'ai obtenu ce qui suit avec le glisser-déposer angulaire et matériel:
private dragAndDrop(element: WebElement, destination: WebElement) {
return browser.actions().mouseDown(element).perform()
.then(() => browser.actions().mouseMove(destination).perform())
.then(() => browser.actions().mouseUp(destination).perform());
}
Également la version non asynchrone (car certains signalent des problèmes avec les actions asynchrones et du navigateur here ):
private async dragAndDrop(element: WebElement, destination: WebElement) {
await browser.actions().mouseDown(element).perform();
await browser.actions().mouseMove(destination).perform();
await browser.actions().mouseUp(destination).perform();
}
Mais changez quelque chose très légèrement et il s'effondre. De plus, la destination est trouvée en utilisant le sélecteur css .cdk-drop-list . J'espère que cela aide quelqu'un.
À partir d'Angular 9, dans mon cas, votre solution fonctionne. Merci