Améliorez votre projet avec le sélecteur CSS et les attributs personnalisés

Cet article a été initialement publié par TestProject. Merci de soutenir les partenaires qui ont rendu le point de point possible.

Le sélecteur d'éléments de Selenium WebDriver est l'un des composants principaux du cadre d'automatisation et la clé pour interagir avec n'importe quelle application Web. Dans cette revue des sélecteurs d'éléments automatisés, nous discuterons de diverses stratégies, explorerons leurs capacités, peserons leurs avantages et leurs inconvénients et recommandons finalement la meilleure stratégie de sélecteur - en combinaison avec les propriétés personnalisées du sélecteur CSS.

Points clés

• Le sélecteur d'éléments de Selenium WebDriver est essentiel pour interagir avec n'importe quelle application Web. La meilleure stratégie de sélecteur consiste à combiner les propriétés personnalisées du sélecteur CSS, car il combine la facilité d'utilisation, la polyvalence, la prise en charge en ligne, la documentation et les performances.
• Les attributs personnalisés et les sélecteurs CSS permettent aux ingénieurs d'automatisation de localiser des éléments spécifiques sans créer de sélecteurs d'éléments complexes. Cependant, cela nécessite une collaboration entre QA et l'équipe de développement pour ajouter des propriétés personnalisées qui peuvent être utilisées dans l'application.
• XPATH est une stratégie de sélecteur d'élément polyvalente et puissante qui sélectionne n'importe quel élément de la page, que vous ayez une classe et un ID disponibles ou non. Cependant, XPath fonctionne mal dans Internet Explorer.
• Les sélecteurs d'élément ID et de classe sont les moins affectés par les modifications de la structure de l'application. Cependant, si le développeur modifie directement l'ID ou la classe utilisée dans l'automatisation, cela affectera vos tests.
• L'utilisation des noms de balises, du texte de lien, du texte de lien partiel et des noms en tant que stratégies de sélecteur d'éléments est limité et n'est pas recommandé d'être largement adopté dans le cadre d'automatisation. Ils ne doivent être utilisés que sans options de sélecteur supplémentaires disponibles, telles que des balises ou des ID personnalisés.

sélecteur d'éléments de sélénium

Choisissez la meilleure stratégie de sélecteur d'éléments est essentielle au succès des efforts d'automatisation et à la facilité de maintenance. Par conséquent, lors de la sélection d'un sélecteur, de la facilité d'utilisation, de la polyvalence, de la prise en charge en ligne, de la documentation et des performances doit être envisagée. Considérant soigneusement que la bonne stratégie de sélecteur sera payante à l'avenir avec une automatisation facile à maintenir.

Tout comme les aspects techniques du sélecteur d'éléments doivent être pris en compte, la culture de l'organisation doit être prise en compte. Une culture mature de collaboration entre les développeurs et AQ atteindra des niveaux de réussite plus élevés lors de la mise en œuvre de sélecteurs d'éléments en automatisation. Cela profite non seulement aux organisations en jetant les bases de la collaboration dans d'autres domaines du cycle de vie du développement logiciel, mais va également au-delà des efforts d'automatisation eux-mêmes.

Tous les échantillons de code utiliseront les commandes Python et Selenium WebDriver, mais sont généralement applicables à tout langage et cadre de programmation.

HTML Exemple:

J'utiliserai l'extrait HTML du menu de navigation suivant comme exemple dans chaque section:

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

Ne recommandez pas: nom de balise, texte de lien, texte de lien partiel et nom

Je ne passerai pas beaucoup de temps à ce sujet car ils sont tous très limités. Ils ne sont souvent pas un bon choix pour une adoption généralisée dans le cadre d'automatisation. Ils répondent aux besoins spécifiques qui peuvent être facilement répondus à l'aide d'autres stratégies de sélecteur d'éléments. Utilisez-les uniquement si vous avez des besoins spécifiques pour gérer des circonstances spéciales. Même alors, la plupart des cas spéciaux ne sont pas assez spéciaux pour les utiliser. Vous les utiliserez sans options de sélecteur supplémentaires disponibles, telles que des balises ou des ID personnalisés.

Exemple:

À l'aide de noms de balises, vous pouvez sélectionner tout le grand nombre d'éléments qui correspondent aux noms de balises que vous fournissez. Ceci est d'une utilisation limitée car cela ne fonctionne que si vous avez besoin de sélectionner un grand nombre d'éléments du même type. L'exemple suivant renvoie les 4 éléments Div dans l'échantillon HTML.

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

Vous pouvez utiliser l'exemple suivant pour sélectionner le lien. Comme vous pouvez le voir, ils ne peuvent localiser que des balises d'ancrage et le texte de ces balises d'ancrage:

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

Enfin, vous pouvez sélectionner les éléments par nom d'attribut, mais comme vous le voyez dans l'exemple de HTML, il n'y a pas de balise avec l'attribut de nom. Il s'agit d'un problème courant dans presque toutes les applications, car il est très courant d'ajouter un attribut de nom à chaque attribut HTML. Si l'élément de menu principal a un attribut de nom comme celui-ci:

<code class="language-python">driver.find_elements(By.LINK_TEXT, "Home")
driver.find_elements(By.PARTIAL_LINK_TEXT, "Sprock")</code>

Vous pouvez le sélectionner comme ceci:

<code class="language-html"><div id="main-menu" name="menu"></div></code>

Comme vous pouvez le voir, ces stratégies de sélecteur d'éléments ont une utilisation limitée. Les méthodes suivantes sont toutes meilleures car elles sont plus générales et plus puissantes.

Résumé: Nom de la balise, texte de lien, texte et nom de lien partiel

PROS Disavant Facile à utiliser pas largement utilisé Une utilisation extrêmement limitée peut ne pas être applicable dans certains cas

Recommandé: xpath

xpath est une stratégie de sélecteur d'éléments polyvalent et puissante. C'est aussi ma préférence personnelle et préférée. XPATH peut sélectionner n'importe quel élément de la page, que vous ayez des classes et des ID disponibles ou non (bien que sans classes ou ID, il est difficile à maintenir et parfois fragile). Cette option est particulièrement courante car vous pouvez sélectionner l'élément parent. XPath possède également de nombreuses fonctions intégrées qui vous permettent de personnaliser la sélection des éléments.

Cependant, la polyvalence apporte la complexité. Étant donné que XPath peut faire beaucoup, sa courbe d'apprentissage est également plus abrupte que les autres stratégies de sélecteur d'éléments. Cela peut être compensé par une excellente documentation en ligne qui se trouve facilement. Une bonne ressource est le didacticiel XPath trouvé sur W3Schools.com.

Il convient également de noter qu'il y a des compromis lors de l'utilisation de XPath. Bien que vous puissiez sélectionner l'élément parent et utiliser des fonctions intégrées très générales, XPath fonctionne mal dans Internet Explorer. Ce compromis doit être pris en compte lors de la sélection d'une stratégie de sélecteur d'éléments. Si vous devez être en mesure de sélectionner un élément parent, vous devez considérer son impact sur les tests de croisement dans Internet Explorer. Essentiellement, il faudra plus de temps pour exécuter des tests automatisés dans Internet Explorer. Si votre application n'a pas une utilisation élevée de l'explorateur Internet, c'est un bon choix car vous pourriez envisager d'effectuer moins de tests dans Internet Explorer que les autres navigateurs. Si votre base d'utilisateurs a une grande utilisation de l'explorateur Internet, vous ne devez considérer XPath que si d'autres meilleures méthodes ne conviennent pas à votre organisation.

Exemple:

Si vous avez une obligation de sélectionner un élément parent, vous devez sélectionner XPATH. Voici comment le faire: en utilisant notre exemple, supposons que vous souhaitiez localiser l'élément Parent Main-menu en fonction d'un élément d'ancrage:

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

Ce sélecteur d'élément localisera la première instance de l'étiquette d'ancrage avec ID égal à "Menu", puis localisera l'élément parent avec "/../". Le résultat est que vous localiserez l'élément de menu principal.

Résumé: xpath

PROS Disavant Peut sélectionner des éléments parents dans IE Courbe d'apprentissage hautement universelle légèrement raide Beaucoup de support en ligne

Recommandé: id et classe

ID et le sélecteur d'éléments de classe sont deux options différentes dans l'automatisation et effectuent des fonctions différentes dans l'application. Cependant, pour considérer la stratégie du sélecteur d'éléments à utiliser dans l'automatisation, ils diffèrent très peu, nous n'avons donc pas besoin de les considérer séparément. Dans une application, les propriétés "ID" et "Class" d'un élément (si défini) permettent aux développeurs d'interface utilisateur de manipuler et de styliser l'application. Pour l'automatisation, nous l'utilisons pour localiser des éléments spécifiques pour interagir dans l'automatisation.

L'un des avantages de l'utilisation des sélecteurs d'élément ID et de classe est qu'ils sont les moins affectés par les modifications de la structure de l'application. Supposons que vous souhaitiez créer un sélecteur XPATH ou CSS qui s'appuie sur une chaîne de quelques éléments et certains éléments enfants, que se passe-t-il lorsqu'une demande de fonctionnalité rompt la chaîne en ajoutant un nouvel élément? Lorsque vous utilisez des sélecteurs d'élément ID et de classe, vous pouvez localiser des éléments spécifiques au lieu de compter sur la structure de la page. Vous conservez la robustesse de l'automatisation sans être trop lâche sur les changements. Les modifications doivent être détectées par automatisation en créant des cas de test qui se concentrent sur des emplacements d'éléments spécifiques. Les modifications ne devraient pas briser toute votre suite d'automatisation. Cependant, si le développeur modifie directement l'ID ou la classe utilisée dans l'automatisation, cela affectera vos tests.

Si l'application testée n'implémente pas ID et classe dans le cadre des meilleures pratiques de développement, cette politique de sélecteur d'élément ne sera pas disponible. Cette méthode est difficile à utiliser si la balise HTML n'a pas l'ID et la classe que vous pouvez utiliser dans l'automatisation.

Exemple:

Dans notre exemple, si nous voulons sélectionner l'élément de menu supérieur, cela ressemble à ceci:

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

Si nous voulons sélectionner le premier élément de menu, il ressemble à ceci:

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

Résumé: id et classe

PROS Disavant Les développeurs faciles à entretenir peuvent les changer, brisant l'automatisation Facile à apprendre les modifications de la structure de la page

Meilleur: combiné avec des propriétés personnalisées du sélecteur CSS

Si votre organisation QA a une bonne relation collaborative avec l'équipe de développement, vous pourrez très probablement utiliser cette approche de meilleure pratique en automatisation. L'utilisation de propriétés personnalisées et de sélecteurs CSS pour localiser des éléments présente plusieurs avantages pour les équipes et organisations d'AQ. Pour l'équipe QA, cela permet aux ingénieurs d'automatisation de localiser des éléments spécifiques dont ils ont besoin sans créer de sélecteurs d'éléments complexes. Cependant, cela nécessite la possibilité d'ajouter des propriétés personnalisées que les équipes d'automatisation peuvent utiliser dans l'application. Pour profiter de cette approche des meilleures pratiques, votre équipe de développement et de QA devrait travailler ensemble pour mettre en œuvre cette stratégie.

Je veux prendre un moment pour souligner que la méthode du sélecteur CSS ne dépend pas des propriétés personnalisées. Le sélecteur CSS peut localiser toutes les balises et propriétés dans un document HTML comme XPath.

Voyons ce que contient cette méthode. Pour ce faire le mieux, votre équipe d'automatisation doit comprendre ce qu'elle veut cibler dans l'automatisation. En travaillant avec les développeurs (très probablement des ingénieurs frontaux), ils développeront un modèle d'attribut personnalisé qui sera placé dans chaque cible à laquelle l'équipe d'automatisation doit se connecter. Pour cet exemple, nous ajoutons l'attribut «TID» à l'élément cible.

Un point technique à souligner ici est une limitation du sélecteur CSS. Ils ne permettent pas intentionnellement les éléments parents d'être sélectionnés comme XPath. Ceci est fait pour éviter les boucles infinies dans les styles CSS sur les pages Web. Bien que ce soit une bonne chose pour la conception Web, c'est une limitation pour l'utiliser comme stratégie de sélecteur d'éléments automatisé. Heureusement, cette limitation peut être évitée avec des propriétés personnalisées implémentées par les développeurs. QA doit demander des attributs personnalisés appropriés afin qu'il n'y ait pas besoin de sélectionner l'élément parent.

Si vous souhaitez sélectionner cette stratégie sans utiliser de propriétés personnalisées, vous êtes toujours sur la bonne voie. Par exemple, vous pouvez localiser des liens dans le sous-menu en utilisant les méthodes suivantes:

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

Cette stratégie permettra aux ingénieurs d'automatisation de créer une automatisation fiable facile à entretenir et ne se casse pas en raison de changements non liés à l'interface utilisateur. Choisir cette stratégie est la meilleure façon de le faire. Non seulement il deviendra une solution d'automatisation facile à entretenir, mais elle encouragera également la collaboration entre l'équipe de développement et l'équipe d'AQ.

Exemple:

La mise en œuvre d'une propriété personnalisée dans notre exemple HTML produira les résultats suivants:

<code class="language-python">driver.find_elements(By.LINK_TEXT, "Home")
driver.find_elements(By.PARTIAL_LINK_TEXT, "Sprock")</code>

Veuillez noter les nouvelles propriétés dans certains éléments. Nous avons créé une nouvelle propriété qui n'entre en conflit pas avec des attributs HTML standard, appelés "TID". Avec cette propriété personnalisée, nous pouvons utiliser le sélecteur CSS pour le localiser:

<code class="language-html"><div id="main-menu" name="menu"></div></code>

Supposons que vous souhaitiez sélectionner tous les liens du menu, qu'il s'agisse d'un élément de menu supérieur ou d'un sous-menu. À l'aide du sélecteur CSS, vous pouvez créer des sélecteurs d'éléments très généraux:

<code class="language-html"><div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu">
<a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div></code>

Le but de "* =" est d'effectuer des recherches génériques pour la valeur "-Link" dans le champ TID de n'importe quel élément. Mettez-le après le spécificateur d'identification # main-menu, qui concentre la portée de recherche de l'élément dans le menu principal.

Si vous souhaitez sélectionner cette stratégie sans utiliser de propriétés personnalisées, vous êtes toujours sur la bonne voie. Par exemple, vous pouvez localiser des liens dans le sous-menu en utilisant les méthodes suivantes:

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

Cette stratégie permettra aux ingénieurs d'automatisation de créer une automatisation fiable facile à entretenir et non interrompue par des changements non liés à l'interface utilisateur. Choisir cette stratégie est la meilleure façon de le faire. Non seulement il deviendra une solution d'automatisation facile à entretenir, mais elle encouragera également la collaboration entre l'équipe de développement et l'équipe d'AQ.

Résumé: En combinaison avec les propriétés personnalisées du sélecteur CSS

PROS Disavant Facile à apprendre les premiers efforts pour établir des relations collaboratives avec les équipes de développement Beaucoup de soutien en ligne universel Excellentes performances dans tous les navigateurs

Conclusion

Il existe de bonnes options pour implémenter les stratégies de sélecteur d'éléments standard d'entreprise dans le cadre d'automatisation. Des options telles que les noms de balises ou le texte du lien doivent être évités, sauf si c'est votre seule option. Les sélecteurs XPATH, ID et classe sont un bon moyen. De loin, la meilleure façon est d'implémenter des propriétés personnalisées et de les localiser à l'aide du sélecteur CSS. Cela encourage également la collaboration entre l'équipe de développement et l'équipe d'AQ.

Voici les options de comparaison côte à côte:

✓ - Oui / - Partie ✗ - Non

	标签名称、链接文本（等）	XPath	ID 和类	结合 CSS 选择器的自定义属性
易于使用	✓	✓	✓	✓
在线支持	✓	✓	✓	✓
通用性	✗	✓	✗	✓
性能	✓	✗	✓	✓
易于维护	✗	✓	✓	✓
鼓励协作	✗	✗	✓	✓

FAQ sur les propriétés personnalisées du sélecteur CSS

Quelles sont les propriétés personnalisées du sélecteur CSS?

CSS Sélecteur Les attributs personnalisés sont une fonctionnalité puissante de CSS qui permet aux développeurs de sélectionner et de styliser des éléments en fonction de leurs valeurs d'attribut. Ceci est particulièrement utile lorsque vous souhaitez appliquer un style spécifique aux éléments qui partagent des attributs publics mais peuvent ne pas partager le même nom ou classe de balise. Par exemple, vous pouvez utiliser un sélecteur d'attributs personnalisé pour styliser tous les éléments avec des attributs de données "actifs", quel que soit leur nom ou classe de balise.

Comment personnaliser les propriétés à l'aide du sélecteur CSS?

Pour personnaliser les propriétés avec le sélecteur CSS, vous devez utiliser des crochets carrés [] dans le sélecteur CSS. Dans les parenthèses, vous spécifiez l'attribut et la valeur à sélectionner. Par exemple, pour sélectionner tous les éléments avec l'attribut de données "actif", vous utiliserez le sélecteur [data-active]. Vous pouvez ensuite appliquer n'importe quel style souhaité à ces éléments.

Pouvez-vous utiliser les propriétés personnalisées du sélecteur CSS avec des propriétés?

Oui, vous pouvez utiliser les propriétés personnalisées du sélecteur CSS avec toutes les propriétés. Cela inclut les attributs HTML standard tels que "classe" et "ID" ainsi que tous les attributs de données personnalisés que vous pourriez avoir ajoutés à l'élément.

Quels sont les différents types de sélecteurs de propriété CSS?

Il existe plusieurs types de sélecteurs de propriété CSS. Le type le plus élémentaire est le sélecteur de correspondance exact, qui sélectionne des éléments en fonction de la correspondance exacte de ses valeurs d'attribut. Il existe également des sélecteurs pour faire correspondre le début, la fin ou toute partie de la valeur de la propriété. De plus, il existe des sélecteurs pour les éléments de correspondance avec des attributs spécifiques quelle que soit leur valeur.

Pouvez-vous utiliser les propriétés personnalisées du sélecteur CSS pour tous les navigateurs?

Tous les navigateurs modernes (y compris Chrome, Firefox, Safari et Edge) prennent en charge les propriétés personnalisées du sélecteur CSS. Cependant, ils peuvent ne pas être soutenus par des versions plus anciennes de ces navigateurs ou d'autres navigateurs moins courants. Il est préférable de tester votre CSS dans plusieurs navigateurs pour la compatibilité.

Comment utiliser les propriétés personnalisées du sélecteur CSS pour améliorer les performances du site?

Les propriétés personnalisées du sélecteur CSS peuvent aider à améliorer les performances du site Web en réduisant la quantité de CSS que vous devez écrire. En sélectionnant des éléments en fonction de leurs attributs, vous pouvez appliquer des styles à plusieurs éléments à la fois sans écrire un CSS séparé pour chaque élément. Cela peut rendre votre CSS plus efficace et plus facile à entretenir.

Pouvez-vous utiliser les propriétés personnalisées du sélecteur CSS en combinaison avec d'autres sélecteurs?

Oui, vous pouvez utiliser les propriétés personnalisées du sélecteur CSS en combinaison avec d'autres sélecteurs. Par exemple, vous pouvez utiliser un sélecteur d'attribut personnalisé en combinaison avec un sélecteur de classe pour sélectionner uniquement des éléments avec des classes spécifiques et des attributs spécifiques.

Quels sont les cas d'utilisation courants pour les propriétés personnalisées des sélecteurs CSS?

Les attributs personnalisés du sélecteur CSS sont généralement utilisés pour styliser des éléments en fonction de leur état ou de leurs fonctions. Par exemple, vous pouvez utiliser un sélecteur de propriétés personnalisé pour styliser tous les boutons désactivés ou tous les champs de formulaire requis. Ils peuvent également être utilisés pour les paramètres de thème en appliquant différents styles en fonction de l'attribut de données de données.

Comment les propriétés personnalisées du sélecteur CSS se comparent-elles aux autres sélecteurs CSS?

Les propriétés personnalisées du sélecteur CSS offrent une plus grande flexibilité que de nombreux autres sélecteurs CSS. Alors que d'autres sélecteurs se limitent à sélectionner des éléments en fonction de leur nom de balise, de leur classe ou de leur ID, un sélecteur d'attribut personnalisé peut sélectionner des éléments en fonction de n'importe quel attribut. Cela en fait un outil puissant pour configurer des pages Web complexes.

Y a-t-il des inconvénients à utiliser le sélecteur CSS pour personnaliser les propriétés?

Un inconvénient potentiel des propriétés de personnalisation avec les sélecteurs CSS est qu'ils peuvent rendre votre CSS plus complexe. Si vous utilisez un grand nombre de sélecteurs de propriétés personnalisés, il peut être difficile de comprendre et de maintenir votre CSS. Cependant, cela peut être atténué par une planification et une organisation minutieuses.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!