Introductie

API/XPath/CSS Cheatsheets zijn een essentiële bron geworden voor zowel professionals als liefhebbers van geautomatiseerde en handmatige tests. Of je nu een nieuwe vaardigheid leert of aan een project werkt, het kan ongelooflijk nuttig zijn om snel referentiemateriaal bij de hand te hebben.

Veel cheatsheets zijn beschikbaar als PDF-downloads, maar in de dagelijkse praktijk is het vaak handiger om direct code te kunnen kopiëren en plakken. Daarom heb ik een interactieve Google Sheets-versie gemaakt waarin alle belangrijke codes en selectors overzichtelijk zijn gedefinieerd.

Toegang tot de Google Sheets Cheatsheet: 🔗 API/XPath/CSS Cheatsheet - Google Sheets

Waarom deze Cheatsheet?

Voordelen van een Spreadsheet-formaat:

• Direct kopieerbaar: Selecteer en kopieer code zonder typing
• Zoekfunctie: Gebruik Ctrl+F om snel specifieke selectors te vinden
• Filteropties: Sorteer op categorie of complexiteit
• Bewerkbaar: Voeg je eigen voorbeelden toe
• Altijd up-to-date: Online versie wordt regelmatig bijgewerkt

Voor wie is dit nuttig?

• QA Engineers die snel selectors nodig hebben
• Test Automation Engineers die referentiemateriaal zoeken
• Developers die frontend testing implementeren
• Studenten die XPath en CSS selectors leren
• Teams die standaardisatie willen in hun selector gebruik

API Cheatsheet Overzicht

De API sectie bevat:

HTTP Methods

• GET: Data ophalen van server
• POST: Nieuwe data aanmaken
• PUT: Bestaande data volledig bijwerken
• PATCH: Gedeeltelijke updates
• DELETE: Data verwijderen

Response Codes

• 2xx: Succesvolle responses
• 4xx: Client errors
• 5xx: Server errors

API Testing Essentials

• Authentication headers
• Content-Type specificaties
• Request/Response body formats
• Error handling patterns

CSS/XPath Cheatsheet Overzicht

CSS Selectors Categorieën

Basis Selectors

/* Element selector */
div

/* Class selector */
.class-name

/* ID selector */
#element-id

/* Attribute selector */
[data-testid="button"]

Combinators

/* Descendant combinator */
div p

/* Child combinator */
div > p

/* Adjacent sibling */
div + p

/* General sibling */
div ~ p

Pseudo-classes

/* First child */
:first-child

/* Last child */
:last-child

/* Nth child */
:nth-child(2)

/* Not selector */
:not(.excluded)

XPath Expressions Categorieën

Basis XPath

// Absolute path
/html/body/div

// Relative path
//div[@class="container"]

// Text content
//button[text()="Submit"]

// Contains text
//span[contains(text(), "Welcome")]

XPath Axes

// Parent
//div/parent::section

// Following sibling
//input/following-sibling::label

// Preceding sibling
//label/preceding-sibling::input

// Ancestor
//span/ancestor::div

Advanced XPath Functions

// Position-based
//li[position()=1]

// Count elements
//div[count(child::*)=3]

// String functions
//input[starts-with(@id, "user")]
//button[ends-with(@class, "btn")]

Praktische Tips

Best Practices voor Selector Keuze

CSS Selectors - Wanneer gebruiken:

• Sneller in uitvoering
• Eenvoudigere syntax
• Goede browser ondersteuning
• Ideaal voor styling-gerelateerde elementen

XPath - Wanneer gebruiken:

• Complexe navigatie nodig
• Text-based selectie
• Parent/ancestor selectie
• Conditional logic in selectors

Performance Overwegingen

Snelle Selectors:

/* ID selectors (snelst) */
#unique-id

/* Class selectors */
.class-name

/* Attribute selectors */
[data-testid="element"]

Langzamere Selectors:

/* Descendant selectors met wildcards */
* > div > *

/* Complex pseudo-selectors */
:nth-child(odd):not(:first-child)

Uitbreidingsmogelijkheden

Gevraagde Toevoegingen

Heb je CSS of XPath selectors die ontbreken in de cheatsheet? Deel ze gerust zodat ze toegevoegd kunnen worden voor toekomstig gebruik:

Veel gevraagde categorieën:

• Shadow DOM selectors
• Modern CSS pseudo-classes (:has, :is, :where)
• XPath 3.0 functies
• Framework-specifieke selectors (React, Angular, Vue)
• Mobile-specifieke selectors

Community Bijdragen

De Google Sheets versie wordt regelmatig bijgewerkt op basis van:

• Community feedback
• Nieuwe web standards
• Framework updates
• Testing best practices

Hoe te Gebruiken

Dagelijks Gebruik

1. Bookmark de sheet voor snelle toegang
2. Gebruik de zoekfunctie (Ctrl+F) voor specifieke selectors
3. Kopieer direct zonder handmatig typen
4. Filter op categorie voor relevante selectors

Team Implementatie

1. Deel de link met je team
2. Maak een kopie voor team-specifieke aanpassingen
3. Gebruik als referentie tijdens code reviews
4. Integreer in onboarding van nieuwe teamleden

Conclusie

Deze interactieve cheatsheet biedt een praktische benadering voor het beheren van API, XPath en CSS referentiemateriaal. Door het spreadsheet-formaat kun je snel code kopiëren, zoeken en filteren, wat de dagelijkse workflow van test automatisering aanzienlijk verbetert.

De combinatie van visuele overzichten en direct kopieerbare code maakt het een waardevolle bron voor iedereen die werkt met web testing en automatisering.

Toegang tot de volledige cheatsheet: 📊 Google Sheets Cheatsheet

Heb je suggesties voor aanvullingen of verbeteringen? Deel je feedback zodat de cheatsheet nog nuttiger wordt voor de hele testing community.