how locate elements chrome
Dit is tutorial # 7 in onze Selenium Online Training Series. Als je alle Selenium-tutorials in deze serie wilt bekijken, kijk dan eens deze pagina
In de vorige tutorial hebben we geprobeerd licht te werpen op verschillende soorten locators in Selenium en hun locatiemechanismen om testscripts te bouwen. De tutorial was primair en bestond uit de korte introductie van verschillende locatortypen zoals ID, Klassen, Xpaths, Linkteksten CSS-kiezers enz. en hun identificatie.
Om verder te gaan met onze volgende tutorial, zouden we van de gelegenheid gebruik maken om u kennis te laten maken met een uitbreiding van lokaliseringsstrategieën. Dus in de volgende tutorial, we zouden het mechanisme bestuderen om webelementen op Google Chrome en Internet Explorer te lokaliseren.
Omdat we allemaal goed weten dat er een snelle groei is in het aantal internetgebruikers, bouwen belanghebbenden en programmeurs webapplicaties die waarschijnlijk op de meeste browsers werken.
Stel u dus een situatie voor waarin uw webtoepassing Firefox niet ondersteunt, maar goed werkt voor Chrome en Internet Explorer.
Hoe ga je nu zo'n applicatie automatiseren met Selenium? Of om specifiek te zijn, hoe gaat u webelementen vinden in Chrome en Internet Explorer. Dus het antwoord ligt in deze tutorial.
beste virusverwijdering voor Windows 10
Wat je leert:
Webelementen zoeken in Google Chrome
Laten we beginnen met het begrijpen van de lokalisatiestrategieën in Google Chrome.
Net als Firebug in Firefox heeft Google Chrome zijn eigen ontwikkelaarstool die kunnen worden gebruikt om webelementen op de webpagina te identificeren en te lokaliseren. In tegenstelling tot firebug hoeft een gebruiker geen afzonderlijke plug-in te downloaden of te installeren; de ontwikkelaarstool wordt direct gebundeld met Google Chrome.
Volg de onderstaande stappen om webelementen te vinden met de ontwikkelaarstool van Chrome:
Stap 1: De belangrijkste stap is het starten van de Google Chrome-ontwikkelaarstool. Druk op F12 om de tool te starten. De gebruiker zou zoiets als het onderstaande scherm kunnen zien.
Houd er rekening mee dat het tabblad 'Element' is gemarkeerd in de bovenstaande schermafbeelding. Het elemententabblad is dus het tabblad dat alle HTML-eigenschappen weergeeft die bij de huidige webpagina horen. Navigeer naar het tabblad 'Element' als dit niet standaard wordt geopend bij het starten.
U kunt de ontwikkelaarstool ook starten door met de rechtermuisknop ergens op de webpagina te klikken en door 'Element inspecteren' te selecteren, wat sterk lijkt op die van de inspectie van firebug.
Stap 2: De volgende stap is om het gewenste object op de webpagina te lokaliseren. Een manier om hetzelfde te doen, is door met de rechtermuisknop op het gewenste webelement te klikken en te inspecteren. De HTML-eigenschap die bij dat webelement hoort, wordt gemarkeerd in de ontwikkelaarstool. Een andere manier is om door de HTML-eigenschappen te zweven en het overeenkomende webelement wordt gemarkeerd. Op deze manier kan de gebruiker dus id's, klassen, links enz. Lokaliseren.
Een Xpath maken in Developer Tool
We hebben Xpaths al besproken in de vorige tutorial. We bespraken ook de creatiestrategie. Hier zouden we onze discussie baseren om de geldigheid van het gemaakte XPath in de ontwikkelaarstool van Chrome te controleren.
Stap 1: Open het consoletabblad om XPath in Developer Tool te maken.
Stap 2: Typ het gemaakte Xpath en plaats het tussen $ x ('// input (@ id =’ Email ’)')
Stap 3: Druk op de enter-toets om alle overeenkomende HTML-elementen met het opgegeven Xpath te zien. In ons geval is er maar één overeenkomend HTML-element. Plaats de muisaanwijzer op dat HTML-element en het bijbehorende webelement wordt gemarkeerd op de webpagina.
Op deze manier kunnen alle Xpaths worden aangemaakt en gecontroleerd op hun geldigheid binnen de console.
Informatie met betrekking tot CSS die overeenkomt met het webelement, is te vinden in de ontwikkelaarstool van Chrome. Raadpleeg de onderstaande schermafbeelding:
Webelementen zoeken in Internet Explorer
Net als Google Chrome, Internet Explorer heeft ook een eigen Developer Tool die kunnen worden gebruikt om webelementen te identificeren op basis van hun eigenschappen binnen de webpagina. De gebruiker hoeft geen afzonderlijke plug-in te downloaden of te installeren, de ontwikkelaarstool wordt direct gebundeld met Internet Explorer.
Volg de onderstaande stappen om webelementen te vinden met behulp van de IE Developer-tool:
Stap 1: De eerste stap is om de IE Developer-tool te starten. Druk op F12 om de tool te starten. De gebruiker zou zoiets als het onderstaande scherm kunnen zien.
Houd er rekening mee dat het tabblad 'HTML' is gemarkeerd in de bovenstaande schermafbeelding. Het HTML-tabblad is dus het tabblad dat alle HTML-eigenschappen weergeeft die bij de huidige webpagina horen. Vouw het tabblad HTML uit om de eigenschappen te bekijken van alle webelementen die bij de huidige webpagina horen.
Stap 2: De volgende stap is om het gewenste object op de webpagina te lokaliseren. Een manier om dit te doen is door het HTML-element te selecteren en het overeenkomende webelement zou worden gemarkeerd. Op deze manier kan de gebruiker dus id's, klassen, links enz. Vinden. Bekijk in de onderstaande schermafbeelding welke Email Textbox zou worden gemarkeerd zodra we de overeenkomstige HTML-eigenschap selecteren.
Een andere manier om het webelement te vinden, is door op de knop 'Zoeken' in het bovenste menu te klikken en door op het gewenste webelement op de webpagina te klikken. Als resultaat zouden de overeenkomstige HTML-eigenschappen worden gemarkeerd.
Door de ontwikkelaarstool te gebruiken, kan een gebruiker dus id's, klassen en tagnamen vinden en Xpaths maken om webelementen te lokaliseren.
Net als de ontwikkelaarstool van Chrome heeft de IE-ontwikkelaarstool een apart gedeelte met CSS-gerelateerde informatie. Bekijk de onderstaande schermafbeelding.
Gevolgtrekking
In deze tutorial hebben we licht geworpen op de basiselementen voor het lokaliseren van strategieën met behulp van de ontwikkelaarstool voor Google Chrome en Internet Explorer.
Volgende tutorial # 8 Als we verder gaan met onze volgende tutorial, willen we u graag kennis laten maken met een meer geavanceerde tool genaamd WebDriver. WebDriver is een van de meest aantrekkelijke testtools voor automatisering. Dus onze volgende tutorial en verder, we zouden onze discussies rond WebDriver en al zijn details leiden en baseren.
Aanbevolen literatuur
- Controleer de zichtbaarheid van webelementen met behulp van verschillende typen WebDriver-opdrachten - Selenium Tutorial # 14
- Inleiding tot Selenium WebDriver - Selenium Tutorial # 8
- CSS Selector gebruiken voor het identificeren van webelementen voor Selenium-scripts - Selenium-zelfstudie # 6
- Efficiënte Selenium-scripts en scenario's voor probleemoplossing - Selenium-zelfstudie # 27
- Selenium-scripts debuggen met logboeken (Log4j-zelfstudie) - Selenium-zelfstudie # 26
- 30+ beste selenium-zelfstudies: leer selenium met echte voorbeelden
- Cucumber Selenium Tutorial: Cucumber Java Selenium WebDriver Integration
- Gebruik van Selenium Selecteer klasse voor het omgaan met vervolgkeuzelijsten op een webpagina - Selenium-zelfstudie # 13