Selenium IDE gebruiken met scripts & Commando's (bevestigen, verifiëren)

Inhoudsopgave:

Anonim

We zullen de website van Mercury Tours gebruiken als onze te testen webapplicatie. Het is een online vluchtreserveringssysteem dat alle elementen bevat die we nodig hebben voor deze tutorial. De URL is http://demo.guru99.com/test/newtours/, en dit zal onze basis-URL zijn.

Maak een script door op te nemen

Laten we nu ons eerste testscript maken in Selenium IDE met behulp van de meest gebruikelijke methode - door op te nemen. Daarna zullen we ons script uitvoeren met behulp van de afspeelfunctie.

Stap 1

  • Start Firefox en Selenium IDE.
  • Typ de waarde voor onze basis-URL: http://demo.guru99.com/test/newtours/.
  • Schakel de opnameknop in (als deze nog niet standaard is ingeschakeld).
Stap 2

Navigeer in Firefox naar http://demo.guru99.com/test/newtours/. Firefox zou u naar de pagina moeten leiden die lijkt op de pagina die hieronder wordt weergegeven.

Stap 3
  • Klik met de rechtermuisknop op een lege ruimte op de pagina, zoals op het Mercury Tours-logo in de linkerbovenhoek. Dit zal het Selenium IDE-contextmenu openen. Opmerking: klik niet op objecten of afbeeldingen met hyperlinks
  • Selecteer de optie "Beschikbare opdrachten weergeven".
  • Selecteer vervolgens "assertTitle exact: Welcome: Mercury Tours." Dit is een commando dat ervoor zorgt dat de paginatitel correct is.
Stap 4
  • Typ in het tekstvak "Gebruikersnaam" van Mercury Tours een ongeldige gebruikersnaam, "invalidUNN".
  • Typ in het tekstvak "Wachtwoord" een ongeldig wachtwoord, "invalidPWD".
Stap 5
  • Klik op de knop "Aanmelden". Firefox zou u naar deze pagina moeten leiden.
Stap 6

Schakel de opnameknop uit om de opname te stoppen. Uw script zou er nu moeten uitzien zoals hieronder weergegeven.

Stap 7

Nu we klaar zijn met ons testscript, zullen we het opslaan in een testcase. Selecteer in het menu Bestand de optie "Testcase opslaan". U kunt ook gewoon op Ctrl + S drukken.

Stap 8
  • Kies de gewenste locatie en noem de testcase "Invalid_login".
  • Klik op de knop "Opslaan".
Stap 9.

Merk op dat het bestand is opgeslagen als HTML.

Stap 10.

Ga terug naar Selenium IDE en klik op de afspeelknop om het hele script uit te voeren. Selenium IDE zou alles feilloos moeten kunnen repliceren.

Inleiding tot Selenium-opdrachten - Selenese

  • Selenese commando's kunnen maximaal twee parameters hebben: doel en waarde.
  • Parameters zijn niet altijd vereist. Het hangt ervan af hoeveel de opdracht nodig heeft.

3 soorten opdrachten

Acties

Dit zijn opdrachten die rechtstreeks communiceren met pagina-elementen.

Voorbeeld: het "klik" -commando is een actie omdat u rechtstreeks interactie heeft met het element waarop u klikt.

Het "type" -commando is ook een actie omdat u waarden in een tekstvak plaatst, en het tekstvak toont ze u in ruil. Er is een wederzijdse interactie tussen u en het tekstvak.

Accessors

Het zijn opdrachten waarmee u waarden in een variabele kunt opslaan.

Voorbeeld: het "storeTitle" -commando is een accessor omdat het alleen de paginatitel "leest" en deze in een variabele opslaat. Het heeft geen interactie met enig element op de pagina.

Beweringen

Het zijn commando's die controleren of aan een bepaalde voorwaarde is voldaan.

3 soorten beweringen

  • Beweren . Als een "assert" -commando mislukt, wordt de test onmiddellijk gestopt.
  • Verifieer . Wanneer een "verifieer" -opdracht mislukt, registreert Selenium IDE deze fout en gaat verder met de testuitvoering.
  • Wacht op . Alvorens verder te gaan met het volgende commando, zullen "waitFor" -commando's eerst wachten tot een bepaalde voorwaarde vervuld wordt.
    • Als de toestand binnen de wachttijd waar wordt, gaat de stap voorbij.
    • Als de voorwaarde niet waar wordt, mislukt de stap. De fout wordt gelogd en de uitvoering van de test gaat verder met de volgende opdracht.
    • Standaard is de time-outwaarde ingesteld op 30 seconden. U kunt dit wijzigen in het dialoogvenster Selenium IDE-opties op het tabblad Algemeen.

Beweren versus verifiëren

Gemeenschappelijke opdrachten

Opdracht Aantal parameters Omschrijving
Open 0 - 2

Opent een pagina met een URL.

klik / clickAndWait 1

Klikt op een bepaald element.

type / typeKeys 2

Typt een reeks tekens.

verifiërenTitle / assertTitle 1

Vergelijkt de werkelijke paginatitel met een verwachte waarde.

verifieerTextPresent 1

Controleert of een bepaalde tekst op de pagina wordt gevonden.

verifieerElementPresent 1

Controleert de aanwezigheid van een bepaald element.

verifieerTable 2

Vergelijkt de inhoud van een tabel met verwachte waarden.

waitForPageToLoad 1

Onderbreekt de uitvoering totdat de pagina volledig is geladen.

waitForElementPresent 1

Onderbreekt de uitvoering totdat het opgegeven element aanwezig wordt.

Maak handmatig een script met Firebug

Nu zullen we dezelfde testcase handmatig opnieuw creëren door de commando's in te typen. Deze keer zullen we Firebug moeten gebruiken.

Stap 1
  • Open Firefox en Selenium IDE.
  • Typ de basis-URL (http://demo.guru99.com/test/newtours/).
  • De opnameknop moet UIT staan.
Stap 2: Klik op de bovenste lege regel in de Editor.

Typ "open" in het tekstvak Command en druk op Enter.

Stap 3
  • Navigeer Firefox naar onze basis-URL en activeer Firebug
  • Selecteer in het paneel Selenium IDE Editor de tweede regel (de regel onder het "open" -commando) en maak het tweede commando door "assertTitle" in het Commando-veld te typen.
  • Voel je vrij om de functie voor automatisch aanvullen te gebruiken.
Stap 4
  • Vouw in Firebug de tag uit om de tag weer te geven.</li> <li>Klik op de waarde van de <title> -tag (die "Welcome: Mercury Tours" is) en plak deze in het Target-veld in de Editor.</li> </ul> </td> </tr> <tr> <td><strong>Stap 5</strong> <ul> <li>Om de derde opdracht te maken, klikt u op de derde lege regel in de Editor en toetst u "type" in het tekstvak Opdracht in.</li> <li>Klik in Firebug op de knop "Inspecteren".</li> </ul> </td> </tr> <tr> <td>Klik op het tekstvak Gebruikersnaam. Merk op dat Firebug u automatisch de HTML-code voor dat element laat zien.</td> </tr> <tr> <td><strong>Stap 6</strong> <p>Merk op dat het tekstvak Gebruikersnaam geen ID heeft, maar het kenmerk NAME. We zullen daarom zijn NAAM gebruiken als locator. Kopieer de NAME-waarde en plak deze in het Target-veld in Selenium IDE.</p> <p>Plaats, nog steeds in het tekstvak Doel, voorvoegsel "gebruikersnaam" met "naam =", wat aangeeft dat Selenium IDE een element moet targeten waarvan het kenmerk NAME "gebruikersnaam" is.</p> <p>Typ "invalidUN" in het tekstvak Waarde van Selenium IDE. Uw testscript zou er nu uit moeten zien als de onderstaande afbeelding. We zijn klaar met het derde commando. Opmerking: in plaats van invalidUN mag u een andere tekstreeks invoeren. Maar Selenium IDE is hoofdlettergevoelig en u typt waarden / attributen precies zoals in de applicatie.</p> </td> </tr> <tr> <td><strong>Stap 7</strong> <ul> <li>Om de vierde opdracht te maken, toetst u "type" in het tekstvak Opdracht in.</li> <li>Gebruik opnieuw Firebug's "Inspect" -knop om de locator voor het "Password" -tekstvak te krijgen.</li> </ul> <ul> <li> <p>Plak het NAME-attribuut ("wachtwoord") in het Doel-veld en voeg "name =" eraan toe</p> </li> <li> <p>Typ "invalidPW" in het veld Waarde in Selenium IDE. Uw testscript zou er nu uit moeten zien als de onderstaande afbeelding.</p> </li> </ul> </td> </tr> <tr> <td><strong>Stap 8</strong> <ul> <li>Typ voor het vijfde commando "clickAndWait" in het Commando-tekstvak in Selenium IDE.</li> <li>Gebruik Firebug's "Inspect" -knop om de locator voor de "Sign In" -knop te krijgen.</li> </ul> <ul> <li>Plak de waarde van het NAME-attribuut ("login") in het Target-tekstvak en voeg "name =" eraan toe.</li> <li>Uw testscript zou er nu uit moeten zien als de onderstaande afbeelding.</li> </ul> </td> </tr> </tbody> </table> <p><strong>Stap 9:</strong> Sla de testcase op dezelfde manier op als in de vorige sectie.</p> <a id="menu-6"></a> <h2>Met behulp van de zoekknop</h2> <p><strong>De knop Zoeken in Selenium IDE wordt gebruikt om te controleren of wat we in het tekstvak Doel hadden gezet inderdaad het juiste UI-element is.</strong></p> <p>Laten we de Invalid_login-testcase gebruiken die we in de vorige secties hebben gemaakt. Klik op een commando met een doelinvoer, bijvoorbeeld het derde commando.</p> <p>Klik op de knop Zoeken. Merk op dat het tekstvak Gebruikersnaam op de Mercury Tours-pagina even wordt gemarkeerd.</p> <p>Dit geeft aan dat Selenium IDE het verwachte element correct kon detecteren en openen. Als de knop Zoeken een ander element of helemaal geen element heeft gemarkeerd, moet er iets mis zijn met uw script.</p> <a id="menu-7"></a> <h2>Voer het commando uit</h2> <p><strong>Hiermee kunt u een enkele opdracht uitvoeren zonder de hele testcase uit te voeren</strong> . Klik gewoon op de regel die u wilt uitvoeren en klik vervolgens op "Acties> Voer dit commando uit" in de menubalk of druk gewoon op "X" op uw toetsenbord.</p> <p><strong>Stap 1.</strong> Zorg ervoor dat uw browser op de startpagina van Mercury Tours staat. Klik op het commando dat u wilt uitvoeren. Klik in dit voorbeeld op de regel "type | gebruikersnaam | invalidUN".</p> <p><strong>Stap 2.</strong> Druk op "X" op uw toetsenbord.</p> <p><strong>Stap 3.</strong> Merk op dat het tekstvak voor gebruikersnaam wordt gevuld met de tekst "invalidUN"</p> <p><strong>Het op deze manier uitvoeren van opdrachten is sterk afhankelijk van de pagina die Firefox momenteel weergeeft</strong> . Dit betekent dat als u het bovenstaande voorbeeld probeert met de Google-startpagina weergegeven in plaats van Mercury Tours ', uw stap zal mislukken omdat er geen tekstvak met een "gebruikersnaam" -attribuut op de startpagina van Google staat.</p> <a id="menu-8"></a> <h2>Startpunt</h2> <p><strong>Een startpunt is een indicator die Selenium IDE vertelt welke regels de uitvoering zal starten</strong> . <strong>De sneltoets is "S".</strong></p> <p>In het bovenstaande voorbeeld begint het afspelen op de derde regel (typ | wachtwoord | invalidPW). <strong>U kunt slechts één startpunt hebben in een enkel testscript.</strong></p> <p>Het startpunt is vergelijkbaar met Commando uitvoeren in die zin dat ze afhankelijk zijn van de momenteel weergegeven pagina. Het startpunt mislukt als u zich op de verkeerde pagina bevindt.</p> <a id="menu-9"></a> <h2>Breekpunten</h2> <p>Breekpunten zijn indicatoren die Selenium IDE vertellen waar de test automatisch moet worden onderbroken. <strong>De sneltoets is "B".</strong></p> <p>De gele markering betekent dat de huidige stap in behandeling is. Dit bewijst dat Selenium IDE de uitvoering bij die stap heeft onderbroken. <strong>U kunt in één testcase meerdere breekpunten hebben.</strong></p> <a id="menu-10"></a> <h2>Stap</h2> <p>Hiermee kunt u opeenvolgende opdrachten een voor een uitvoeren na het pauzeren van de testcase. Laten we het scenario in de vorige sectie "Breekpunten" gebruiken.</p> <table> <tbody> <tr> <td width="50%"> </td> <td> <p><strong>Voordat u op "Stap" klikt.</strong></p> <p>De testcase pauzeert bij de regel "clickAndWait | login".</p> </td> </tr> <tr> <td width="50%"> </td> <td> <p><strong>Nadat u op "Stap" hebt geklikt.</strong></p> <p>De regel "clickAndWait | login" wordt uitgevoerd en pauzeert naar de volgende opdracht (verifyTitle | Sign-on: Mercury Tours).</p> <p>Merk op dat de volgende regel wordt gepauzeerd, ook al is daar geen onderbrekingspunt. Dit is het belangrijkste doel van de Step-functie - het voert de opeenvolgende opdrachten een voor een uit om u meer tijd te geven om het resultaat na elke stap te inspecteren.</p> </td> </tr> </tbody> </table> <a id="menu-11"></a> <h2>Belangrijke zaken om op te letten bij het gebruik van andere indelingen in de bronweergave</h2> <p><strong>Selenium IDE werkt alleen goed met HTML - andere formaten bevinden zich nog in de experimentele modus</strong> . Het is <strong>NIET aan</strong> te <strong>raden</strong> om tests te maken of te bewerken met andere formaten in Source View, omdat er nog veel werk nodig is om het stabiel te maken. Hieronder staan ​​de bekende bugs vanaf versie 1.9.1.</p> <ul> <li>U kunt niet afspelen of terugschakelen naar de tabelweergave, tenzij u terugkeert naar HTML.</li> <li>De enige manier om commando's veilig aan de broncode toe te voegen, is door ze op te nemen.</li> <li>Wanneer u de broncode handmatig wijzigt, gaat alles verloren wanneer u naar een ander formaat overschakelt.</li> <li>Hoewel u uw testcase kunt opslaan in Source View, kan Selenium IDE deze niet openen.</li> </ul> <p><strong>De aanbevolen manier om Selenese-tests te converteren, is door de optie "Testcase exporteren als ..." onder het menu Bestand te gebruiken, en niet via de Bronweergave.</strong></p> <a id="menu-12"></a> <h2>Overzicht</h2> <ul> <li>Testscripts kunnen worden gemaakt door de opdrachten en parameters handmatig op te nemen of te typen.</li> <li>Bij het handmatig aanmaken van scripts wordt Firebug gebruikt om de locator op te halen.</li> <li>De knop Zoeken wordt gebruikt om te controleren of de opdracht toegang heeft tot het juiste element.</li> <li>Tabelweergave geeft een testscript in tabelvorm weer, terwijl Bronweergave het in HTML-indeling weergeeft.</li> <li>Het wijzigen van de bronweergave naar een niet-HTML-indeling is nog experimenteel.</li> <li>Gebruik de bronweergave niet om tests in andere indelingen te maken. Gebruik in plaats daarvan de exportfuncties.</li> <li>Parameters zijn niet altijd vereist. Het hangt af van het bevel.</li> <li>Er zijn drie soorten opdrachten:</li> <ul> <li>Acties - heeft directe interactie met pagina-elementen</li> <li>Accessors - "leest" een elementeigenschap en slaat deze op in een variabele</li> <li>Beweringen - vergelijkt een werkelijke waarde met een verwachte waarde</li> </ul> <li>Beweringen zijn er in drie soorten:</li> <ul> <li>Beweren - bij een mislukking worden de volgende stappen niet langer uitgevoerd</li> <li>Controleer - bij een fout worden de volgende stappen nog steeds uitgevoerd.</li> <li>WaitFor - gaat door als de opgegeven voorwaarde binnen de time-outperiode waar wordt; anders zal het mislukken</li> </ul> <li>De meest voorkomende commando's zijn:</li> <ul> <li>Open</li> <li>klik / clickAndWait</li> <li>type / typeKeys</li> <li>verifiërenTitle / assertTitle</li> <li>verifieerTextPresent</li> <li>verifieerElementPresent</li> <li>verifieerTable</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">Populaire Berichten</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="/8223823-fb60-in-sap-how-to-post-a-purchase-invoice" title="FB60 in SAP: een inkoopfactuur boeken" rel="bookmark"><img src="https://cdn.css-code.org/3273345/fb60_in_sap_how_to_post_a_purchase_invoice.png.webp" loading="lazy" alt="FB60 in SAP: een inkoopfactuur boeken" title="FB60 in SAP: een inkoopfactuur boeken" 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="/8223823-fb60-in-sap-how-to-post-a-purchase-invoice" title="FB60 in SAP: een inkoopfactuur boeken" rel="bookmark">FB60 in SAP: een inkoopfactuur boeken 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="/8223824-how-to-create-a-company-in-sap" title="Hoe een bedrijf in SAP te creëren" rel="bookmark"><img src="https://cdn.css-code.org/7456153/how_to_create_a_company_in_sap.png.webp" loading="lazy" alt="Hoe een bedrijf in SAP te creëren" title="Hoe een bedrijf in SAP te creëren" 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="/8223824-how-to-create-a-company-in-sap" title="Hoe een bedrijf in SAP te creëren" rel="bookmark">Hoe een bedrijf in SAP te creëren 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="/8223825-24-best-business-intelligencebi-tools-list-in-2021" title="Lijst met 24 beste Business Intelligence (BI) -tools in 2021" rel="bookmark"><img src="https://cdn.css-code.org/8084461/24_best_business_intelligencebi_tools_list_in_2021.png.webp" loading="lazy" alt="Lijst met 24 beste Business Intelligence (BI) -tools in 2021" title="Lijst met 24 beste Business Intelligence (BI) -tools in 2021" 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="/8223825-24-best-business-intelligencebi-tools-list-in-2021" title="Lijst met 24 beste Business Intelligence (BI) -tools in 2021" rel="bookmark">Lijst met 24 beste Business Intelligence (BI) -tools in 2021 2025</a></h3> </div> </div> </li> </ul> </div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Beste beoordelingen voor de maand</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="/8004047-shape-morphing-icons-in-button-on-click" title="Vorm Morphing-pictogrammen in Button on Click - CSS-trucs" rel="bookmark">Vorm Morphing-pictogrammen in Button on Click - CSS-trucs</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="/8004048-svg-patterns" title="SVG-patronen - CSS-trucs" rel="bookmark">SVG-patronen - CSS-trucs</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="/8004049-add-category-name-to-body-class" title="Voeg categorienaam toe aan body_class - CSS-trucs" rel="bookmark">Voeg categorienaam toe aan body_class - CSS-trucs</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="/8004050-curved-text-along-a-path" title="Gebogen tekst langs een pad - CSS-trucs" rel="bookmark">Gebogen tekst langs een pad - CSS-trucs</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="/8004051-adobe-illustrator-export-options" title="Exportopties voor Adobe Illustrator - CSS-trucs" rel="bookmark">Exportopties voor Adobe Illustrator - CSS-trucs</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="/8004052-addremove-contact-info-fields" title="Velden voor contactgegevens toevoegen / verwijderen - CSS-trucs" rel="bookmark">Velden voor contactgegevens toevoegen / verwijderen - CSS-trucs</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="/8004053-add-class-to-links-generated-by-next-posts-link-and-previous-posts-link" title="Klasse toevoegen aan links gegenereerd door next_posts_link en previous_posts_link - CSS-trucs" rel="bookmark">Klasse toevoegen aan links gegenereerd door next_posts_link en previous_posts_link - CSS-trucs</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="/8004054-text-lock-up" title="Tekstvergrendeling - CSS-trucs" rel="bookmark">Tekstvergrendeling - CSS-trucs</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="/8004055-svg-knockout-text" title="SVG knock-out tekst - CSS-trucs" rel="bookmark">SVG knock-out tekst - CSS-trucs</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="/8004057-base-threaded-comments-styling" title="Base Threaded Opmerkingen Styling - CSS-trucs" rel="bookmark">Base Threaded Opmerkingen Styling - CSS-trucs</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="/8004058-automatic-social-media-links" title="Automatische links naar sociale media - CSS-trucs" rel="bookmark">Automatische links naar sociale media - CSS-trucs</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="/8004059-apply-custom-css-to-admin-area" title="Pas aangepaste CSS toe op het beheerdersgebied - CSS-trucs" rel="bookmark">Pas aangepaste CSS toe op het beheerdersgebied - CSS-trucs</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="/8004060-change-avatar-size" title="Avatargrootte wijzigen - CSS-trucs" rel="bookmark">Avatargrootte wijzigen - CSS-trucs</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="/8004061-allow-svg-through-wordpress-media-uploader" title="SVG toestaan ​​via WordPress Media Uploader - CSS-trucs" rel="bookmark">SVG toestaan ​​via WordPress Media Uploader - CSS-trucs</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="/8004062-bloginfo-shortcode" title="Shortcode voor Bloginfo - CSS-trucs" rel="bookmark">Shortcode voor Bloginfo - CSS-trucs</a></h3> </div> </div> </li> </ul> </div> <div id="container-5533149ee6411a5f99b370c693e87966"></div> <div class="widget widget-popular-posts"> <h2 class="widget-title">Top Artikelen</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="/8226146-top-18-r-programming-interview-questions-and-answers" title="Top 18 sollicitatievragen voor R-programmering & Antwoorden" rel="bookmark"><img src="https://cdn.css-code.org/3231547/top_18_r_programming_interview_questions_ampamp_answers.jpg.webp" loading="lazy" alt="Top 18 sollicitatievragen voor R-programmering & Antwoorden" title="Top 18 sollicitatievragen voor R-programmering & Antwoorden" 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="/8226146-top-18-r-programming-interview-questions-and-answers" title="Top 18 sollicitatievragen voor R-programmering & Antwoorden" rel="bookmark">Top 18 sollicitatievragen voor R-programmering & Antwoorden 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="/8226147-best-laptop-for-hacking-in-2021" title="BESTE laptop voor hacken in 2021" rel="bookmark"><img src="https://cdn.css-code.org/2844098/best_laptop_for_hacking_in_2021.jpg.webp" loading="lazy" alt="BESTE laptop voor hacken in 2021" title="BESTE laptop voor hacken in 2021" 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="/8226147-best-laptop-for-hacking-in-2021" title="BESTE laptop voor hacken in 2021" rel="bookmark">BESTE laptop voor hacken in 2021 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="/8226148-11-best-free-keyword-research-tools-in-2021" title="11 BESTE gratis hulpprogramma's voor trefwoordonderzoek in 2021" rel="bookmark"><img src="https://cdn.css-code.org/3439147/11_best_free_keyword_research_tools_in_2021.png.webp" loading="lazy" alt="11 BESTE gratis hulpprogramma's voor trefwoordonderzoek in 2021" title="11 BESTE gratis hulpprogramma's voor trefwoordonderzoek in 2021" 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="/8226148-11-best-free-keyword-research-tools-in-2021" title="11 BESTE gratis hulpprogramma's voor trefwoordonderzoek in 2021" rel="bookmark">11 BESTE gratis hulpprogramma's voor trefwoordonderzoek in 2021 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">Populaire Berichten</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223890-how-to-define-field-status-variant-and-field-status-group-in-sap" title="Hoe u veldstatusvariant definieert & Veldstatusgroep in SAP" rel="bookmark">Hoe u veldstatusvariant definieert & Veldstatusgroep in SAP</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223891-gl-document-tutorial-park-hold-posting-with-refrence-in-sap" title="Zelfstudie grootboekdocumenten: parkeren, vasthouden, boeken met referentie in SAP" rel="bookmark">Zelfstudie grootboekdocumenten: parkeren, vasthouden, boeken met referentie in SAP</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223892-fb02-in-sap-change-customer-documents-tutorial" title="FB02 in SAP: zelfstudie klantdocumenten wijzigen" rel="bookmark">FB02 in SAP: zelfstudie klantdocumenten wijzigen</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223894-how-to-create-customer-account-group-in-sap" title="Hoe een klantaccountgroep in SAP te maken" rel="bookmark">Hoe een klantaccountgroep in SAP te maken</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8223895-customer-master-data-tutorial-create-display-block-delete-in-sap" title="Zelfstudie klantstamgegevens: creëren, weergeven, blokkeren, verwijderen in SAP" rel="bookmark">Zelfstudie klantstamgegevens: creëren, weergeven, blokkeren, verwijderen in SAP</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Editor'S Choice</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003604-truncate-string-with-ellipsis" title="Tekenreeks afkappen met ellips - CSS-trucs" rel="bookmark">Tekenreeks afkappen met ellips - CSS-trucs</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003605-two-color-three-dimensional-blocks-and-text" title="Tweekleurige driedimensionale blokken en tekst - CSS-trucs" rel="bookmark">Tweekleurige driedimensionale blokken en tekst - CSS-trucs</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003606-unordered-list-as-a-timeline" title="Ongeordende lijst als tijdlijn - CSS-trucs" rel="bookmark">Ongeordende lijst als tijdlijn - CSS-trucs</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003607-useful-css3-less-mixins" title="Handige CSS3 LESS Mixins - CSS-trucs" rel="bookmark">Handige CSS3 LESS Mixins - CSS-trucs</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003608-turn-off-number-input-spinners" title="Schakel nummerinvoerspinners uit - CSS-trucs" rel="bookmark">Schakel nummerinvoerspinners uit - CSS-trucs</a></h3> </div> </div> </li> </ul> </div> </div> <div class="col-lg-4"> <div class="widget"> <h2 class="widget-title">Top Artikelen</h2> <ul class="post-list-small"> <li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003814-disable-re-enable-inputs" title="Ingangen uitschakelen / opnieuw inschakelen - CSS-trucs" rel="bookmark">Ingangen uitschakelen / opnieuw inschakelen - CSS-trucs</a></h3> </div> </div> </li><li class="post-list-small__item"> <div> <div> <h3 class="post-list-small__entry-title"><a href="/8003815-display-browser-and-version" title="Browser en versie weergeven - CSS-trucs" rel="bookmark">Browser en versie weergeven - CSS-trucs</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="Nieuwste FeedBurner-bericht weergeven - CSS-trucs" rel="bookmark">Nieuwste FeedBurner-bericht weergeven - CSS-trucs</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="Alleen eerste X Div's weergeven, Toggle Rest - CSS-trucs" rel="bookmark">Alleen eerste X Div's weergeven, Toggle Rest - CSS-trucs</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="JQuery dubbele plug-in - CSS-trucs" rel="bookmark">JQuery dubbele plug-in - CSS-trucs</a></h3> </div> </div> </li> </ul> </div> </div> </div> <p>© Copyright nl.css-code.org, 2025 September | <a href="https://nl.css-code.org/about-site" title="Over site">Over site</a> | <a href="https://nl.css-code.org/contacts" title="Contacten">Contacten</a> | <a href="https://nl.css-code.org/privacy-policy" title="Privacybeleid">Privacybeleid</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>