La localisation précise des éléments dans une page web est une étape fondamentale lors de la création de scripts d'automatisation de tests avec Playwright. Voici plusieurs aproches éprouvées pour identifier efficacement les éléments lors de vos tests.

1. Sélecteurs CSS

Les sélecteurs CSS constituent une méthode privilégiée et intuitive pour cibler des éléments. Playwright prend en charge la syntaxe standard des sélecteurs CSS.

• Sélecteurs de base : Ils incluent les identifiants (#mon-id), les classes (.ma-classe) et les noms de balises (div).
• Sélecteurs descendants : Par exemple, div p sélectionne tous les éléments <p> imbriqués dans un élément <div>.
• Sélecteurs d'attributs : Utilisez [mon-attribut] pour trouver des éléments possédant un attribut spécifique, ou [mon-attribut="valeur"] pour cibler un attribut avec une valeur déterminée.

Exemple :

// Clique sur un bouton dont l'identifiant est 'submit-btn'
await page.locator('#submit-btn').click();

// Remplit un champ texte avec la valeur 'Bonjour le monde'
await page.locator('input[name="username"]').fill('Bonjour le monde');

2. Expressions XPath

Bien que conçues pour les documents XML, les expressions XPath sont également très efficaces pour naviguer et sélectionner des éléments dans des documents HTML.

• Chemin absolu : Définit une localisatoin à partir de la racine du document, par exemple /html/body/div[1]/input.
• Chemin relatif : Permet de localiser un élément par rapport à son contexte actuel, comme .//input pour trouver tous les éléments <input> descendants du nœud courant.
• Tests de nœuds : Filtrez les éléments selon leurs attributs ou leur contenu, par exemple //button[@id='login-button'] pour sélectionner un bouton spécifique.

Exemple :

// Évalue une fonction JavaScript pour cliquer sur un bouton basé sur son texte
await page.evaluate((xpathSelector) => {
    const element = document.evaluate(xpathSelector, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    if (element) element.click();
}, '//button[contains(text(), "Valider")]');

3. Attributs de Données (Data Attributes)

Les attributs data-*, introduits avec HTML5, offrent un moyen standardisé de stocker des données personnalisées sur des éléments HTML, ce qui est idéal pour la localisation.

Exemple :

// Clique sur un élément identifié par l'attribut data-cy
await page.locator('[data-cy="user-profile-button"]').click();

4. Correspondance de Texte

Playwright permet de localiser des éléments en se basant sur leur contenu textuel.

• Correspondance exacte : Utilisez le texte littéral de l'élément comme sélecteur.
• Correspondance partielle : Employez des expressions régulières pour des correspondances plus flexibles.

Exemple :

// Clique sur un bouton contenant le texte exact 'Se connecter'
await page.getByRole('button', { name: 'Se connecter' }).click();

// Utilise une expression régulière pour trouver un élément dont le texte commence par 'Bienvenue'
await page.locator('div', { hasText: /^Bienvenue/ }).click();

5. Attente d'Éléments

Dans l'automatisation, il est souvent nécessaire d'attendre qu'un élément devienne visible, interactif ou disparaisse avant de poursuivre l'exécution du script.

• Attendre la visibilité : page.waitForSelector(selector, { state: 'visible' }).
• Attendre la disparition : page.waitForSelector(selector, { state: 'hidden' }).
• Attendre une condition : page.waitForFunction(expression) pour attendre qu'une expression JavaScript renvoie une valeur vraie.

Exemple :

// Attend qu'une boîte de dialogue modale devienne visible
await page.waitForSelector('.modal-dialog', { state: 'visible', timeout: 5000 });

6. Fonctions d'Assistance Personnalisées

La création de fonctions utilitaires peut grandement simplifier le code de localisation pour des scénarios récurrents.

Exemple :

// Fonction pour cliquer sur un bouton par son texte
async function cliquerSurTexte(page, texteBouton) {
    await page.getByRole('button', { name: texteBouton }).click();
}

// Utilisation de la fonction
await cliquerSurTexte(page, 'Envoyer');

En combinant ces différentes techniques, vous obtiendrez une grande flexibilité et efficacité pour localiser les éléments avec Playwright. Privilégiez toujours les sélecteurs les plus stables et uniques afin de rendre vos tests plus robustes.