Lors de l’exécution de tests d’automatisation de l’interface utilisateur sur une page Web, nous essayons tous de travailler avec les éléments Web tels que les boutons, les textes, etc. L’interaction avec les WebElements dans le DOM est rendue possible à l’aide des localisateurs Selenium. Cependant, il y a certains aspects d’une page Web que même les localisateurs ne peuvent pas gérer. Les pseudo-éléments en CSS entrent dans cette catégorie. Sans les informations correctes, ces pseudo-éléments peuvent être très difficiles à automatiser. Dans cet article, nous verrons comment gérer les pseudo-éléments en CSS avec Selenium WebDriver.
Selenium est un puissant framework de test d’automatisation pour vérifier des pages Web complexes, mais les pseudo-éléments sont difficiles à automatiser. Selenium, lorsqu’il est utilisé conjointement avec l’interface JavaScriptExecutor, aide à automatiser les pseudo-éléments. Lors du test de votre site Web, vous devez également vous assurer que la page Web fonctionne comme prévu dans diverses combinaisons de navigateur et de système d’exploitation. Étant donné que l’automatisation des tests Selenium est une affaire multi-navigateurs et multi-plateformes, vous pouvez effectuer des tests d’automatisation à grande échelle avec Selenium Grid basé sur le cloud.
Que sont les pseudo-éléments en CSS ?
La combinaison de deux mots – pseudo et éléments – peut souvent conduire à un malentendu, alors comprenons ce que sont exactement les pseudo-éléments en CSS (Cascading Style Sheet).
Lors de l’utilisation de CSS sur n’importe quel élément Web, nous appliquons généralement un style partout. Mais que se passe-t-il si nous voulons appliquer une classe uniquement à une partie spécifique de celle-ci et non à un élément complet ? Je sais ce que vous pensez.
Et la réponse est oui. Ceci est possible à l’aide de pseudo-éléments. Les pseudo-éléments sont des composants CSS utilisés pour styliser des parties spécifiques d’un élément Web. Ces pseudo-éléments peuvent être utilisés pour appliquer du CSS sur une portion ou une partie spécifique d’un élément web, comme :
- Appliquer CSS sur la première lettre d’un élément
- Appliquer CSS sur la première ligne d’un élément
- Insérer du texte avant le texte d’un élément
- Insérer du texte après le texte d’un élément
Les pseudo-éléments sont définis à l’aide de deux-points (::), comme indiqué dans la syntaxe ci-dessous :
selector::pseudo-element {
property: value;
}Types courants de pseudo-éléments en CSS
Avant de commencer à travailler sur les pseudo-éléments dans Selenium, voyons d’abord quelques types de pseudo-éléments couramment utilisés en CSS.
Le pseudo-élément ::first-line
Comme son nom l’indique, le ::first-line Le pseudo-élément en CSS est utilisé pour ajouter un style CSS spécial uniquement à la première ligne du texte et ne peut être appliqué qu’aux éléments de niveau bloc.
Syntaxe:
selector::first-line {
property: value;
}Pseudo-élément dans l’exemple CSS :: Pseudo-élément de première ligne
Considérez le code HTML ci-dessous :
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #00ff00;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>The quick brown fox jumps over the lazy dog.
<br>The quick brown fox jumps over the lazy dog.
<br>The quick brown fox jumps over the lazy dog.
</p>
</body>
</html>Si vous essayez d’exécuter le fichier HTML ci-dessus, le résultat sera :
Comme vous pouvez le voir, la couleur verte souhaitée (#00ff00) s’applique uniquement sur la première ligne du <p></p> élément, et cela n’est possible qu’à l’aide de ::first-line pseudo-element.
Le pseudo-élément ::Première lettre
Comme son nom l’indique, le ::first-letter Le pseudo-élément en CSS est utilisé pour ajouter un style CSS spécial uniquement à la première lettre du texte et ne peut être appliqué qu’aux éléments de niveau bloc.
Syntaxe:
selector::first-letter {
property: value;
}Pseudo-élément en CSS Exemple :: Pseudo-élément de première lettre
Considérez le code HTML ci-dessous :
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #00ff00;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>The quick brown fox jumps over the lazy dog.
<br>The quick brown fox jumps over the lazy dog.
<br>The quick brown fox jumps over the lazy dog.
</p>
</body>
</html>Si vous essayez d’exécuter le fichier HTML ci-dessus, le résultat sera :
Comme vous pouvez le voir, la couleur verte souhaitée (#00ff00) s’applique uniquement sur la première lettre du <p></p≶ élément, et cela n’est possible qu’avec l’aide de ::first-letter pseudo-élément.
Le pseudo-élément ::before
Comme son nom l’indique, le ::before Le pseudo-élément en CSS est utilisé pour ajouter un style CSS unique avant le contenu de tout élément.
Syntaxe:
selector::before {
property: value;
}Pseudo-élément dans l’exemple CSS ::Avant le pseudo-élément
Considérez le code HTML ci-dessous :
<!DOCTYPE html>
<html>
<head>
<style>
p::before {
content: "∴"
}
</style>
</head>
<body>
<p>The quick brown fox jumps over the lazy dog.
<br>The quick brown fox jumps over the lazy dog.
<br>The quick brown fox jumps over the lazy dog.
</p>
</body>
</html>Si vous essayez d’exécuter le fichier HTML ci-dessus, le résultat sera :
Comme vous pouvez le voir, le symbole donc souhaité (∴) est appliqué avant l’élément
, et cela n’est possible qu’à l’aide de ::before pseudo-élément.
Le pseudo-élément ::after
Comme son nom l’indique, le ::after Le pseudo-élément en CSS est utilisé pour ajouter un style CSS unique après le contenu de n’importe quel élément.
Syntaxe:
selector::after {
property: value;
}Pseudo-élément dans l’exemple CSS :: After Pseudo-élément
Considérez le code HTML ci-dessous :
<!DOCTYPE html>
<html>
<head>
<style>
p::after {
content: "∴"
}
</style>
</head>
<body>
<p>The quick brown fox jumps over the lazy dog.
<br>The quick brown fox jumps over the lazy dog.
<br>The quick brown fox jumps over the lazy dog.
</p>
</body>
</html>Si vous essayez d’exécuter le fichier HTML ci-dessus, le résultat sera :
Comme vous pouvez le voir, le symbole donc souhaité (∴) est appliqué après le <p></p> élément, et cela n’est possible qu’avec l’aide de ::after pseudo-élément.
De même, il existe de nombreux autres pseudo-éléments disponibles dans le CSS, tels que :
Le pseudo-élément ::marker
La ::marker Le pseudo-élément dans CSS est utilisé pour ajouter un style CSS spécial aux marqueurs de liste, tels que des puces de liste non ordonnées, des numéros de liste ordonnés, etc.
Syntaxe:
selector::marker {
property: value;
}Le pseudo-élément ::selection
La ::selection Le pseudo-élément dans CSS est utilisé pour ajouter un style CSS spécial à la partie ou au contenu sélectionné par l’utilisateur.
Syntaxe:
selector::selection {
property: value;
}Rétrocompatibilité
Semblable aux pseudo-éléments, il existe également une pseudo-classe CSS. Pour définir une pseudo-classe, un seul deux-points (:) est utilisé.
Syntaxe:
selector:pseudo-class {
property: value;
}Mais, vous pourriez rencontrer des situations où un seul deux-points est utilisé pour les deux – la pseudo-classe et les pseudo-éléments. En effet, avant CSS3, la pseudo-classe et les pseudo-éléments avaient la même syntaxe. Dans CSS3, un double deux-points (::) a été introduit pour les pseudo-éléments au lieu d’un simple deux-points (:). Vous pouvez donc voir la syntaxe à deux points utilisée à la fois pour les pseudo-classes et les pseudo-éléments dans CSS2 et CSS1.
Pour des raisons de compatibilité descendante, la syntaxe à deux-points est acceptable pour les pseudo-éléments CSS2 et CSS1. Considérez le tableau ci-dessous pour un tableau complet de rétrocompatibilité des pseudo-éléments en CSS :
|
Navigateur |
Version la plus basse |
Soutien de |
|
Internet Explorer |
8.0 |
:pseudo-élément |
|
9.0 |
:pseudo-élément ::pseudo-élément |
|
|
Firefox (Gecko) |
1,0 (1,0) |
:pseudo-élément |
|
1,0 (1,5) |
:pseudo-élément ::pseudo-élément |
|
|
Opéra |
4.0 |
:pseudo-élément |
|
7.0 |
:pseudo-élément ::pseudo-élément |
|
|
Safari (WebKit) |
1.0 (85) |
:pseudo-élément ::pseudo-élément |
Pourquoi les localisateurs normaux ne peuvent-ils pas être utilisés pour automatiser les pseudo-éléments dans le sélénium ?
Vous devez vous demander pourquoi nous ne pouvons pas utiliser les localisateurs Selenium normaux pour automatiser les pseudo-éléments en CSS. Pour comprendre cela, essayons d’abord de les automatiser à l’aide des localisateurs Selenium.
Considérons la page Web suivante :
<!DOCTYPE html>
<html>
<head>
<style>
p::before {
content: "∴"
}
</style>
</head>
<body>
<p>The quick brown fox jumps over the lazy dog.
<br>The quick brown fox jumps over the lazy dog.
<br>The quick brown fox jumps over the lazy dog.
</p>
</body>
</html>En cela, comme vous pouvez le voir, nous avons utilisé un ::before pseudo-élément, qui ajoute le symbole donc (∴) avant le texte du bouton (c’est-à-dire Soumettre).
Noter: Pour aider à l’automatisation, j’ai téléchargé ce code dans un exemple de référentiel GitHub.
Essayons donc d’automatiser cet élément en utilisant le localisateur CSSSelector en JavaScript.
// Include the chrome driver
require("chromedriver");
// Include selenium webdriver
let webdriver = require("selenium-webdriver");
var By = require("selenium-webdriver").By;
let browser = new webdriver.Builder();
let driver = browser.forBrowser("chrome").build();
driver.get("https://monica-official.github.io/Pseudo-Elements/sample-pseudo-element.html");
var element = driver.findElement(By.css(".submitButton::before")).getText();
element.then(function(txt) {
console.log(txt);
});
driver.quit();Procédure pas à pas :
Dans le code ci-dessus, les étapes effectuées sont les suivantes :
// Include selenium webdriver
let swd = require("selenium-webdriver");
var By = require("selenium-webdriver").By;
let browser = new swd.Builder();
let driver = browser.forBrowser("chrome").build();Tout d’abord, Selenium WebDriver est configuré pour le navigateur Chrome local.
driver.get("https://monica-official.github.io/Pseudo-Elements/sample-pseudo-element.html");…