Introduction

Le coeur des tests de bout en bout pour les pages Web consiste à rechercher des éléments DOM, à interagir avec eux et à obtenir des informations sur l'état actuel de votre application. Cette documentation explique comment localiser et exécuter des actions sur des éléments DOM à l'aide de Protractor.

Vue d'ensemble

Protractor exporte une fonction globale element, qui prend un localisateur et retournera un ElementFinder. Cette fonction trouve un seul élément. Si vous devez manipuler plusieurs éléments, utilisez la fonction element.all.

Le ElementFinder dispose d' un ensemble de méthodes d'action, tels que click(), getText() et sendKeys. Celles-ci constituent le principal moyen d'interagir avec un élément et de récupérer des informations à partir de celui-ci.

Lorsque vous trouvez des éléments dans Protractor, toutes les actions sont asynchrones. En coulisse, toutes les actions sont envoyées au navigateur contrôlé à l'aide du protocole JSON Webdriver Wire. Le navigateur exécute ensuite l'action comme le ferait un utilisateur de manière native.

Des localisateurs

Un localisateur indique à Protractor comment trouver un élément DOM particulier. Le rapporteur exporte des usines de localisation sur l'objet global by. Les localisateurs les plus courants sont :

Pour obtenir une liste des localisateurs spécifiques à Protractor, voir API de Protractor.

Les localisateurs sont passés à la fonction element, comme ci-dessous :

Lorsque vous utilisez des sélecteurs CSS comme localisateur, vous pouvez utiliser la notation de raccourci $() :

Actions

La fonction element() retourne un objet ElementFinder. ElementFinder sait comment localiser l'élément DOM en utilisant le localisateur que vous avez transmis en tant que paramètre, mais il ne l'a pas encore fait. Il ne contactera pas le navigateur tant qu'une méthode d'action n'a pas été appelée.

Les méthodes d'action les plus courantes sont :

Toutes les actions étant asynchrones, toutes les méthodes d'action renvoient une promesse. Donc, pour consigner le texte d'un élément, vous feriez quelque chose comme :

Toute action disponible dans WebDriverJS sur un WebElement est disponible sur un ElementFinder.

Trouver plusieurs éléments

Pour traiter plusieurs éléments DOM, utilisez la fonction element.all. Cela prend également un localisateur comme seul paramètre.

element.all() a plusieurs fonctions d'assistance :

Lorsque vous utilisez des sélecteurs CSS en tant que localisateur, vous pouvez utiliser la notation de raccourci $$ () :

Trouver des sous-éléments

Pour trouver des sous-éléments, il vous suffit de chaîner element et element.all comme ci-dessous.

En utilisant un seul localisateur pour trouver :

un élément

une liste d'éléments :

Utilisation de localisateurs chaînés pour trouver :

un sous-élément :

pour trouver une liste de sous-éléments :

Vous pouvez aussi enchaîner avec get / first / last comme ceci :

ElementFinders vs WebElements

Si vous connaissez WebDriver et WebElements, ou si vous êtes simplement curieux des WebElements mentionnés ci-dessus, vous vous demandez peut-être comment ils se rapportent à ElementFinders.

Lorsque vous appelez driver.findElement(locator), WebDriver envoie immédiatement une commande au navigateur lui demandant de localiser l'élément. Ce n'est pas idéal pour créer des objets de page, car nous voulons pouvoir faire des choses dans la configuration (avant le chargement d'une page) comme ...

... et réutilisez la variable myButton tout au long de votre test. ElementFinders contourne cela en stockant simplement les informations de localisation jusqu'à l'appel d'une action.

Le navigateur ne recevra aucune commande jusqu'à ce que vous appeliez une action.

ElementFinders permet également le chaînage pour trouver des sous-éléments, tels que element(locator1).element(locator2).

Toutes les actions WebElement sont encapsulées de cette manière et disponibles sur ElementFinder, en plus de plusieurs méthodes d'assistance telles que isPresent.

Vous pouvez toujours accéder au WebElement sous-jacent en utilisant element(locator).getWebElement(), mais vous n'auriez pas besoin de le faire.