web-dev-qa-db-fra.com

Faites défiler jusqu'à un élément avec rapporteur

J'ai un élément sur la page que je teste que je dois faire défiler pour être visible. Lorsque j'exécute mon test, j'obtiens l'élément n'est pas cliquable au point (94, 188) par exemple.

J'ai essayé ce qui suit:

dvr.executeScript('window.scrollTo(0,250);');

Mais ça n'a pas marché. Est-ce que quelqu'un sait comment cela fonctionne?

javascriptscrolljasmineprotractor
12
andrepm

je pense que cela vous est utile:

dvr.executeScript('window.scrollTo(94,188);').then(function() {
    element(by.<<here your button locator>>).click();
})

votre pilote Web n'est pas en mesure de lire ce point (1254,21), la raison en est que votre navigateur rapporteur ne peut pas couvrir la totalité de la page que voulez-vous tester, puis nous donnons une commande qui fait défiler le navigateur jusqu'à ce point (1254,21 ), puis effectuez l'opération de clic

1
rajana sekhar

Cela semble si tard pour vous répondre .. Mais de toute façon,

Le code suivant m'a aidé à supprimer l'erreur l'élément n'est pas cliquable.

var Elm = element.all(by.css('.your-css-class')).get(9);
browser.executeScript("arguments[0].scrollIntoView();", Elm.getWebElement());

Elm.click();

Fondamentalement, cela vous permet de faire défiler votre vue.

39
Rahul Reddy

La solution window.scrollTo(x,x) ne fonctionnait pas pour moi. Spécialement lors des tests contre l'émulateur d'ondulation. J'ai réussi à le faire fonctionner en utilisant la méthode scrollIntoView.

var scrollToScript = 'document.getElementById("ELEMENT ID").scrollIntoView();';

browser.driver.executeScript(scrollToScript).then(function() {
  element(by.id('ELEMENT ID')).click();
  expect(...);
});
9
Junior Ales
'use strict';

/**
 * Vertically scroll top-left corner of the given element (y-direction) into viewport.
 * @param scrollToElement element to be scrolled into visible area
 */
function scrollTo(scrollToElement) {
    var wd = browser.driver;
    return scrollToElement.getLocation().then(function (loc) {
        return wd.executeScript('window.scrollTo(0,arguments[0]);', loc.y);
    });
};

Usage:

scrollTo(element(by.css("div.someclass")));

Avertissement: ce code provient de sg-protractor-tools 's scroll.js .
Le code est autorisé sous la licence MIT.

5
James Lawson

J'ai utilisé le lien que Bassem a suggéré et qui fonctionne. Les étapes sont les suivantes:

  1. Nous devrons installer sg-protractor-tools avec la commande suivante (utilisez Sudo si vous n'avez pas d'accès administrateur):

    npm install --save-dev sg-protractor-tools

  2. Le code ressemblerait alors à quelque chose comme ça (j'ai essayé cela sur wikipedia)

    var sgpt = require('sg-protractor-tools');
it ('verify that scroll works', function ()
  { 
   browser.get('http://wikipedia.org');                                             
   browser.manage().window().setSize(1000, 1000); 
   sgpt.scroll.scrollTo(element(by.linkText('Terms of Use'))); 
  }
);
2
prakash krishnan

passez le xpath à cette méthode dynamiquement, il défilera jusqu'à l'élément

   scrollToElement: function (element) {
        return element.getLocation().then(function (location) {
            return browser.executeScript('window.scrollTo(' + location.x + ', ' + location.y + ');');
        });
    },
1
bhargava krishna

Essayez d'utiliser le module npm "sg-protractor-tools", qui fonctionne bien pour moi avec les pilotes firefox et chrome,

C'est une façon propre de faire défiler les éléments de la page, Plus de détails ici https://www.npmjs.com/package/sg-protractor-tools

1
Bassem