⬅️ 🤦🏻 🛌🏼 Localisateurs relatifs dans le sélénium 4 👨🏽‍🏫 🔖 🥀

Salut, Khabrovsk. En prévision du début du cours Java QA Engineer, nous avons préparé une traduction de matériel intéressant pour vous.

Localisateurs relatifs

Le sélénium 4 nous a apporté des localisateurs relatifs - des localisateurs relatifs (initialement appelés localisateurs amis). Cette fonctionnalité a été ajoutée pour vous aider à trouver des éléments à côté d'autres éléments.

Options disponibles:

above () : l'élément de recherche est au-dessus de l'élément spécifié
en dessous () : l'élément recherché est en dessous de l'élément spécifié
toLeftOf () : l'élément de recherche est situé à gauche de l'élément spécifié
toRightOf () : l'élément de recherche est situé à droite de l'élément spécifié
near () : l'élément que vous recherchez ne se trouve pas à plus de 50 pixels de l'élément spécifié. Il existe également une méthode surchargée pour spécifier la distance.

Toutes ces méthodes sont surchargées pour accepter By ou WebElement.

Utilisation de localisateurs relatifs

En utilisant cette application de librairie à titre d' exemple , nous voulons vérifier que le livre à gauche d'Advanced Selenium en Java est Java For Testers. Les localisateurs relatifs nous permettent de le faire.

Voici le fragment DOM pour les livres

"Advanced Selenium in Java" représentés dans le DOM par l'identifiant pid6, et "Java For Testers" par pid5.

Une méthode WebDriver::findElementpeut prendre une méthode withTagName()qui renvoie un objet RelativeLocator.RelativeBy(un descendant de By).

driver.findElement(withTagName("li")

Ici, je peux déjà spécifier des localisateurs relatifs. Je sais que «Java For Testers» se trouve à gauche de «Advanced Selenium in Java» (pid6) et se trouve sous «Test Automation in the Real World» (pid1). Donc, je peux souligner des deux:

driver.findElement(withTagName("li")
                .toLeftOf(By.id("pid6"))
                .below(By.id("pid1")));

Et je reçois Java For Testers (pid5).

@Test
public void test_book5_is_left_of_book6_and_below_book1(){
    String id = driver.findElement(withTagName("li")
            .toLeftOf(By.id("pid6"))
            .below(By.id("pid1")))
            .getAttribute("id");
 
    assertEquals(id, "pid5");
}

Nous pouvons utiliser above()et méthodes toRightOf()pour trouver des expériences d'automatisation de test (pid2):

@Test
public void test_book2_is_above_book6_and_right_of_book1(){
    String id = driver.findElement(withTagName("li")
                    .above(By.id("pid6"))
                    .toRightOf(By.id("pid1")))
            .getAttribute("id");
 
    assertEquals(id, "pid2");
}

Comment ça fonctionne?

Je n'ai pas pu trouver «Java For Testers» uniquement en appelant toLeftOf (By.id («pid6»)) . Seul, il renverra l'automatisation des tests dans le monde réel (pid1). En effet, il driver.findElement()recherche à partir de la racine du DOM et le premier élément à <li>gauche de Advanced Selenium en Java est Test Automation in the Real World.

Selenium utilise la fonction JavaScript getBoundingClientRect()pour rechercher des éléments relatifs. Cette fonction renvoie les propriétés des éléments, telles que droite, gauche, bas et haut.

En regardant les propriétés de ces trois livres, nous voyons que Test Automation in the Real World (pid1) et Java For Testers (pid5) ont tous deux la même position sur l'axe des x.

Ainsi, ils sont tous les deux à gauche de Java For Testers, avec Test Automation in the Real World (pid1) étant le premier trouvé.

Un autre point à garder à l'esprit concerne les modifications apportées aux fenêtres d'application. Si j'ai exécuté les tests mentionnés ci-dessus sur mon application dans la vue mobile, alors naturellement ils auraient échoué car les livres ne sont plus à gauche / à droite des autres livres:

j'ai également rencontré un problème avec des localisateurs sympathiques lorsque j'ai essayé d'utiliser les dans cette application ToDo .

J'ai essayé d'utiliser la méthode toLeftOf()pour trouver le commutateur d'entrée à côté de l'élément «goodbye world». Visuellement, ce commutateur d'entrée est situé à gauche de l'étiquette «au revoir». Voici ce div dans le DOM:

<div class="view" data-reactid=".0.1.2.$645c3b67-884e-4e4f-aecd-8f9367e670f8.0">
    <input class="toggle" type="checkbox" data-reactid=".0.1.2.$645c3b67-884e-4e4f-aecd-8f9367e670f8.0.0">
    <label data-reactid=".0.1.2.$645c3b67-884e-4e4f-aecd-8f9367e670f8.0.1">goodbye world</label>
    <button class="destroy" data-reactid=".0.1.2.$645c3b67-884e-4e4f-aecd-8f9367e670f8.0.2"></button>
</div>

Voici le code que j'ai utilisé pour trouver l'élément d'entrée à gauche de l'étiquette:

driver.findElement(withTagName("input")
      .toLeftOf(By.xpath("//label[text()='goodbye world']")))
      .click();

Cependant, je suis tombé sur une exception: il semble que bien que celui-ci soit à gauche du visuel, il ne l'est pas en réalité. J'ai appelé une fonction pour ces deux éléments, et ils se chevauchent en fait. Notez qu'ils ont tous les deux la position x 838, donc techniquement pas à gauche de . Et quand je sélectionne l'élément , je vois maintenant qu'il chevauche vraiment l'élément . <img src = " habrastorage.org/webt/hj/aa/46/hjaa46ps-of5_hhlplqaldclc7s.png " /

org.openqa.selenium.NoSuchElementException: Cannot locate an element using [unknown locator]

<input><label>getBoundingClientRect()<input><label>

<label><input>

Remarque : il s'agit d'une version alpha de Selenium WebDriver. J'ai parlé avec le chef de projet Selenium Simon Stewart et j'ai découvert que la mise en œuvre peut changer en fonction des commentaires.

C'est tout. Rendez-vous sur le parcours !

Localisateurs relatifs dans le sélénium 4