Présentation des data tables

Lorsqu’un site internet affiche des données de manière structurée, les balises des tables HTML. Un exemple classique d’une data table est la liste des produits d’une commande, avec leur intitulé, leur description, leur prix et la quantité commandée.

1. Balises HTML

Les noms des principales balises HTML qui permettent de représenter une table de données sont les suivantes :

TABLE : indication du début et de la fin de la table.
TBODY : indication du corps de la table.
TR : une ligne de la table.
TD : une colonne d’une ligne de la table.
THEAD : une ligne d’en-tête de la table.
TH : un en-tête de la table de données, sur une ligne ou une colonne de la table.
TFOOT : la ligne de résumé en bas de la ligne de la table.

2. Page HTML de démonstration

Nous allons tester dans ce chapitre les tables, les tables dynamiques, les listes déroulantes simples et multiples, pour finir par le drag and drop ou glisser-déposer en français.

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, 
initial-scale=1">  
    <style>  
#div1 {  
  width: 210px;  
  height: 220px;  
  padding: 10px;  
  border: 1px solid #aaaaaa;  
}  
</style>  
    <title>Chapitre 8 - Data table et validation</title>  
</head>  
<body>  
    <h1>Chapitre 8 - Data table et validation</h1>  
  
    <h2>Une table HTML</h2>  
    <table>  
      <thead>  
        <tr>  
          <th> Identifiant </th>  
          <th>Quantité</th>  
        </tr>  
      </thead>  
      <tbody>  
        <tr>  
         ...

Table HTML

Une table HTML est généralement générée par le back de l’application Web. De ce fait, il est extrêmement rare que chaque ligne ou chaque colonne de la table de données soit identifiée par un identifiant ou une propriété name. Toutes les balises de la table HTML sont génériques, donc identiques entre elles.

Ainsi, nous pouvons d’office oublier notre sélection d’élément Web par nom de balise ou identifiant ou name… Il en va de même pour les sélections avec les classes CSS ou les sélecteurs CSS.

Heureusement, nous pouvons retrouver nos balises HTML avec leur chemin XPATH !

Voici les étapes pour pouvoir retrouver le chemin des données dans une table HTML :

Étape 1 : localiser la table avec le chemin //table.
Étape 2 : localiser les données grâce à la balise TBODY : //table/tbody/.
Étape 3 : ajouter les prédicats pour accéder aux informations de la table. //table/tbody/tr[1] pour la première ligne, //table/tbody/tr[2] pour la deuxième ligne, etc.
Étape 4 : sélectionner la colonne de la ligne qui nous intéresse. Par exemple, //table/tbody/tr[2]/td[1] pour sélectionner la première colonne de la deuxième ligne.

Vérifions que la table HTML de notre page HTML de démonstration...

Table dynamique

Une table dynamique est une table de données qui va actualiser ses données en fonction des interactions de l’utilisateur.

Classiquement, nous pouvons retrouver comme fonctionnalités le tri de colonnes par ordre croissant et décroissant et la recherche avec une entrée utilisateur.

Dans la table dynamique de la page HTML de démonstration, les colonnes représentant le nom et le prix des produits peuvent être ordonnées par l’utilisateur. L’utilisateur peut également filtrer les lignes en fonction de l’identifiant ou du nom du produit.

Nous avons donc quatre fonctionnalités à tester :

ordonnancement de la colonne nom ;
ordonnancement de la colonne identifiant ;
filtre par l’identifiant, existant et non existant ;
filtre par le nom, existant et non existant.

import pytest  
from selenium import webdriver  
from selenium.webdriver.common.by import By  
from selenium.webdriver.common.keys import Keys  
from selenium.webdriver.common.action_chains import ActionChains  
import time  
   
@pytest.fixture  
def browser() :  
    from selenium import webdriver  
    browser = webdriver.Chrome()  
    browser.get("http://localhost:8888/chapitre8.html")  
    def finalizer():  
         ...

Liste déroulante

Les listes déroulantes, définies avec la balise HTML select, sont des objets complexes pour Selenium. Ainsi, elles ont une classe dédiée : la classe Select. Pour créer une instance de cette classe, nous devons d’abord sélectionner normalement la balise HTML de la liste déroulante, puis la donner en paramètre du constructeur de la classe Select.

from selenium.webdriver.support.select import Select  
   
selectElement = driver.find_element(By.TAG_NAME, ‘select')  
monSelect = Select(selectElement)

1. Classe Select

La classe Select de Selenium nous permet de récupérer les informations suivantes :

toutes les options sélectionnées grâce à all_selected_options ;
la première option sélectionnée avec first_selected_option ;
toutes les options possibles grâce à options.

Les options retournées sont également des instances de la classe WebElement, nous pouvons donc en retrouver les informations nécessaires pour leur manipulation lors de nos tests fonctionnels.

La classe Select nous permet également de manipuler une liste déroulante avec les méthodes suivantes :

deselect_all() : désélectionne toutes les options sélectionnées value ;
deselect_by_index(index) : désélectionne l’option à la position index dans la liste déroulante value ;
deselect_by_value(value) : désélectionne l’option qui a comme valeur le paramètre value ;
deselect_by_visible_text(text) : désélectionne l’option qui a comme texte affiché sur la page le paramètre text ;
select_all() : sélectionne toutes les options ;
select_by_index(index) : sélectionne l’option à la position index dans la liste déroulante ;
select_by_value(value) : sélectionne l’option qui a comme valeur le paramètre value ;
select_by_visible_text(text) : sélectionne l’option qui a comme texte affiché sur la page le paramètre text.

Affichons maintenant toutes les options de la liste déroulante de notre page HTML...

Drag and drop

Le drag and drop, ou glisser-déposer, est une manière pour que l’utilisateur puisse sélectionner des données de manière plus naturelle. Il lui suffit de glisser ce qu’il veut dans la zone de dépôt.

Nous illustrons le fonctionnement des tests du glisser-déposer de manière simple : dans notre page de démonstration, l’utilisateur peut faire glisser l’image dans la zone juste au-dessus de ce dernier.

Ce comportement se gère avec les ActionChains de Selenium, ce qui est tout à fait logique : l’utilisateur effectue deux actions d’affilée, en l’occurrence le « glisser », puis directement le « déposer ». La méthode correspondant à ce comportement est drag_and_drop(draggable, droppable), où draggable et droppable sont deux éléments Web de Selenium.

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/chapitre8.html")  
    def finalizer():  
         ...

Exercices

Les exercices de ce chapitre portent sur la page exercices-chapitre8.html, dont voici le code HTML :

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, 
initial-scale=1">  
    <style>  
#div1 {  
  width: 210px;  
  height: 220px;  
  padding: 10px;  
  border: 1px solid #aaaaaa;  
}  
</style>  
    <title>Chapitre 8 - Exercices</title>  
</head>  
<body>  
    <h1>Chapitre 8 - Exercices</h1>  
   
    <h2>Les ingrédients du fondant au chocolat</h2>  
    <table>  
      <thead>  
        <tr>  
          <th> Ingrédient </th>  
          <th>Quantité</th>  
        </tr>  
      </thead>  
      <tbody>  
        <tr>  
          <th scope="row">Farine</th>  
          <td>4 cuillères à soupe</td>  
        </tr>  
        <tr>  
          <th scope="row">Oeuf</th>  
          <td>5</td>  
        </tr>  
        <tr>  
   ...

Les captures et validations des données