web-dev-qa-db-fra.com

Comment faire défiler jusqu'à l'élément en utilisant Nightwatch?

J'utilise nightwatch pour e2etester mon application. L'un des tests échoue car il ne peut pas défiler jusqu'à l'élément qu'il teste, je suppose. Question dois-je faire défiler ou existe-t-il une autre façon de le faire? C'est l'élément que je teste:

 return this.waitForElementVisible('#myElement', 4000) //wait for it to be visible
       .assert.visible('#myElement')
       .click('#myElement')

L'élément est en haut de la page mais le testrunner a fait défiler un peu la page et il n'est pas visible dans la capture d'écran. Comment puis-je en cas de besoin faire défiler jusqu'à cet élément? ou: Comment puis-je tester cet élément?

javascriptselenium-webdrivernightwatch.js
12
bier hier

Il existe une méthode native dans nightwatch pour afficher les éléments. (En général, les éléments doivent toujours être affichés dans Nightwatch/Selenium. Mais si vous voulez le faire à la main, vous pouvez utiliser getLocationInView () :

return this.getLocationInView('#myElement')
   .assert.visible('#myElement')
   .click('#myElement')

Nightwatch prend également en charge le faire directement via le protocole Webdriver en utilisant moveTo () sans aucune abstraction. Dans ce cas, cela ressemblerait plus à:

const self = this;
return this.api.element('#myElement', (res) => {
  self.api.moveTo(res.value.ELEMENT, 0, 0 () => {
    self.assert.visible('#myElement');
    self.click('#myElement');
  })
});

(cela vient d'être écrit du haut de ma tête, j'espère que je n'ai pas fait d'erreur)

Mais ce qui pourrait aider dans votre cas est de changer le comportement de défilement des éléments de séléniums dans la configuration comme:

firefox: {
  desiredCapabilities: {
    browserName: 'firefox',
    javascriptEnabled: true,
    acceptSslCerts: true,
    elementScrollBehavior: 1
  }
}

La valeur par défaut est 0 -> Les éléments défilent en haut de la page

elementScrollBavior 1 -> Les éléments défilent en bas de page

7
TheBay0r

vous pouvez utiliser le moveToElement ()

il suffit de l'utiliser comme ça

browser.
.moveToElement(#myElement, 10, 10)
.waitForElementVisible(#myElement, 500)
6
OliverAssad

N'oubliez pas que:

.execute() injecte un extrait de JavaScript dans la page pour exécution dans le contexte du cadre actuellement sélectionné. Le script exécuté est supposé être synchrone et le résultat de l'évaluation du script est renvoyé au client.

et

Window.scrollTo() Fait défiler jusqu'à un ensemble particulier de coordonnées dans le document.

Votre test ressemblera à ceci:

module.exports = {
    'your-test': function (browser) {
        browser
            .url("http://example.com")
            .waitForElementPresent('body', 2000, "Be sure that the page is loaded")
            .execute('scrollTo(x, y)')
            .yourFirstAssertionHere()
            .yourSecondAssertionHere()
            ...
            .yourLastAssertionHere()
            .end()
    }
};

  • Si vous savez que l'élément avec l'ID myElement est en haut de la page, vous pouvez simplement changer x et y par 0 (Juste pour être sûr que vous allez faire défiler vers le haut de la page).

  • Si vous devez obtenir les valeurs exactes de x et y, vous pouvez utiliser: getLocationInView() comme ceci:

    module.exports = { 'your-test': function (browser) { browser .url("http://example.com") .waitForElementPresent('body', 2000, "Be sure that the page is loaded") .getLocationInView("#myElement", function(result) { //The x value will be: result.value.x //The y value will be: result.value.y }); } }

    .getLocationInView (): Détermine l'emplacement d'un élément sur l'écran une fois qu'il a été fait défiler dans la vue ... Renvoie Les coordonnées X et Y de l'élément sur la page.

J'espère que cela vous aidera.

5
Ala Eddine JEBALI

Vous pouvez exécuter ce javascript avec executedocument.querySelector({{ACTUAL_SELECTOR}}).scrollIntoView();

2
Lorand-Edmond Iszlai

De plus, un exemple que j'ai utilisé comme commande d'objet de page (be_expand) où mon sélecteur était un xpath déjà utilisé dans un élément (@be_click):

    be_expand() {
        this.api.execute(function(xpath) {
            function getElementByXpath(path) {
                return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
            }
            var res = getElementByXpath(xpath);
            res.scrollIntoView(true);
        }, [this.elements.be_click.selector]);
        this.assert.visible('@be_click');
        this.click('@be_click');
        return this;
    }
1
Emidio Stani