Les interactions utilisateur

Target Object Identification

Nous savons maintenant manipuler l’instance du navigateur lancée par Selenium et localiser les éléments HTML sur un site Web (Target Object Identification). Nous avons donc les bases requises pour notre objectif premier : les tests fonctionnels, c’est-à-dire tester le comportement de l’application Web en fonction des actions des utilisateurs.

À chaque fois que nous invoquons la fonction locate_with ou la méthode find_element, Selenium nous fournit en retour une instance de la classe WebElement. Lors de l’appel de la fonction find_elements, nous pouvons stocker son retour dans une liste d’instances de WebElement.

Une fois l’instance de WebElement stockée dans un objet, Selenium nous offre la possibilité de le manipuler comme un utilisateur et d’en connaître toutes les propriétés nécessaires aux tests fonctionnels.

from selenium import webdriver  
from selenium.webdriver.common.by import By  
   
browser = webdriver.Chrome()  
      
browser.get("https://www.google.fr/")  
   
input = browser.find_element(By.TAG_NAME, "input")  
print(input)  
   
# sortie console obtenue  
# <selenium.webdriver.remote.webelement.WebElement   
# (session="68eaf6779d1eb35b2e693b2a061629b3",   ...

WebElement, le cœur des tests fonctionnels

Chaque élément HTML d’une page est représenté par un objet de la classe WebElement avec Selenium. C’est grâce à cette classe que nous pouvons interagir avec la page HTML. Regardons les détails de WebElement.

Les attributs et méthodes de cette classe nous permettent de retrouver toutes les informations de la balise sélectionnée et de la manipuler.

Commençons par étudier notre contexte de tests fonctionnels, deux pages HTML assez rudimentaires mais suffisantes pour montrer toutes les actions possibles avec Selenium.

1. Accéder aux propriétés d’un WebElement

Nous allons expliquer dans cette section quelles sont les informations majeures que Selenium peut nous fournir sur instance de WebElement. Nous nous focaliserons sur le paragraphe de notre première page HTML de démonstration.

a. Nom de la balise

Pour connaître le nom de la balise d’une instance de WebElement, nous devons consulter son attribut tag_name.

from selenium import webdriver  
from selenium.webdriver.common.by import By  
   
browser = webdriver.Chrome()  
      
browser.get("http://localhost:8888/index-chapitre7.html")  
   
titre = browser.find_element(By.ID, "intro")  
   
print(titre.tag_name)  
# sortie = p  
 ...

Émulation de la souris

Les modifications sur une page HTML surviennent généralement à la suite d’une action de l’utilisateur : clic ou passage de la souris sur un élément, saisie de texte dans une entrée de formulaire, etc. Dans cette section, nous nous intéressons uniquement à l’émulation de la souris avec Selenium.

1. Méthode click

La classe WebElement définit la méthode click pour simuler un clic de la souris sur la balise HTML d’une page.

from selenium import webdriver  
from selenium.webdriver.common.by import By  
   
browser = webdriver.Chrome()  
     
browser.get("http://localhost:8888/index-chapitre7.html")  
   
submit = browser.find_element(By.ID, "user")  
   
submit.click()  
   
browser.close()

Transformons maintenant notre script en test fonctionnel.

import pytest  
from selenium import webdriver  
from selenium.webdriver.common.by import By  
   
@pytest.fixture  
def browser() :  
    from selenium import webdriver  
    browser = webdriver.Chrome()  
    browser.get("http://localhost:8888/index-chapitre7.html")  
    def finalizer():  
          browser.close()  
         ...

Gestion des formulaires HTML et événements clavier

Maintenant que nous avons vu l’émulation de la souris, nous pouvons étudier la simulation du clavier et les tests fonctionnels des formulaires.

1. Simuler une saisie clavier

Simuler une saisie clavier dans un test fonctionnel s’effectue avec l’appel de méthode send_keys de la classe WebElement :

send_keys(chaîne-a-saisir)

from selenium import webdriver  
from selenium.webdriver.common.by import By  
import time  
   
browser = webdriver.Chrome()  
     
browser.get("http://localhost:8888/index-chapitre7.html")  
   
inputUser = browser.find_element(By.ID, "user")  
inputUser.send_keys('Bob')  
inputMessage = browser.find_element(By.NAME, "message")  
inputMessage.send_keys('Hello world !')  
   
browser.close()

Notre script entre le nom d’utilisateur « bob » et le message « Hello World ! » dans les entrées de notre formulaire sur la page HTML de démonstration.

À nouveau, transformons ce script en test fonctionnel pour vérifier la saisie des entrées de notre formulaire.

import pytest  
from selenium import webdriver  
from selenium.webdriver.common.by import By  
from selenium.webdriver.common.action_chains import ActionChains  
  
@pytest.fixture  
def browser() :  
    from selenium import webdriver  
    browser = webdriver.Chrome()  
    browser.get("http://localhost:8888/index-chapitre7.html")  
    def finalizer():  
          browser.close()  
          browser.quit()  
    return browser  
  
def testInputUser(browser) :  
    inputUser = browser.find_element(By.ID, "user")  
    inputUser.send_keys('Bob')  
    assert inputUser.get_attribute("value") == "Bob"  
   
def testInputMessage(browser) :  
    inputMessage = browser.find_element(By.NAME, "message")  
    inputMessage.send_keys('Hello...

Exercices

Voici la page HTML sur laquelle les exercices portent :

<!DOCTYPE html>  
html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, 
initial-scale=1">  
    <title>Chapitre 7 - Excercices</title>  
    <style>  
        input:hover{  
            background-color:yellow;  
        }  
    </style>  
</head>  
<body>  
    <h1>Chapitre 7 - Exercices</h1>  
  
    <p>Entrer votre compétiteur</p>  
  
  
    <form id="add-competiteur" class="formulaire" 
onsubmit="return false;">  
          <label id="labelnom">Nom</label>  
          <input type="text" name="nom" id="nom">  
   
          <label id="labelprenom">Prenom</label>  
          <input...