Dynamische elementen begrijpen: een handleiding voor het beheren van pop-ups in de DOM: door Jeffrey Jongkees

Een van mijn medewerkers, Jeffrey Jongkees, schreef een mooi artikel waar ik erg trots op ben over dynamische elementen en het ophalen van DOM voor Testautomation. Als senior tester vind ik het persoonlijk verplicht om te begrijpen hoe je die elementen kunt ophalen, organiseren en vergaren in css en xpath, waarbij het shadow dom is, dynamisch in elke taal. Natuurlijk kunnen tools worden gebruikt om je hierbij te helpen, dus AI kan je nog beter ondersteunen, maar je moet wel over basis- tot geavanceerde kennis beschikken om de professional te worden die je wilt zijn. Veel leesplezier!

Wist u dat dynamische elementen zoals pop-ups een cruciale rol spelen bij het verbeteren van de gebruikersinteractie? Het beheren van deze elementen, met name om ervoor te zorgen dat ze correct worden weergegeven en verwijderd in het Document Object Model (DOM), kan bij testautomatisering echter een beetje lastig zijn. In deze blogpost onderzoeken we hoe je pop-ups effectief kunt beheren, de zichtbaarheid van elementen/selectors erin kunt waarborgen en breekpunten in de DOM kunt gebruiken om ermee te communiceren.

Wat zijn dynamische elementen?

Dynamische elementen zijn onderdelen van een webpagina die kunnen veranderen of verschijnen/verdwijnen nadat de pagina is geladen, zonder dat de pagina opnieuw hoeft te worden geladen. Een bekend voorbeeld is een pop-up die verschijnt wanneer u op een knop klikt en verdwijnt wanneer u de knop sluit.

Pop-ups beheren in de DOM

Wanneer een pop-up op het scherm verschijnt, wordt deze toegevoegd aan de DOM, waardoor deze deel uitmaakt van de structuur van de webpagina. Omgekeerd, wanneer de pop-up wordt gesloten, moet deze uit de DOM worden verwijderd of „niet meer worden weergegeven”. Dit zorgt ervoor dat de webpagina schoon blijft en geen onnodige elementen bevat die de prestaties kunnen vertragen of de interactie met de gebruiker kunnen verstoren.

Waarborging van de zichtbaarheid van elementen in pop-ups

Om ervoor te zorgen dat de elementen of selectors in een pop-up zichtbaar en interactief zijn, kan de testingenieur tijdens de testautomatisering gebruik maken van breekpunten. Een breekpunt is een hulpmiddel waarmee u de uitvoering van uw code op een specifiek punt kunt onderbreken. Dit kan ongelooflijk handig zijn voor het debuggen van problemen met dynamische elementen.

Een breekpunt toevoegen in de DOM

Hier is een eenvoudige handleiding om een breekpunt toe te voegen om de zichtbaarheid van elementen/selectors in een pop-up te garanderen:

1. Open de ontwikkelaarstools van uw webbrowser (meestal door met de rechtermuisknop op de pagina te klikken en „Inspect” te selecteren of door op F12 of Ctrl+Shift+I op uw toetsenbord te drukken).
2. Navigeer naar het tabblad „Elementen” om de DOM te bekijken.
3. Zoek het element dat de pop-up activeert. Dit kan een knop of een link zijn.
4. Klik met de rechtermuisknop op het element in de DOM en selecteer „Break on” > „Subtree modificaties”.

Hiermee wordt de uitvoering onderbroken wanneer de pop-up op het punt staat te worden weergegeven. Zorg ervoor dat de pop-up wordt weergegeven, anders zijn de selectors niet zichtbaar. In dit specifieke geval gaat het om het verwijderen van een account in Salesforce.

Een breekpunt verwijderen

Om een breekpunt te verwijderen:

1. Ga naar het tabblad ‘Bronnen’ in je ontwikkelaarstools.
2. Je ziet een paneel aan de rechterkant met tabbladen zoals „Watch”, „Breakpoints”, „" Scope “” en „” Call Stack “”.”
3. Onder het tabblad „DOM-breekpunten” vindt u een lijst met alle actieve breekpunten.
4. Klik gewoon op het selectievakje naast het breekpunt of klik met de rechtermuisknop als u het breekpunt wilt verwijderen.

Navigeren op het tabblad Bronnen

Wanneer u op het tabblad ‘Bronnen’ werkt, is het belangrijk om de panelen effectief te beheren:

• Kijk: hiermee kunt u de waarden van specifieke variabelen controleren.
• Breekpunten: laat zien waar je breekpunten hebt ingesteld in de code.
• Bereik: geeft lokale, sluitings- en globale variabelen weer die relevant zijn voor het huidige breekpunt.
• Call Stack: toont het pad dat je code heeft afgelegd om het breekpunt te bereiken.
• XHR/Fetch Breakpoints: hiermee kunt u de uitvoering onderbreken wanneer bepaalde netwerkaanvragen worden gedaan. Zorg ervoor dat deze panelen goed georganiseerd en ingesloten zijn, zodat u gemakkelijk tussen de panelen en de DOM-breekpunten kunt navigeren.

Conclusie

Tijdens de testautomatisering kan het beheer van dynamische elementen zoals pop-ups in de DOM eenvoudig zijn met de juiste tools en technieken. Door breekpunten effectief te gebruiken, kunt u zorgen voor de zichtbaarheid en de juiste interactie van deze elementen/selectors. Vergeet niet om breekpunten op te ruimen wanneer ze niet langer nodig zijn.