Rapporteur d'angle + chrome pilote: l'Élément n'est pas cliquable au point

Salut, je vais avoir quelques difficultés à obtenir une base rapporteur test fonctionne.

Ma configuration:

  • - Je utiliser requirejs donc je init angulaire à l'aide angulaire.bootstrap(), et non pas à la ng-app attr. Selon le rapporteur docs ce n'est pas pris en charge hors de la boîte, mais il semble bien fonctionner pour des tests qui n'impliquent cliquer.

  • Rapporteur conf.json:

    "use strict";
exports.config = {
    specs: '../E2ETests/**/*.js',
    chromeOnly: true,
    getPageTimeout: 30000,
    allScriptsTimeout: 30000
}
  • J'utilise de la troisième partie jquery bouchons qui j'envelopper dans les directives, je soupçonne ces pourrait être une partie du problème.

Le test:

"use strict";
describe('When clicking should add stuff', function () {
    var ptor;
    beforeEach(function () {
        browser.get('https://localhost/myApp');
        ptor = protractor.getInstance();
    });
    it('add stuff', function () {
        //If I comment this, the test pass. 
        element(by.id('add-stuff-button')).click();
        //This does not matter fails on the line above..
        expect(browser.getTitle()).toBeDefined();
    });
});

L'erreur: 

UnknownError: unknown error: Element is not clickable at point (720, 881). Other element would         receive the click: <div class="col-md-5 col-md-offset-5">...</div>
(Session info: chrome=37.0.2062.124)
(Driver info: chromedriver=2.10.267521,platform=Windows NT 6.1 SP1 x86_64)

Pensées

La chromedriver faire trouver le bouton, parce que si je change l'id il se plaint qu'aucun élément n'est trouvé. Je pense donc que le problème est que le bouton se déplace de sa position initiale. Comme l'élément(***) fonction doit attendre angulaire à faire, je pense que sa les plugins tiers qui pourrait nuire comme ils ne pourraient pas utiliser angulaire de l'api, extraction de données, etc. Donc angulaire pense que sa fait, mais ensuite, la troisième partie plug remplit et se déplace trucs autour.

Toutes les idées que faire?
Si le tiers des bouchons est le problème, je peux en quelque sorte dire angulaire que le tiers des trucs qui se passe et puis plus tard le dire quand c'est fait?

Thx
Br
Twd

  • Cela se produit si le chrome fenêtre est trop petite, essayez d'ajouter à l'intérieur de la beforeEach navigateur.le pilote.gérer().fenêtre().setSize(1280, 1024);
  • Thx origine, fonctionne! Ajouter à la réponse et je vais le tag.
  • Vous êtes les bienvenus 🙂
  • Vérifiez également cette réponse pour les choses que vous pouvez essayer.
InformationsquelleAutor twDuke | 2014-10-06
  1. 27

    Vous devez définir la taille de la fenêtre dans votre fichier de config

    onPrepare: function() {
  browser.manage().window().setSize(1600, 1000);
}
    • Alors que l'on a accepté la réponse est correcte, c'est certainement la bonne façon d'aller sur la définition d'une taille de fenêtre par défaut.
    • Changé réponse à ce qu'il semble que la solution plus appropriée.
    • C'est un grand test de cohérence pour toutes les configs.
    • ajouter dans ces protractor.conf.js au lieu de cela: les exportations.config = { capacités: { 'browserName': 'chrome', 'chromeOptions': {'args': ['--window-taille=1690,1000'] } } }
    • Il me semble avoir le même problème que décrit dans l'OP, mais cette réponse n'est pas de résoudre le problème pour moi... Dans la ligne de commande où je suis en cours d'exécution protractor conf.js, j'obtiens l'erreur: "a Échoué: erreur inconnue: l'Élément <a href="#/graphiques" target="_self">...</a> n'est pas cliquable au point (40, 229). Autre élément reçoit le clic: <div tabindex="-1" role="boîte de dialogue" class="modal fondu ng-isoler-portée ult-chargement modal-message ng-animer en-supprimer-supprimer-active" ng-classe="{en: animer}" ng-style="{'z-index': 1050 + index*10, affichage: 'block'}" ng-click="close($event)"...`
    • Même si c'est l'élément que je veux cliquer sur... d'autres suggestions pour savoir comment résoudre ce problème?
    • ce rapporteur version utilisez-vous?
    • Je suis en utilisant le rapporteur de la version 5.1.2
    • Mais je sais que je suis l'envoi de la cliquez sur l'élément correct, parce que je fais appel browser.wait() attendre pour la forme sur laquelle le bouton est affiché à être affiché avant d'appeler button.click()....
    • A fonctionné pour moi 🙂
    • Il me semble avoir le même problème comme le vôtre, Est-il une autre solution qui a fonctionné pour vous ?
    • Que diriez-vous d'écrire un gestionnaire d'exception qu'une nouvelle tentative d'cliquez sur 'n' le nombre de fois après une attente pour elementToBeClickable vérifier ?

    InformationsquelleAutor Gal Margalit
  2. 19

    Suivant a bien fonctionné pour moi:

    browser.actions().mouseMove(element).click();

    Edit: Si ci-dessus ne fonctionne pas, essayez le chaînage de perform() la méthode de trop(j'ai eu cela comme une modification de la suggestion, je ne l'ai pas testé, mais quelqu'un pourrait-il vérifier et commentaire)

    browser.actions().mouseMove(element).click().perform();
    • Merci à vous, ce qui a le mieux fonctionné dans mon cas.
    • Eh bien, il a travaillé pour moi, mais j'aimerais savoir pourquoi?...
    InformationsquelleAutor Aman Gupta
  3. 12

    Ce qui se passe si le chrome fenêtre est trop petite, essayez d'ajouter à l'intérieur de la beforeEach 

    browser.driver.manage().window().setSize(1280, 1024);
    • Deux problèmes avec votre code: Il n'est pas nécessaire pour utiliser le navigateur.pilote qui permettrait de contourner le rapporteur et passer une couche sous-jacente, à webdriver lui-même. Vous aussi vous ne devriez pas insérer ce code dans un beforeEach() bloc - c'est une surcharge.
    InformationsquelleAutor originof
  4. 11

    Ou tout simplement d'utiliser la classe d'Actions:

    browser.actions().mouseMove(elem).click().perform();
    • Salut Raul, vous postez une vieille question. Pouvez-vous expliquer comment votre solution est meilleure que les autres qui étaient déjà posté?
    • Ni Noel, je suis récemment tombé sur cette question, je pars donc à la recherche de solutions. J'ai lu ce fil, essayé le code, et compris que le actions les besoins de la classe également les perform méthode à appeler à la fin. Celui qui a suggéré cette approche manqué d'inclure l'appel de la perform() méthode. Pour certains, qui n'ont pas beaucoup d'expérience avec WebDriver, cela fait une différence.
    InformationsquelleAutor Raul Huluban
  5. 4

    Peut-être qu'Il n'est pas applicable dans votre cas, mais j'ai rencontré le même problème et basé sur Milena's réponse que j'ai été chercher un autre élément obscurcir mon bouton (dans mon cas, un menu déroulant en haut à droite de mon écran).

    Il semble être le Connecté à la Synchronisation de Navigateur message de notification envoyé par browsersync, lancé par Gulp. Le message a disparu après un court laps de temps, mais après mon onClick() de l'appel.

    Pour supprimer la notification, dans mon gulpfile, j'ai ajouté les informer: faux param lors de l'initialisation de browsersync:

    browserSync.init(files, {
    server: {
        baseDir: "dist",
        index: "index.html"
    },
    notify: false
});
    • merci ! il fixe mon problème!!!!!! en ce qui concerne meilleur !
    InformationsquelleAutor Emmanuel P.
  6. 4

    Eu le même problème, mais n'était pas liée à la taille de la fenêtre, mais a dû attendre ngAnimation à la fin.

    J'ai donc dû attendre jusqu'à ce que l'élément est cliquable avec.

        const msg = 'Waiting for animation timeout after 1s';
    const EC  = new protractor.ProtractorExpectedConditions();
    await browser.wait(EC.elementToBeClickable(model.elements.button.checkCompliance), 1000, `${msg} panel`);
    await model.elements.button.checkCompliance.click();

    @remarque - je suis en utilisant async/await nœud 8 fonctionnalité, vous pourriez tout aussi bien convertir cette réguliers Promesses.
    Aussi à l'aide de ProtractorExpectedConditions au lieu de ExpectedConditions voir la documentation

    InformationsquelleAutor fredtma
  7. 3

    - Je résoudre ce problème en utilisant le navigateur le temps de sommeil. 

    browser.driver.sleep(3000)

    avant de donner cliquez sur le bouton

    • Ne fonctionne pas pour moi
    InformationsquelleAutor Anik Saha
  8. 2

    J'ai eu le même message d'erreur et purement réglage de la taille de l'écran n'a pas le fixer pour moi.

    Après une inspection plus poussée, il a regardé comme si un autre élément obscurcit le bouton, d'où le Sélénium test a échoué car le bouton n'a pas été (et ne pouvait pas être) cliqué. Peut-être c'est pourquoi le réglage de la taille de l'écran fixe pour certains?

    Ce qui fixe la mienne a été de retirer de l'autre élément (et, plus tard, ajustement de la position de celui-ci).

    InformationsquelleAutor Milena
  9. 1

    Autre manière, vous pouvez essayer ceci:

    this.setScrollPage = function (element) {

    function execScroll() {
        return browser.executeScript('arguments[0].scrollIntoView()',
            element.getWebElement())
    }

    browser.wait(execScroll, 5000);
    element.click();
};
    InformationsquelleAutor Tayguara Dias Reis
  10. 1

    Cela fonctionne mieux que la spécification de la taille de la fenêtre, dans le cas où vous essai doivent s'exécuter sur plusieurs écrans.

    browser.manage().window().maximize();

    InformationsquelleAutor Karanvir Kang
  11. 0

    Vous pouvez également essayer de désactiver les outils de débogage, vous pourriez être en utilisant. J'ai été en utilisant Laravel et debugbar et avait pour définir APP_DEBUG à false.

    InformationsquelleAutor xtrahelp.com
  12. 0

    De Gal Malgarit's réponse,

    Vous devez définir la taille de la fenêtre dans votre fichier de config

    onPrepare: function() {
  browser.manage().window().setSize(1600, 800);
}

    Si cela ne fonctionne toujours pas, vous devez faire défiler jusqu'à l'emplacement de l'élément

    browser.executeScript('window.scrollTo(720, 881);');
element(by.id('add-stuff-button')).click();
    InformationsquelleAutor patronaviera
  13. 0

    Remarque que c'était causé par une barre de navigation en haut ou en bas de la barre de navigation /témoin d'avertissement de la barre couvrant l'élément. Angulaire 2, en cliquant sur son passage jusqu'à ce que l'élément est juste sur la page. Cela signifie que lorsque vous faites défiler vers le bas pour cliquer sur quelque chose, si il y a un fond de navigation, puis cela va gêner le clic. De même, lorsque vous faites défiler jusqu'il peut être couvert par la barre de navigation supérieure.

    Pour l'instant, pour contourner la faire défiler vers le haut, je suis en utilisant le suivant: 

    browser.refresh();
browser.driver.sleep(3000);

    J'ai fait en sorte que j'ai enlevé la barre du bas en cliquant sur fermer avant le début de l'analyse.

    InformationsquelleAutor Sam
  14. 0

    Vous pouvez définir la résolution de l'écran par le biais de votre rapporteur fichier de configuration (par exemple, protractor.conf.js ou config.js) la constance de l'essai de comportement.

    Par exemple avec le navigateur google Chrome:

    exports.config = {
  specs: [
    //...
  ],
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      args: [
        '--window-size=1600,900',
        '--headless'
      ]
    }
  }
  //...
}

    Explications

    • window-size argument va lancer google Chrome avec un 1600 par 900 fenêtre.
    • headless va lancer sans tête, Chrome, vous permettant d'avoir vos tests avec le spécifié la taille de la fenêtre (1600 par 900), même si votre résolution d'écran est inférieure à celle que l'.

    Vous pouvez avoir deux configurations, l'une pour les développeurs (sans headless mode) qui ont toujours un écran haute résolution et un pour les serveurs de build (headless mode) où la résolution de l'écran est parfois un mystère et pourrait être inférieur à ce que votre application ou le test est conçu pour. Le rapporteur fichier de configuration sont javascript et peut être prolongé pour éviter la duplication de code.

    InformationsquelleAutor Jerome