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

Table des matières:

Anonim

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="/8003927-detect-ajax-request" title="Détecter la demande AJAX - Astuces CSS" rel="bookmark"><img src="https://cdn.css-code.org/9000324/detect_ajax_request_css-tricks.png.webp" loading="lazy" alt="Détecter la demande AJAX - Astuces CSS" title="Détecter la demande AJAX - 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="/8003927-detect-ajax-request" title="Détecter la demande AJAX - Astuces CSS" rel="bookmark">Détecter la demande AJAX - 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="/8003928-create-url-slug-from-post-title" title="Créer un slug d'URL à partir du titre du message - Astuces CSS" rel="bookmark"><img src="https://cdn.css-code.org/1047287/create_url_slug_from_post_title_css-tricks.png.webp" loading="lazy" alt="Créer un slug d'URL à partir du titre du message - Astuces CSS" title="Créer un slug d'URL à partir du titre du message - 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="/8003928-create-url-slug-from-post-title" title="Créer un slug d'URL à partir du titre du message - Astuces CSS" rel="bookmark">Créer un slug d'URL à partir du titre du message - 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="/8003929-detect-location-by-ip" title="Détecter l'emplacement par IP - Astuces CSS" rel="bookmark"><img src="https://cdn.css-code.org/8002714/detect_location_by_ip_css-tricks.png.webp" loading="lazy" alt="Détecter l'emplacement par IP - Astuces CSS" title="Détecter l'emplacement par IP - 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="/8003929-detect-location-by-ip" title="Détecter l'emplacement par IP - Astuces CSS" rel="bookmark">Détecter l'emplacement par IP - 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="/8004176-138-walking-through-an-https-conversion-on-wordpress" title="# 138: Marcher à travers une conversion HTTPS sur WordPress - Astuces CSS" rel="bookmark"># 138: Marcher à travers une conversion HTTPS sur WordPress - 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="/8004178-137-svg-is-for-everybody" title="# 137: SVG est pour tout le monde - Astuces CSS" rel="bookmark"># 137: SVG est pour tout le monde - 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="/8004180-136-moving-things-to-a-cms-as-needed" title="# 136: Déplacer les choses vers un CMS selon les besoins - Astuces CSS" rel="bookmark"># 136: Déplacer les choses vers un CMS selon les besoins - 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="/8004181-142-hiding-things-with-css" title="# 142: Cacher des choses avec CSS - Astuces CSS" rel="bookmark"># 142: Cacher des choses avec CSS - 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="/8004182-141-getting-the-images-and-numbers-for-responsive-images" title="# 141: Obtenir les images et les chiffres pour des images réactives - Astuces CSS" rel="bookmark"># 141: Obtenir les images et les chiffres pour des images réactives - 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="/8004183-135-three-ways-to-animate-svg" title="# 135: Trois façons d'animer SVG - Astuces CSS" rel="bookmark"># 135: Trois façons d'animer SVG - 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="/8004184-140-exploring-css-layout-techniques-while-trying-to-get-a-subtitle-to-wrap" title="# 140: Explorer les techniques de mise en page CSS tout en essayant d'obtenir un sous-titre à envelopper - Astuces CSS" rel="bookmark"># 140: Explorer les techniques de mise en page CSS tout en essayant d'obtenir un sous-titre à envelopper - 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="/8004185-133-figuring-out-responsive-images" title="# 133: Trouver des images réactives - Astuces CSS" rel="bookmark"># 133: Trouver des images réactives - 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="/8004186-143-using-and-caching-third-party-json-with-wordpress" title="N ° 143: Utilisation et mise en cache de JSON tiers avec WordPress - Astuces CSS" rel="bookmark">N ° 143: Utilisation et mise en cache de JSON tiers avec WordPress - 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="/8004187-144-building-a-javascriptcanvas-game-with-kyle-simpson" title="# 144: Construire un jeu JavaScript / Canvas avec Kyle Simpson - Astuces CSS" rel="bookmark"># 144: Construire un jeu JavaScript / Canvas avec Kyle Simpson - 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="/8004188-145-wordpress-child-themes-with-lara-schenck" title="# 145: Thèmes enfants WordPress avec Lara Schenck - Astuces CSS" rel="bookmark"># 145: Thèmes enfants WordPress avec Lara Schenck - 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="/8004189-146-getting-more-from-google-analytics-with-philip-walton" title="N ° 146: tirer le meilleur parti de Google Analytics avec Philip Walton - Astuces CSS" rel="bookmark">N ° 146: tirer le meilleur parti de Google Analytics avec Philip Walton - 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="/8004190-148-laying-things-out-html-and-flexbox-with-dee-gill" title="# 148: Laying Things Out (HTML et Flexbox) avec Dee Gill - Astuces CSS" rel="bookmark"># 148: Laying Things Out (HTML et Flexbox) avec Dee Gill - 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="/8004192-147-starting-a-react-powered-comment-form" title="# 147: Créer un formulaire de commentaire alimenté par React - Astuces CSS" rel="bookmark"># 147: Créer un formulaire de commentaire alimenté par React - 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="/8004193-149-a-quick-intro-to-pattern-lab-node-with-brian-muenzenmeyer" title="# 149: Introduction rapide au Pattern Lab Node avec Brian Muenzenmeyer - Astuces CSS" rel="bookmark"># 149: Introduction rapide au Pattern Lab Node avec Brian Muenzenmeyer - 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="/8226486-workflow-in-informatica-create-task-parameter-reusable-manager" title="Flux de travail dans Informatica: création, tâche, paramètre, réutilisable, gestionnaire" rel="bookmark"><img src="https://cdn.css-code.org/3122950/workflow_in_informatica_create-_task-_parameter-_reusable-_manager.png.webp" loading="lazy" alt="Flux de travail dans Informatica: création, tâche, paramètre, réutilisable, gestionnaire" title="Flux de travail dans Informatica: création, tâche, paramètre, réutilisable, gestionnaire" 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="/8226486-workflow-in-informatica-create-task-parameter-reusable-manager" title="Flux de travail dans Informatica: création, tâche, paramètre, réutilisable, gestionnaire" rel="bookmark">Flux de travail dans Informatica: création, tâche, paramètre, réutilisable, gestionnaire 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="/8226487-informatica-transformations-tutorial-and-filter-transformation" title="Tutoriel sur les transformations INFORMATICA & Transformation de filtre" rel="bookmark"><img src="https://cdn.css-code.org/4926659/informatica_transformations_tutorial_ampamp_filter_transformation.png.webp" loading="lazy" alt="Tutoriel sur les transformations INFORMATICA & Transformation de filtre" title="Tutoriel sur les transformations INFORMATICA & Transformation de filtre" 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="/8226487-informatica-transformations-tutorial-and-filter-transformation" title="Tutoriel sur les transformations INFORMATICA & Transformation de filtre" rel="bookmark">Tutoriel sur les transformations INFORMATICA & Transformation de filtre 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="/8226488-session-properties-in-informatica-complete-tutorial" title="Propriétés de session dans Informatica: didacticiel complet" rel="bookmark"><img src="https://cdn.css-code.org/1480881/session_properties_in_informatica_complete_tutorial.png.webp" loading="lazy" alt="Propriétés de session dans Informatica: didacticiel complet" title="Propriétés de session dans Informatica: didacticiel complet" 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="/8226488-session-properties-in-informatica-complete-tutorial" title="Propriétés de session dans Informatica: didacticiel complet" rel="bookmark">Propriétés de session dans Informatica: didacticiel complet 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="/8224627-dbms-joins-inner-left-outer-theta-types-of-join-operations" title="Jointures de SGBD: types d'opérations de jointure interne, externe gauche, THETA" rel="bookmark">Jointures de SGBD: types d'opérations de jointure interne, externe gauche, THETA</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224630-file-system-vs-dbms-key-differences" title="Système de fichiers vs SGBD: différences clés" rel="bookmark">Système de fichiers vs SGBD: différences clés</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224631-sql-vs-nosql-whats-the-difference-between-sql-and-nosql" title="SQL vs NoSQL: quelle est la différence entre SQL et NoSQL" rel="bookmark">SQL vs NoSQL: quelle est la différence entre SQL et NoSQL</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224632-primary-key-vs-foreign-key-whats-the-difference" title="Clé primaire vs clé étrangère: quelle est la différence?" rel="bookmark">Clé primaire vs clé étrangère: quelle est la différence?</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8224633-clustered-vs-non-clustered-index-key-differences-with-example" title="Index en cluster ou non en cluster: différences clés avec l'exemple" rel="bookmark">Index en cluster ou non en cluster: différences clés avec l'exemple</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="/8223798-how-to-assign-materials-to-profit-center-in-sap" title="Comment affecter des articles au centre de profit dans SAP" rel="bookmark">Comment affecter des articles au centre de profit dans SAP</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223799-sap-crm-module-overview-architecture" title="Module SAP CRM: présentation, architecture" rel="bookmark">Module SAP CRM: présentation, architecture</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223801-sap-partner-channel-management-pcm" title="Gestion des canaux partenaires SAP (PCM)" rel="bookmark">Gestion des canaux partenaires SAP (PCM)</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223802-sap-crm-sales-process-management-quotation-and-product-determination" title="Processus de vente SAP CRM, gestion, devis & Détermination du produit" rel="bookmark">Processus de vente SAP CRM, gestion, devis & Détermination du produit</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223803-sap-crm-marketing-plan-campaign-management-and-automation-segmentation" title="Marketing SAP CRM: planification, gestion de campagne et amp; Segmentation d'automatisation" rel="bookmark">Marketing SAP CRM: planification, gestion de campagne et amp; Segmentation d'automatisation</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="/8225736-20-best-web-analytics-tools-to-track-your-website-performance" title="20 meilleurs outils d'analyse Web pour suivre les performances de votre site Web" rel="bookmark">20 meilleurs outils d'analyse Web pour suivre les performances de votre site Web</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225737-difference-between-domain-name-and-web-hosting" title="Différence entre le nom de domaine et l'hébergement Web" rel="bookmark">Différence entre le nom de domaine et l'hébergement Web</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225738-difference-between-blog-and-website" title="Différence entre blog et site Web" rel="bookmark">Différence entre blog et site Web</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225739-19-best-wordpress-hosting-providers-in-2021" title="19 MEILLEURS fournisseurs d'hébergement WordPress en 2021" rel="bookmark">19 MEILLEURS fournisseurs d'hébergement WordPress en 2021</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8225740-20-best-cms-content-management-system-in-2021" title="20+ meilleurs CMS (système de gestion de contenu) en 2021" rel="bookmark">20+ meilleurs CMS (système de gestion de contenu) en 2021</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright fr.css-code.org, 2025 Août | <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>