Comment utiliser Selenium IDE avec des scripts & Commandes (Assert, Verify)

Nous utiliserons le site Web de Mercury Tours comme notre application Web en cours de test. Il s'agit d'un système de réservation de vol en ligne qui contient tous les éléments dont nous avons besoin pour ce tutoriel. Son URL est http://demo.guru99.com/test/newtours/, et ce sera notre URL de base.

Créer un script en enregistrant

Créons maintenant notre premier script de test dans Selenium IDE en utilisant la méthode la plus courante - par enregistrement. Ensuite, nous exécuterons notre script en utilisant la fonction de lecture.

Étape 1

Lancez Firefox et Selenium IDE.
Saisissez la valeur de notre URL de base: http://demo.guru99.com/test/newtours/.
Activez le bouton Enregistrer (s'il n'est pas encore activé par défaut).

Étape 2 Dans Firefox, accédez à http://demo.guru99.com/test/newtours/. Firefox devrait vous amener à la page similaire à celle illustrée ci-dessous.
Étape 3 Cliquez avec le bouton droit sur n'importe quel espace vide de la page, comme sur le logo Mercury Tours dans le coin supérieur gauche. Cela fera apparaître le menu contextuel de Selenium IDE. Remarque: ne cliquez sur aucun objet ou image avec un lien hypertexte Sélectionnez l'option "Afficher les commandes disponibles". Ensuite, sélectionnez «assertTitle exact: Welcome: Mercury Tours». Il s'agit d'une commande qui garantit que le titre de la page est correct.

Étape 4 Dans la zone de texte "Nom d'utilisateur" de Mercury Tours, saisissez un nom d'utilisateur non valide, "invalidUNN". Dans la zone de texte "Mot de passe", saisissez un mot de passe non valide, "invalidPWD".

Étape 5 Cliquez sur le bouton "Connexion". Firefox devrait vous diriger vers cette page.
Étape 6 Désactivez le bouton d'enregistrement pour arrêter l'enregistrement. Votre script devrait maintenant ressembler à celui illustré ci-dessous.
Étape 7 Maintenant que nous en avons terminé avec notre script de test, nous allons le sauvegarder dans un cas de test. Dans le menu Fichier, sélectionnez "Enregistrer le scénario de test". Alternativement, vous pouvez simplement appuyer sur Ctrl + S.
Étape 8 Choisissez l'emplacement souhaité, puis nommez le scénario de test "Invalid_login". Cliquez sur le bouton "Enregistrer".
Étape 9. Notez que le fichier a été enregistré au format HTML.

Étape 10.

Revenez à Selenium IDE et cliquez sur le bouton Lecture pour exécuter tout le script. Selenium IDE devrait être capable de tout reproduire parfaitement.

Introduction aux commandes Selenium - Selenese

Les commandes Selenese peuvent avoir jusqu'à un maximum de deux paramètres: cible et valeur.
Les paramètres ne sont pas requis en permanence. Cela dépend du nombre requis par la commande.

3 types de commandes

Actions

Ce sont des commandes qui interagissent directement avec les éléments de la page.

Exemple: la commande "clic" est une action car vous interagissez directement avec l'élément sur lequel vous cliquez.

La commande "type" est également une action car vous mettez des valeurs dans une zone de texte et la zone de texte vous les montre en retour. Il existe une interaction bidirectionnelle entre vous et la zone de texte.

Accesseurs

Ce sont des commandes qui vous permettent de stocker des valeurs dans une variable.

Exemple: la commande "storeTitle" est un accesseur car elle ne "lit" que le titre de la page et l'enregistre dans une variable. Il n'interagit avec aucun élément de la page.

Assertions

Ce sont des commandes qui vérifient si une certaine condition est remplie.

3 types d'assertions

Affirmez . Lorsqu'une commande "assert" échoue, le test est arrêté immédiatement.
Vérifiez . Lorsqu'une commande «vérifier» échoue, Selenium IDE enregistre cet échec et poursuit l'exécution du test.
WaitFor . Avant de passer à la commande suivante, les commandes "waitFor" attendront d'abord qu'une certaine condition devienne vraie.
- Si la condition devient vraie pendant la période d'attente, l'étape passe.
- Si la condition ne devient pas vraie, l'étape échoue. L'échec est consigné et l'exécution du test passe à la commande suivante.
- Par défaut, la valeur du délai d'expiration est définie sur 30 secondes. Vous pouvez modifier cela dans la boîte de dialogue Options de Selenium IDE sous l'onglet Général.

Assert vs Verify

Commandes communes

Commander	Nombre de paramètres	Description
ouvert	0 - 2	Ouvre une page à l'aide d'une URL.
click / clickAndWait	1	Clique sur un élément spécifié.
type / typeKeys	2	Tapez une séquence de caractères.
verifyTitle / assertTitle	1	Compare le titre de la page réel avec une valeur attendue.
verifyTextPresent	1	Vérifie si un certain texte se trouve dans la page.
verifyElementPresent	1	Vérifie la présence d'un certain élément.
verifyTable	2	Compare le contenu d'une table avec les valeurs attendues.
waitForPageToLoad	1	Suspend l'exécution jusqu'à ce que la page soit complètement chargée.
waitForElementPresent	1	Suspend l'exécution jusqu'à ce que l'élément spécifié devienne présent.

Créer un script manuellement avec Firebug

Maintenant, nous allons recréer le même cas de test manuellement, en tapant les commandes. Cette fois, nous devrons utiliser Firebug.

Étape 1

Ouvrez Firefox et Selenium IDE.
Saisissez l'URL de base (http://demo.guru99.com/test/newtours/).
Le bouton d'enregistrement doit être désactivé.

Étape 2: Cliquez sur la ligne vierge la plus haute dans l'éditeur.

Tapez "open" dans la zone de texte Commande et appuyez sur Entrée.

Étape 3

Accédez à Firefox jusqu'à notre URL de base et activez Firebug
Dans le volet Selenium IDE Editor, sélectionnez la deuxième ligne (la ligne sous la commande "open") et créez la deuxième commande en tapant "assertTitle" dans la zone de commande.
N'hésitez pas à utiliser la fonction de saisie semi-automatique.

Étape 4

Dans Firebug, développez la balise pour afficher la balise .</li> <li>Cliquez sur la valeur de la balise <title> (qui est "Welcome: Mercury Tours") et collez-la dans le champ Target de l'éditeur.</li> </ul> </td> </tr> <tr> <td><strong>Étape 5</strong> <ul> <li>Pour créer la troisième commande, cliquez sur la troisième ligne vide dans l'éditeur et tapez "tapez" dans la zone de texte Commande.</li> <li>Dans Firebug, cliquez sur le bouton "Inspecter".</li> </ul> </td> </tr> <tr> <td>Cliquez sur la zone de texte Nom d'utilisateur. Notez que Firebug vous montre automatiquement le code HTML de cet élément.</td> </tr> <tr> <td><strong>Étape 6</strong> <p>Notez que la zone de texte Nom d'utilisateur n'a pas d'ID, mais qu'elle a un attribut NAME. Nous utiliserons donc son NOM comme localisateur. Copiez la valeur NAME et collez-la dans le champ Cible dans Selenium IDE.</p> <p>Toujours dans la zone de texte Cible, préfixez "userName" avec "name =", indiquant que Selenium IDE doit cibler un élément dont l'attribut NAME est "userName".</p> <p>Tapez "invalidUN" dans la zone de texte Valeur de Selenium IDE. Votre script de test devrait maintenant ressembler à l'image ci-dessous. Nous en avons terminé avec la troisième commande. Remarque: au lieu de invalidUN, vous pouvez saisir toute autre chaîne de texte. Mais Selenium IDE est sensible à la casse et vous saisissez des valeurs / attributs exactement comme dans l'application.</p> </td> </tr> <tr> <td><strong>Étape 7</strong> <ul> <li>Pour créer la quatrième commande, tapez "tapez" dans la zone de texte Commande.</li> <li>Encore une fois, utilisez le bouton «Inspecter» de Firebug pour obtenir le localisateur de la zone de texte «Mot de passe».</li> </ul> <ul> <li> <p>Collez l'attribut NAME ("mot de passe") dans le champ Cible et préfixez-le avec "nom ="</p> </li> <li> <p>Tapez "invalidPW" dans le champ Valeur de Selenium IDE. Votre script de test devrait maintenant ressembler à l'image ci-dessous.</p> </li> </ul> </td> </tr> <tr> <td><strong>Étape 8</strong> <ul> <li>Pour la cinquième commande, tapez «clickAndWait» dans la zone de texte Commande dans Selenium IDE.</li> <li>Utilisez le bouton «Inspecter» de Firebug pour obtenir le localisateur du bouton «Connexion».</li> </ul> <ul> <li>Collez la valeur de l'attribut NAME ("login") dans la zone de texte Cible et préfixez-la avec "name =".</li> <li>Votre script de test devrait maintenant ressembler à l'image ci-dessous.</li> </ul> </td> </tr> </tbody> </table> <p><strong>Étape 9:</strong> Enregistrez le scénario de test de la même manière que nous l'avons fait dans la section précédente.</p> <a id="menu-6"></a> <h2>Utilisation du bouton Rechercher</h2> <p><strong>Le bouton Rechercher dans Selenium IDE est utilisé pour vérifier si ce que nous avions mis dans la zone de texte Cible est bien l'élément d'interface utilisateur correct.</strong></p> <p>Utilisons le cas de test Invalid_login que nous avons créé dans les sections précédentes. Cliquez sur n'importe quelle commande avec une entrée cible, par exemple, la troisième commande.</p> <p>Cliquez sur le bouton Rechercher. Notez que la zone de texte Nom d'utilisateur de la page Mercury Tours est mise en surbrillance pendant une seconde.</p> <p>Cela indique que Selenium IDE a pu détecter et accéder correctement à l'élément attendu. Si le bouton Rechercher a mis en surbrillance un élément différent ou aucun élément du tout, il doit y avoir un problème avec votre script.</p> <a id="menu-7"></a> <h2>Exécuter la commande</h2> <p><strong>Cela vous permet d'exécuter une seule commande sans exécuter l'ensemble du scénario de test</strong> . Cliquez simplement sur la ligne que vous souhaitez exécuter puis cliquez sur "Actions> Exécuter cette commande" dans la barre de menu ou appuyez simplement sur "X" de votre clavier.</p> <p><strong>Étape 1.</strong> Assurez-vous que votre navigateur est sur la page d'accueil de Mercury Tours. Cliquez sur la commande que vous souhaitez exécuter. Dans cet exemple, cliquez sur la ligne "type | userName | invalidUN".</p> <p><strong>Étape 2.</strong> Appuyez sur "X" sur votre clavier.</p> <p><strong>Étape 3.</strong> Observez que la zone de texte pour le nom d'utilisateur est remplie avec le texte "invalidUN"</p> <p><strong>L'exécution des commandes de cette manière dépend fortement de la page actuellement affichée par Firefox</strong> . Cela signifie que si vous essayez l'exemple ci-dessus avec la page d'accueil Google affichée à la place de Mercury Tours ', votre étape échouera car il n'y a pas de zone de texte avec un attribut "userName" sur la page d'accueil de Google.</p> <a id="menu-8"></a> <h2>Point de départ</h2> <p><strong>Un point de départ est un indicateur qui indique à Selenium IDE les lignes que l'exécution commencera</strong> . <strong>Sa touche de raccourci est "S".</strong></p> <p>Dans l'exemple ci-dessus, la lecture commencera sur la troisième ligne (tapez | mot de passe | invalidPW). <strong>Vous ne pouvez avoir qu'un seul point de départ dans un seul script de test.</strong></p> <p>Le point de départ est similaire à Exécuter la commande dans la mesure où ils dépendent de la page actuellement affichée. Le point de départ échouera si vous êtes sur la mauvaise page.</p> <a id="menu-9"></a> <h2>Points d'arrêt</h2> <p>Les points d'arrêt sont des indicateurs qui indiquent à Selenium IDE où mettre automatiquement le test en pause. <strong>La touche de raccourci est "B".</strong></p> <p>La surbrillance jaune signifie que l'étape actuelle est en attente. Cela prouve que Selenium IDE a suspendu l'exécution de cette étape. <strong>Vous pouvez avoir plusieurs points d'arrêt dans un cas de test.</strong></p> <a id="menu-10"></a> <h2>Étape</h2> <p>Il vous permet d'exécuter les commandes successives une par une après la mise en pause du scénario de test. Utilisons le scénario de la section précédente "Breakpoints".</p> <table> <tbody> <tr> <td width="50%"> </td> <td> <p><strong>Avant de cliquer sur "Étape".</strong></p> <p>Le cas de test s'arrête à la ligne "clickAndWait | login".</p> </td> </tr> <tr> <td width="50%"> </td> <td> <p><strong>Après avoir cliqué sur "Étape".</strong></p> <p>La ligne "clickAndWait | login" est exécutée et s'arrête à la commande suivante (verifyTitle | Sign-on: Mercury Tours).</p> <p>Notez que la ligne suivante est suspendue même s'il n'y a pas de point d'arrêt. C'est l'objectif principal de la fonction Step - elle exécute les commandes suivantes une par une pour vous donner plus de temps pour inspecter le résultat après chaque étape.</p> </td> </tr> </tbody> </table> <a id="menu-11"></a> <h2>Points importants à noter lors de l'utilisation d'autres formats dans la vue source</h2> <p><strong>Selenium IDE ne fonctionne bien qu'avec HTML - les autres formats sont encore en mode expérimental</strong> . Il n'est <strong>PAS conseillé</strong> de créer ou de modifier des tests en utilisant d'autres formats dans la vue source car il reste encore beaucoup de travail à faire pour le rendre stable. Vous trouverez ci-dessous les bogues connus à partir de la version 1.9.1.</p> <ul> <li>Vous ne serez pas en mesure d'effectuer la lecture ni de revenir à la vue tableau à moins que vous ne reveniez au HTML.</li> <li>La seule façon d'ajouter des commandes en toute sécurité sur le code source est de les enregistrer.</li> <li>Lorsque vous modifiez manuellement le code source, tout est perdu lorsque vous passez à un autre format.</li> <li>Bien que vous puissiez enregistrer votre scénario de test dans la vue source, Selenium IDE ne pourra pas l'ouvrir.</li> </ul> <p><strong>La méthode recommandée pour convertir les tests Selenese est d'utiliser l'option «Exporter le cas de test sous…» dans le menu Fichier, et non via la vue source.</strong></p> <a id="menu-12"></a> <h2>Résumé</h2> <ul> <li>Les scripts de test peuvent être créés en enregistrant ou en tapant les commandes et les paramètres manuellement.</li> <li>Lors de la création manuelle de scripts, Firebug est utilisé pour obtenir le localisateur.</li> <li>Le bouton Rechercher permet de vérifier que la commande est capable d'accéder au bon élément.</li> <li>La vue tableau affiche un script de test sous forme de tableau tandis que la vue source l'affiche au format HTML.</li> <li>La modification de la vue source vers un format non HTML est encore à titre expérimental.</li> <li>N'utilisez pas la vue source pour créer des tests dans d'autres formats. Utilisez plutôt les fonctionnalités d'exportation.</li> <li>Les paramètres ne sont pas requis en permanence. Cela dépend de la commande.</li> <li>Il existe trois types de commandes:</li> <ul> <li>Actions - interagit directement avec les éléments de la page</li> <li>Accesseurs - "lit" une propriété d'élément et la stocke dans une variable</li> <li>Assertions - compare une valeur réelle à une valeur attendue</li> </ul> <li>Les assertions ont trois types:</li> <ul> <li>Assert - en cas d'échec, les étapes suivantes ne sont plus exécutées</li> <li>Vérifier - en cas d'échec, les étapes suivantes sont toujours exécutées.</li> <li>WaitFor - passe si la condition spécifiée devient vraie dans le délai d'expiration; sinon, ça échouera</li> </ul> <li>Les commandes les plus courantes sont:</li> <ul> <li>ouvert</li> <li>click / clickAndWait</li> <li>type / typeKeys</li> <li>verifyTitle / assertTitle</li> <li>verifyTextPresent</li> <li>verifyElementPresent</li> <li>verifyTable</li> <li>waitForPageToLoad</li> <li>waitForElementPresent</li> </ul> </ul> </div> </article> <div id="container-5533149ee6411a5f99b370c693e87966"></div> </div> </div> </div> </div> </div> <aside class="col-lg-4 sidebar sidebar--right"> <div class="widget widget-popular-posts"> <h2 class="widget-title">Articles Populaires</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8004010-black-and-white-opacity-functions" title="Fonctions d'opacité noir et blanc - Astuces CSS" rel="bookmark"><img src="https://cdn.css-code.org/9599652/black_and_white_opacity_functions_css-tricks.png.webp" loading="lazy" alt="Fonctions d'opacité noir et blanc - Astuces CSS" title="Fonctions d'opacité noir et blanc - Astuces CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004010-black-and-white-opacity-functions" title="Fonctions d'opacité noir et blanc - Astuces CSS" rel="bookmark">Fonctions d'opacité noir et blanc - Astuces CSS 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8004011-caching-the-current-selector-and-in-sass" title="Mise en cache du sélecteur de courant (&) dans Sass - Astuces CSS" rel="bookmark"><img src="https://cdn.css-code.org/5014008/caching_the_current_selector_in_sass_css-tricks.png.webp" loading="lazy" alt="Mise en cache du sélecteur de courant (&) dans Sass - Astuces CSS" title="Mise en cache du sélecteur de courant (&) dans Sass - Astuces CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004011-caching-the-current-selector-and-in-sass" title="Mise en cache du sélecteur de courant (&) dans Sass - Astuces CSS" rel="bookmark">Mise en cache du sélecteur de courant (&) dans Sass - Astuces CSS 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8004012-bem-mixins" title="BEM Mixins - Astuces CSS" rel="bookmark"><img src="https://cdn.css-code.org/5134552/bem_mixins_css-tricks.png.webp" loading="lazy" alt="BEM Mixins - Astuces CSS" title="BEM Mixins - Astuces CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8004012-bem-mixins" title="BEM Mixins - Astuces CSS" rel="bookmark">BEM Mixins - Astuces CSS 2025</a></h3> </div> </div> </li> </ul> </div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Les meilleurs avis pour le mois</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8002871-background-color" title="Couleur de fond - Astuces CSS" rel="bookmark">Couleur de fond - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8002872-background-image" title="Image de fond - Astuces CSS" rel="bookmark">Image de fond - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8002873-background-position" title="Background-position - Astuces CSS" rel="bookmark">Background-position - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8002874-background-repeat" title="Background-repeat - Astuces CSS" rel="bookmark">Background-repeat - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8002875-bleed" title="Saigner - Astuces CSS" rel="bookmark">Saigner - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8002876-block-overflow" title="Block-overflow - Astuces CSS" rel="bookmark">Block-overflow - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8002877-background-blend-mode" title="Background-blend-mode - Astuces CSS" rel="bookmark">Background-blend-mode - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8002878-border" title="Frontière - Astuces CSS" rel="bookmark">Frontière - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8002879-border-collapse" title="Border-collapse - Astuces CSS" rel="bookmark">Border-collapse - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8002880-background-size" title="Taille de fond - Astuces CSS" rel="bookmark">Taille de fond - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8002881-border-boundary" title="Frontière-frontière - Astuces CSS" rel="bookmark">Frontière-frontière - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8002882-border-spacing" title="Espacement des bordures - Astuces CSS" rel="bookmark">Espacement des bordures - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8002883-box-sizing" title="Dimensionnement des boîtes - Astuces CSS" rel="bookmark">Dimensionnement des boîtes - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8002884-border-radius" title="Border-radius - Astuces CSS" rel="bookmark">Border-radius - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8002885-box-shadow" title="Boîte-ombre - Astuces CSS" rel="bookmark">Boîte-ombre - Astuces CSS</a></h3> </div> </div> </li> </ul> </div> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Top Articles</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003057-text-overflow" title="Text-overflow - Astuces CSS" rel="bookmark"><img src="https://cdn.css-code.org/5435238/text-overflow_css-tricks.png.webp" loading="lazy" alt="Text-overflow - Astuces CSS" title="Text-overflow - Astuces CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003057-text-overflow" title="Text-overflow - Astuces CSS" rel="bookmark">Text-overflow - Astuces CSS 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003058-scroll-margin" title="Marge de défilement - Astuces CSS" rel="bookmark"><img src="https://cdn.css-code.org/5946511/scroll-margin_css-tricks.png.webp" loading="lazy" alt="Marge de défilement - Astuces CSS" title="Marge de défilement - Astuces CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003058-scroll-margin" title="Marge de défilement - Astuces CSS" rel="bookmark">Marge de défilement - Astuces CSS 2025</a></h3> </div> </div> </li><li class="post-list-small__item"> <div class="post-list-small__entry clearfix"> <div class="post-list-small__img-holder"> <div class="thumb-container thumb-100"><a href="/8003059-scroll-snap-type" title="Scroll-snap-type - Astuces CSS" rel="bookmark"><img src="https://cdn.css-code.org/6197741/scroll-snap-type_css-tricks.png.webp" loading="lazy" alt="Scroll-snap-type - Astuces CSS" title="Scroll-snap-type - Astuces CSS" class="post-list-small__img--rounded" style="width:88px;height:88px" /></a></div> </div> <div class="post-list-small__body"> <h3 class="post-list-small__entry-title"><a href="/8003059-scroll-snap-type" title="Scroll-snap-type - Astuces CSS" rel="bookmark">Scroll-snap-type - Astuces CSS 2025</a></h3> </div> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer footer--dark"> <div class="container"> <div class="footer__widgets"> <div class="row"> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Articles Populaires</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003815-display-browser-and-version" title="Afficher le navigateur et la version - Astuces CSS" rel="bookmark">Afficher le navigateur et la version - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003816-display-latest-feedburner-post" title="Afficher le dernier message FeedBurner - Astuces CSS" rel="bookmark">Afficher le dernier message FeedBurner - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003817-display-only-first-x-divs-toggle-rest" title="Afficher uniquement les X premières divisions, basculer le repos - Astuces CSS" rel="bookmark">Afficher uniquement les X premières divisions, basculer le repos - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003818-jquery-duplicate-plugin" title="Plug-in jQuery Duplicate - Astuces CSS" rel="bookmark">Plug-in jQuery Duplicate - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003819-done-resizing-event" title="Événement de redimensionnement terminé - Astuces CSS" rel="bookmark">Événement de redimensionnement terminé - Astuces CSS</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Choix De L'Éditeur</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003501-custom-radio-buttons" title="Boutons radio personnalisés - Astuces CSS" rel="bookmark">Boutons radio personnalisés - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003502-css-box-shadow" title="Ombre de boîte CSS - Astuces CSS" rel="bookmark">Ombre de boîte CSS - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003503-custom-file-input-styling" title="Style d'entrée de fichier personnalisé - Astuces CSS" rel="bookmark">Style d'entrée de fichier personnalisé - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003504-css-triangle" title="Triangle CSS - Astuces CSS" rel="bookmark">Triangle CSS - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003505-diagonal-graph-paper-gradient" title="Gradient diagonal de papier millimétré - Astuces CSS" rel="bookmark">Gradient diagonal de papier millimétré - Astuces CSS</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Top Articles</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003210-036-large-screen-single-blog-page" title="# 036 - Page de blog unique sur grand écran - Astuces CSS" rel="bookmark"># 036 - Page de blog unique sur grand écran - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003211-035-desktop-hover-states" title="# 035 - États de survol du bureau - Astuces CSS" rel="bookmark"># 035 - États de survol du bureau - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003212-037-color-manipulation" title="# 037 - Manipulation des couleurs - Astuces CSS" rel="bookmark"># 037 - Manipulation des couleurs - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003213-033-media-queries-in-javascript" title="# 033 - Requêtes multimédias en JavaScript - Astuces CSS" rel="bookmark"># 033 - Requêtes multimédias en JavaScript - Astuces CSS</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003214-039-cross-device-testing" title="# 039 - Tests multi-appareils - Astuces CSS" rel="bookmark"># 039 - Tests multi-appareils - Astuces CSS</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright fr.css-code.org, 2025 Mai | <a href="https://fr.css-code.org/about-site" title="À propos du site">À propos du site</a> | <a href="https://fr.css-code.org/contacts" title="Contacts">Contacts</a> | <a href="https://fr.css-code.org/privacy-policy" title="Politique de confidentialité">Politique de confidentialité</a>. </p> </div> </div> </footer> <link href="https://css-code.org/template/css/style.min.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" /> </body> </html>