Kenmerken referentie

Sofia Emelianova

Jecelyn Yeen

Ontdek manieren om gebruikersstromen te delen, deze en hun stappen te bewerken in deze uitgebreide referentie over de functies van het Chrome DevTools Recorder- paneel.

Zie Gebruikersstromen opnemen, opnieuw afspelen en meten voor meer informatie over de basisprincipes van het werken met het Recorder -paneel.

Sneltoetsen leren en aanpassen

Gebruik snelkoppelingen om sneller door de Recorder te navigeren. Zie Sneltoetsen op het recorderpaneel voor een lijst met standaardsneltoetsen.

Als u een hint wilt openen waarin alle snelkoppelingen rechtstreeks in de Recorder worden vermeld, klikt u op Help Snelkoppelingen weergeven in de rechterbovenhoek.

Recordersnelkoppelingen aanpassen:

1. Open Instellingen > Snelkoppelingen .
2. Blader omlaag naar het gedeelte Recorder .
3. Volg de stappen in Snelkoppelingen aanpassen.

Gebruikersstromen bewerken

Bovenaan het Recorder- paneel vindt u opties waarmee u het volgende kunt doen:

1. Voeg een nieuwe opname toe . Klik op het + icoon om een ​​nieuwe opname toe te voegen .
2. Bekijk alle opnames . De vervolgkeuzelijst toont de lijst met opgeslagen opnamen. Selecteer de optie N opname(s) om de lijst met opgeslagen opnames uit te breiden en te beheren.

3. Exporteer een opname . Als u het script verder wilt aanpassen of delen voor bugrapportagedoeleinden, kunt u de gebruikersstroom in een van de volgende indelingen exporteren:

   • JSON-bestand.
   • @puppeteer/replay- script.
   • Poppenspeler script.
   • Poppenspeler-script (voor Firefox) .
   • Poppenspeler (inclusief Lighthouse -analyse).

   Zie Een gebruikersstroom exporteren voor meer informatie over de indelingen.

4. Importeer een opname . Alleen in JSON-formaat.

5. Verwijder een opname . Verwijder de geselecteerde opname.

U kunt de naam van de opname ook bewerken door op de knop Bewerken te klikken ernaast.

Deel gebruikersstromen

U kunt gebruikersstromen exporteren en importeren in de Recorder. Dit is handig voor het rapporteren van bugs, omdat u een exact overzicht kunt delen van de stappen die een bug reproduceren. U kunt het ook exporteren en opnieuw afspelen met externe bibliotheken.

Exporteer een gebruikersstroom

Een gebruikersstroom exporteren:

1. Open de gebruikersstroom die u wilt exporteren.

2. Klik op Download Exporteren bovenaan het Recorder- paneel.

   

3. Selecteer een van de volgende formaten in de vervolgkeuzelijst:

   • JSON-bestand . Download de opname als JSON-bestand.
   • @poppenspeler/herhaling . Download de opname als een Puppeteer Replay- script.
   • Poppenspeler . Download de opname als poppenspelerscript .
   • Poppenspeler (voor Firefox) . Download de opname als een Puppeteer voor Firefox- script.
   • Poppenspeler (inclusief Lighthouse-analyse) . Download de opname als een poppenspelerscript met een ingebouwde Lighthouse -analyse.
   • Een of meer opties die worden geboden door de Export-extensies van de Recorder.

4. Sla het bestand op.

Met elke standaard exportoptie kunt u het volgende doen:

• JSON . Bewerk het voor mensen leesbare JSON-object en importeer het JSON-bestand terug naar de Recorder .
• @poppenspeler/herhaling . Speel het script opnieuw af met de Puppeteer Replay- bibliotheek. Bij het exporteren als @puppeteer/replay-script blijven de stappen een JSON-object. Deze optie is perfect als u wilt integreren met uw CI/CD-pijplijn, maar toch de flexibiliteit hebt om de stappen als JSON te bewerken, ze later te converteren en weer in de Recorder te importeren.
• Poppenspeler script . Speel het script opnieuw af met Puppeteer . Omdat de stappen worden omgezet in JavaScript, kunt u gedetailleerdere aanpassingen uitvoeren, bijvoorbeeld door de stappen in een lus te plaatsen. Eén waarschuwing: u kunt dit script niet terug importeren in de Recorder .
• Poppenspeler (voor Firefox) . Als onderdeel van WebDriver BiDi- ondersteuning kunt u dit Puppeteer-script zowel in Chrome als in Firefox uitvoeren.

• Poppenspeler (inclusief Lighthouse-analyse) . Deze exportoptie is hetzelfde als de vorige, maar bevat code die een Lighthouse -analyse genereert.

  Voer het script uit en bekijk de uitvoer in een flow.report.html -bestand:

  # npm i puppeteer lighthouse
  node your_export.js
  

  

Exporteer in een aangepast formaat door een extensie te installeren

Zie Recorderextensies .

Importeer een gebruikersstroom

Een gebruikersstroom importeren:

1. Klik op Importeren knop bovenaan het Recorderpaneel .
2. Selecteer het JSON-bestand met de opgenomen gebruikersstroom.
3. Klik op de Knop Opnieuw afspelen om de geïmporteerde gebruikersstroom uit te voeren.

Opnieuw afspelen met externe bibliotheken

The Puppeteer Replay is een open source-bibliotheek die wordt onderhouden door het Chrome DevTools-team. Het is gebouwd bovenop Puppeteer . Het is een opdrachtregelprogramma, u kunt er JSON-bestanden mee afspelen.

Afgezien daarvan kunt u JSON-bestanden transformeren en opnieuw afspelen met de volgende bibliotheken van derden.

Transformeer JSON-gebruikersstromen naar aangepaste scripts:

• Cypress Chrome-recorder . U kunt het gebruiken om JSON-bestanden van gebruikersstromen naar Cypress-testscripts te converteren. Bekijk deze demo om hem in actie te zien.
• Nachtwacht Chrome Recorder . U kunt het gebruiken om JSON-bestanden van gebruikersstromen naar Nightwatch-testscripts te converteren.
• CodeceptJS Chrome-recorder . U kunt het gebruiken om JSON-bestanden van gebruikersstromen naar CodeceptJS-testscripts te converteren.

JSON-gebruikersstromen opnieuw afspelen:

• Opnieuw afspelen met Testcafe . U kunt TestCafe gebruiken om JSON-bestanden van gebruikersstromen opnieuw af te spelen en testrapporten voor deze opnamen te genereren.
• Opnieuw spelen met Sauce Labs . U kunt de JSON-bestanden op Sauce Labs opnieuw afspelen met behulp van sausctl .

Belangrijk punt: Geavanceerd gebruiksscenario: Integreren met de Puppeteer Replay-bibliotheek Net als de bovenstaande bibliotheken van derden, kunt u ook uw eigen bibliotheek bovenop de Puppeteer Replay bouwen. De Puppeteer Replay-bibliotheek biedt manieren waarop u kunt aanpassen hoe een opname wordt uitgevoerd en de JSON-bestanden van de gebruikersstroom kunt "stringificeren" , dat wil zeggen, ze naar iets anders kunt converteren.

Foutopsporing in gebruikersstromen

Zoals bij elke code moet u soms fouten opsporen in de opgenomen gebruikersstromen.

Om u te helpen bij het opsporen van fouten, kunt u in het Recorder- paneel de herhalingen vertragen, breekpunten instellen, de uitvoering stapsgewijs doorlopen en code in verschillende formaten parallel met stappen inspecteren.

Vertraag de herhaling

Standaard herhaalt de Recorder de gebruikersstroom zo snel mogelijk. Om te begrijpen wat er in de opname gebeurt, kunt u de afspeelsnelheid vertragen:

1. Open de Vervolgkeuzemenu Opnieuw afspelen .
2. Kies een van de opties voor afspeelsnelheid:
   • Normaal (standaard)
   • Langzaam
   • Heel langzaam
   • Extreem langzaam

Belangrijk punt: u kunt deze opties voor langzaam afspelen alleen in de Recorder gebruiken. Zie Time-outs aanpassen voor stappen om time-outs aan de opname zelf toe te voegen.

Code inspecteren

De code van een gebruikersstroom in verschillende formaten inspecteren:

1. Open een opname in het Recorder- paneel.
2. Klik op Code weergeven in de rechterbovenhoek van de stappenlijst.
3. De Recorder toont een zij-aan-zij weergave van de stappen en hun code.
4. Terwijl u over een stap zweeft, markeert de Recorder de betreffende code in elk formaat, inclusief die van extensies .

5. Vouw de vervolgkeuzelijst Indeling uit om een ​​indeling te selecteren die u gebruikt om gebruikersstromen te exporteren .

   

   Het kan een van de drie standaardformaten zijn (JSON, @puppeteer/replay , Puppeteer-script of een formaat dat wordt geleverd door een extensie .

6. Ga verder met het debuggen van uw opname door stapparameters en -waarden te bewerken . De codeweergave kan niet worden bewerkt, maar wordt dienovereenkomstig bijgewerkt wanneer u wijzigingen aanbrengt in de stappen aan de linkerkant.

Stel breekpunten in en voer deze stap voor stap uit

Een breekpunt instellen en stap voor stap uitvoeren:

1. Beweeg over de cirkel naast een stap in een opname. De cirkel verandert in een breekpuntpictogram.
2. Klik op de breekpuntpictogram en speel de opname opnieuw af . De uitvoeringen pauzeren op het breekpunt.
3. Om de uitvoering te doorlopen, klikt u op de Voer één stapknop uit op de actiebalk bovenaan het Recorder- paneel.
4. Om het opnieuw afspelen te stoppen, klikt u op Annuleer het opnieuw afspelen .

Stappen bewerken

U kunt elke stap in de opname bewerken door op de knop te klikken knop ernaast, zowel tijdens de opname als daarna.

U kunt ook ontbrekende stappen toevoegen en per ongeluk opgenomen stappen verwijderen .

Voeg stappen toe

Soms moet u mogelijk handmatig stappen toevoegen. De Recorder legt bijvoorbeeld niet automatisch hover vast, omdat dit de opname vervuilt en niet al deze gebeurtenissen nuttig zijn. UI-elementen, zoals vervolgkeuzemenu's, kunnen echter alleen verschijnen als u met hover . U kunt handmatig hover toevoegen aan gebruikersstromen die afhankelijk zijn van dergelijke elementen.

Handmatig een stap toevoegen:

1. Open deze demopagina en start een nieuwe opname.
2. Beweeg over het element in de viewport. Er verschijnt een actiemenu.
3. Kies een actie uit het menu en beëindig de opname. De Recorder legt alleen de klikgebeurtenis vast.
4. Probeer de opname opnieuw af te spelen door op te klikken Opnieuw afspelen . Het opnieuw afspelen mislukt na een time-out omdat de recorder geen toegang heeft tot het element in het menu.
5. Klik op de knop met drie stippen naast de klikstap en selecteer Stap toevoegen vóór .
6. Vouw de nieuwe stap uit. Standaard heeft het het type waitForElement . Klik op de waarde naast type en selecteer hover .
7. Stel vervolgens een geschikte selector in voor de nieuwe stap. Klik Selecteer en klik vervolgens op een gebied met de Hover over me! element dat zich buiten het pop-upmenu bevindt. De selector is ingesteld op #clickable .
8. Probeer de opname opnieuw af te spelen. Met de toegevoegde hover-stap herhaalt de Recorder de stroom met succes.

Voeg beweringen toe

Tijdens de opname kunt u bijvoorbeeld HTML-attributen en JavaScript-eigenschappen vastleggen. Om een ​​bewering toe te voegen:

1. Start bijvoorbeeld een opname op deze demopagina .

2. Klik op Bewering toevoegen .

   

   De Recorder maakt een configureerbare waitForElement -stap.

3. Geef selectors op voor deze stap.

4. Configureer de stap , maar wijzig het waitForElement -type niet. U kunt bijvoorbeeld het volgende opgeven:

   • HTML-attribuut . Klik op Attributen toevoegen en typ de naam en waarde van het attribuut die door de elementen op deze pagina worden gebruikt. Bijvoorbeeld data-test: <value> .
   • JavaScript-eigenschap . Klik op Eigenschappen toevoegen en typ de naam en waarde van de eigenschap in JSON-indeling. Bijvoorbeeld {".innerText":"<text>"} .
   • Andere stapeigenschappen . Bijvoorbeeld visible: true .

5. Ga verder met het opnemen van de rest van de gebruikersstroom en stop vervolgens de opname.

6. Klik Opnieuw afspelen . Als een bewering mislukt, geeft de Recorder na een time-out een fout weer.

Bekijk de volgende video om deze workflow in actie te zien.

Kopieer stappen

In plaats van de gehele gebruikersstroom te exporteren , kunt u een enkele stap naar het klembord kopiëren:

1. Klik met de rechtermuisknop op de stap die u wilt kopiëren of klik op pictogram met drie stippen ernaast.
2. Selecteer in het vervolgkeuzemenu een van de opties Kopiëren als....

U kunt stappen in verschillende formaten kopiëren: JSON, Puppeteer , @puppeteer/replay en die van extensions .

Stappen verwijderen

Om een ​​per ongeluk opgenomen stap te verwijderen, klikt u met de rechtermuisknop op de stap of klikt u op de pictogram met drie stippen ernaast en selecteer Stap verwijderen .

Bovendien voegt de Recorder automatisch twee afzonderlijke stappen toe aan het begin van elke opname:

• Kijkvenster instellen . Hiermee kunt u de afmetingen, schaling en andere eigenschappen van het venster beheren.
• Navigeren . Stelt de URL in en vernieuwt de pagina automatisch bij elke herhaling.

Als u automatisering op de pagina wilt uitvoeren zonder de pagina opnieuw te laden, verwijdert u de navigatiestap zoals hierboven beschreven.

Configureer stappen

Een stap configureren:

1. Geef het type op: click , doubleClick , hover , (input) change , keyUp , keyDown , scroll , close , navigate (naar een pagina), waitForElement , waitForExpression of setViewport .

   Andere eigenschappen zijn afhankelijk van de type .

2. Geef de vereiste eigenschappen op onder het type .

   

3. Klik op de overeenkomstige knoppen om optionele typespecifieke eigenschappen toe te voegen en deze op te geven.

Zie Stapeigenschappen voor een lijst met beschikbare eigenschappen.

Om een ​​optionele eigenschap te verwijderen, klikt u op de Knop ernaast verwijderen .

Om een ​​element toe te voegen aan of te verwijderen uit een array-eigenschap, klikt u op de knoppen + of - naast het element.

Stap eigenschappen

Elke stap kan de volgende optionele eigenschappen hebben:

• target —een URL voor het Chrome DevTools Protocol (CDP) -doel, het standaard main verwijst naar de huidige pagina.
• assertedEvents die slechts één navigation kunnen zijn.

Andere veel voorkomende eigenschappen die beschikbaar zijn voor de meeste staptypen zijn:

• frame —een array van op nul gebaseerde indexen die een iframe identificeren dat kan worden genest. U kunt bijvoorbeeld het eerste (0) iframe binnen een tweede (1) iframe van het hoofddoel identificeren als [1, 0] .
• timeout —een aantal milliseconden dat moet worden gewacht voordat een stap wordt uitgevoerd. Zie Time-outs voor stappen aanpassen voor meer informatie.
• selectors —een reeks selectors. Zie Selectoren begrijpen voor meer informatie.

Typespecifieke eigenschappen zijn:

Type	Eigendom	Vereist	Beschrijving
click doubleClick	offsetX offsetY		Ten opzichte van de linkerbovenhoek van het inhoudsvak van het element, in pixels
click doubleClick	button		Aanwijzerknop: primair | hulp | tweede | terug | vooruit
change	value		Eindwaarde
keyDown keyUp	key		Sleutelnaam
scroll	x y		Absolute scroll-x- en y-posities in pixels, standaard 0
navigate	url		Doel-URL
waitForElement	operator		>= | == (standaard) | <=
waitForElement	count		Aantal elementen geïdentificeerd door een selector
waitForElement	attributes		HTML-kenmerk en de waarde ervan
waitForElement	properties		JavaScript-eigenschap en de waarde ervan in JSON
waitForElement	visible		Booleaans. Waar als het element zich in de DOM bevindt en zichtbaar is (heeft geen display: none of visibility: hidden )
waitForElement waitForExpression	asserted events		type: navigation , maar u kunt de titel en URL opgeven
waitForElement waitForExpression	timeout		Maximale wachttijd in milliseconden
waitForExpression	expression		JavaScript-expressie die wordt omgezet in true
setViewport	width height		Breedte en hoogte van de viewport in pixels
setViewport	deviceScaleFactor		Vergelijkbaar met Device Pixel Ratio (DPR), standaard 1
setViewport	isMobile hasTouch isLandscape		Booleaanse vlaggen die specificeren of: Houd rekening met de metatag Ondersteuning van aanraakgebeurtenissen Weergave in landschapsmodus

Er zijn twee eigenschappen die ervoor zorgen dat het afspelen wordt gepauzeerd:

• De eigenschap waitForElement zorgt ervoor dat de stap wacht op de aanwezigheid (of afwezigheid) van een aantal elementen die door een selector worden geïdentificeerd. De volgende stap wacht bijvoorbeeld tot er minder dan drie elementen op de pagina staan ​​die overeenkomen met de selector .my-class .

    "type": "waitForElement",
    "selectors": [".my-class"],
    "operator": "<=",
    "count": 2,
  

• De eigenschap waitForExpression zorgt ervoor dat de stap wacht totdat een JavaScript-expressie is omgezet naar waar. De volgende stap pauzeert bijvoorbeeld twee seconden en wordt vervolgens omgezet in waar, zodat het opnieuw afspelen kan worden voortgezet.

    "type": "waitForExpression",
    "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
  

Pas de time-outs voor stappen aan

Als uw pagina trage netwerkverzoeken of lange animaties bevat, kan het opnieuw afspelen mislukken bij stappen die de standaardtime-out van 5000 milliseconden overschrijden.

Om dit probleem te voorkomen, kunt u de standaardtime-out voor elke stap in één keer aanpassen of afzonderlijke time-outs voor specifieke stappen instellen. Time-outs bij specifieke stappen overschrijven de standaardwaarde.

Om de standaardtime-out voor elke stap in één keer aan te passen:

1. Klik op Instellingen voor opnieuw afspelen om het vak Time-out bewerkbaar te maken.

   

2. Stel in het vak Time-out de time-outwaarde in milliseconden in.

3. Klik Speel het opnieuw af om de aangepaste standaardtime-out in actie te zien.

De standaardtime-out voor een specifieke stap overschrijven:

1. Vouw de stap uit en klik op Time-out toevoegen .

   

2. Klik op de timeout: <value> en stel de waarde in milliseconden in.

   

3. Klik Speel opnieuw om de stap met de time-out in actie te zien.

Als u een time-outoverschrijving voor een stap wilt verwijderen, klikt u op Verwijderen knop ernaast.

Begrijp selectors

Wanneer u een nieuwe opname start, kunt u het volgende configureren:

• Voer in het tekstvak Selectorattribuut een aangepast testattribuut in. De Recorder gebruikt dit attribuut om selectors te detecteren in plaats van een lijst met algemene testattributen .

• In de selectievakjes Selectortypen om op te nemen kiest u de typen selectors die u automatisch wilt detecteren:

  • CSS . Syntactische selectoren.
  • ARIA . Semantische selectoren.
  • Tekst . Selectors met de kortste unieke tekst, indien beschikbaar.
  • XPath . Selectors die XML Path Language gebruiken.
  • Doorboren . Selectors lijken op de CSS-selecties, maar kunnen schaduw-DOM doorbreken .

Opmerking: Zie Syntactische versus semantische selectors en Selectorprioriteit voor meer informatie.

Gemeenschappelijke testselectors

Voor eenvoudige webpagina's zijn id -attributen en CSS- class -attributen voldoende om de Recorder de selectors te laten detecteren. Dat is echter niet altijd het geval omdat:

• Uw webpagina's kunnen dynamische klassen of ID's gebruiken die veranderen.
• Uw selectors kunnen defect raken vanwege wijzigingen in de code of het raamwerk.

De CSS- class kunnen bijvoorbeeld automatisch worden gegenereerd voor toepassingen die zijn ontwikkeld met moderne JavaScript-frameworks (bijvoorbeeld React , Angular , Vue ) en CSS-frameworks.

In deze gevallen kunt u data-* attributen gebruiken om veerkrachtiger tests te maken. Er zijn al enkele algemene data-* selectors die ontwikkelaars gebruiken voor automatisering. De Recorder ondersteunt hen ook.

Als u de volgende algemene testkiezers op uw website hebt gedefinieerd, detecteert en gebruikt de Recorder deze automatisch eerst:

• data-testid
• data-test
• data-qa
• data-cy
• data-test-id
• data-qa-id
• data-testing

Inspecteer bijvoorbeeld het element "Cappuccino" op deze demopagina en bekijk de testattributen:

Neem een ​​klik op "Cappuccino" op, vouw de overeenkomstige stap in de opname uit en controleer de gedetecteerde selectors:

Pas de selector van de opname aan

U kunt de selector van een opname aanpassen als de algemene testselectors niet voor u werken.

Deze demopagina gebruikt bijvoorbeeld het data-automate attribuut als selector. Start een nieuwe opname en voer data-automate in als selectorattribuut.

Vul een e-mailadres in en let op de selectorwaarde ( [data-automate=email-address] ).

Selectieprioriteit

De Recorder zoekt naar selectors in de volgende volgorde, afhankelijk van of u een aangepast CSS- selectorkenmerk hebt opgegeven:

• Indien gespecificeerd:
  1. CSS-kiezer met uw aangepaste CSS-kenmerk.
  2. XPath-kiezers.
  3. ARIA-selector indien gevonden.
  4. Een selector met de kortste unieke tekst, indien gevonden.
• Indien niet gespecificeerd:
  1. ARIA-selector indien gevonden.
  2. CSS-kiezers met de volgende prioriteit:
     1. De meest voorkomende attributen die worden gebruikt voor het testen:
        • data-testid
        • data-test
        • data-qa
        • data-cy
        • data-test-id
        • data-qa-id
        • data-testing
     2. ID-kenmerken, bijvoorbeeld <div id="some_ID"> .
     3. Reguliere CSS-kiezers.
  3. XPath-kiezers.
  4. Pierce-kiezers.
  5. Een selector met de kortste unieke tekst, indien gevonden.

Er kunnen meerdere reguliere CSS-, XPath- en Pierce-selectors zijn. De recorder registreert:

• Reguliere CSS- en XPath-selectors op elk rootniveau, dat wil zeggen, eventuele geneste schaduwhosts .
• Prik selectors aan die uniek zijn onder alle elementen binnen alle schaduwwortels.