Browser-Tests mit Selenium IDE-Skripten

1. Laden Sie die Selenium IDE herunter und installieren Sie sie.

   Sie können die Selenium IDE für Firefox und Chrome-Benutzer herunterladen und installieren.

   • Für Benutzer von Firefox fügen Sie dem Browser das Addon Firefox hinzu. Starten Sie den Browser dann bei Bedarf neu.

   • Für Chrome-Benutzer führen Sie eine der folgenden Methoden aus:

     Hinweis: Die Selenium IDE Chrome-Erweiterung ist nicht mehr im Chrome Web Store erhältlich.

     • Installieren Sie die Selenium IDE über die Befehlszeile oder die Eingabeaufforderung.

       npm install -g selenium-ide
       selenium-ide
       

       Weitere Informationen zu den Installationsanweisungen finden Sie in der Readme-Datei.

     • Laden Sie die IDE von der Website Selenium IDE GitHub herunter, die auf Ihrem Betriebssystem basiert, und führen Sie die Anwendung lokal aus.

       Hinweis: Die Anwendung Selenium IDE zeichnet Projekte im Format 3.0 auf, das von der Synthetic PoP BrowserScript Playback Engine noch nicht unterstützt wird.

       Um die Kompatibilität zu gewährleisten, müssen Sie die Versionsnummer in der Datei .side manuell von 3.0 auf 2.0 ändern.

       Nachdem Sie Ihr Projekt in der IDE-Anwendung Selenium gespeichert haben, führen Sie die folgenden Schritte aus, um die Datei .side manuell zu bearbeiten:

       1. Öffnen Sie die Datei .side in einem Texteditor.

       2. Suchen Sie das Versionsfeld in der Datei. Das folgende Beispiel zeigt das Aussehen des Versionsfeldes:

              {
                  "id": "some-id",
                  "version": "3.0",
                    ...
              }
          

       3. Ändern Sie die Version in 2.0.

       4. Speichern Sie die Datei.

2. Öffnen Sie Selenium IDE über die Menüleiste. Klicken Sie auf den Link Record a new test in a new project und zeichnen Sie ein Skript auf, indem Sie die Anweisungen befolgen.

   Bei der Aufzeichnung generiert 'Selenium IDE' in einem Script einen Befehl für jede Benutzeraktion.

   

3. Führen Sie Testaktionen durch, um nach den Schlüsselwörtern instana in Google zu suchen.

   Drücken Sie Enter , um zur Seite mit den Suchergebnissen zu gelangen. Fügen Sie auf dieser Seite eine Bedingung wait hinzu; klicken Sie mit der rechten Maustaste auf das Suchsymbol und wählen Sie Selenium IDE -> Wait For -> Present. Geben Sie in der Eigenschaft Value einen Wert für die Wartezeit ein, bis das Element angezeigt wird, z. B. 10000 für eine Wartezeit von bis zu 10 Sekunden.

   

4. Fügen Sie eine Behauptung hinzu, um Ihren Test zu verifizieren. Fügen Sie einen Befehl assert hinzu; klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie Selenium IDE -> Assert -> Title.

   Wenn Sie Ihre Aufnahmen beendet haben, klicken Sie auf die Schaltfläche Aufnahme beenden in Selenium IDE.

   

5. Sie können Befehle wie send keys mit dem Wert von ${KEY_ENTER} hinzufügen, um Enter in den Suchtextbereich einzugeben.

   Geben Sie einen Timeout-Wert wie 10000 in der Eigenschaft Value des Befehls wait for element present an, um auf eine Bedingung zu warten. Verwenden Sie denselben Target Wert, der im vorherigen Schritt verwendet wurde, um das Webelement für den Suchtextbereich zu finden. Dies ist ein wichtiger Schritt, um sicherzustellen, dass Ihr Test stabil und erfolgreich verläuft. Im Bereich der Browsertests wird dies als explizite Wartezeit bezeichnet. Die Logik fragt die Anwendung nach einer bestimmten Bedingung ab, bevor sie mit dem nächsten Befehl im Code fortfährt. Wenn die Bedingung nicht vor einem bestimmten Zeitlimit erfüllt ist, wird ein Zeitüberschreitungsfehler angezeigt.

   Testen Sie dann Ihr Skript und klicken Sie auf Ausführen.

   

6. Speichern Sie das Skript nach der Aufzeichnung in einer Datei .side .

   

Weitere Informationen finden Sie unter Selenium IDE Get Started. Das vollständige Beispiel ist im folgenden Abschnitt zu finden.

Verwenden Sie den lokalen Instana Synthetic-browser-script runner, um das aufgezeichnete Skript lokal zu testen und zu debuggen. Der lokale Läufer Synthetic-browser-script bietet die gleiche Laufzeit wie Instana Synthetics und kann Ihnen helfen, Cookies oder Benutzerprofile für jeden Testlauf zu löschen.

Dann können Sie Selenium IDE test auf Instana erstellen, Create Synthetic Test -> Browser Script Test -> Switch to Advanced Mode auswählen, auf Add Script klicken und die Datei .side hochladen.

• Wenn Sie das Zeitdiagramm in den Testergebnissen auf Instana nicht sehen können. Sie können überprüfen, ob die Test-ID in der Eigenschaft suites -> tests enthalten ist. Ohne diese Test-ID kann Ihr Test nicht abgespielt werden.

  "suites": [{
      "id": "7de135e9-a6c4-4b39-b28a-092bb0d7cbac",
      "name": "Search Instana",
      "persistSession": false,
      "parallel": false,
      "timeout": 300,
      "tests": ["c0283e5a-8cbd-492f-8b3d-f2476f319264"]
  }],
  

• Instana unterstützt nur serialisierte Tests in Testsuiten. Daher werden die folgenden Eigenschaften in den Skripten der Selenium IDE von der Instana Browser Playback Engine überschrieben:

  • "persistSession": falsch
  • "parallel": false

• Sie können die verfügbaren Explicit Wait-Befehle verwenden, um zu warten, bis eine Bedingung erfüllt ist, bevor Sie mit dem nächsten Befehl im Code fortfahren. Explizites Warten ist eine bewährte Praxis bei Browsertests. Wenn die angegebene Bedingung nicht vor einem bestimmten Timeout-Wert erfüllt ist, wird ein Timeout-Fehler angezeigt. Ihr Test schlägt mit einem Fehler fehl. Der am häufigsten verwendete Befehl wait ist wait for element present. Geben Sie den Wert für die Zeitüberschreitung in Millisekunden in der Eigenschaft value ein.

  {
      "id": "d13e50bd-f698-4a04-9420-701a21dcde8d",
      "comment": "",
      "command": "waitForElementPresent",
      "target": "id=searchform",
      "targets": [],
      "value": "10000"
  }
  

• Mit dem Befehl pause können Sie eine Pause von einigen Millisekunden einlegen. Im folgenden Beispiel beträgt die Wartezeit 3 Sekunden.

  {
      "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb7",
      "comment": "",
      "command": "pause",
      "target": "3000",
      "targets": [],
      "value": ""
  }
  

Um Ihre Testergebnisse automatisch zu validieren, können Sie Assertions und Explicit Wait verwenden. Wenn die Validierung fehlschlägt, wird der Status des Testergebnisses als fehlgeschlagen angezeigt. Sie können Testfehler mit Synthetic Smart Alert überwachen.

• Sie können mit wait for element present, assert element present oder anderen expliziten Wartebefehlen warten, bis das erforderliche Element auf der Benutzeroberfläche vor einer bestimmten Zeitspanne vorhanden ist. Legen Sie einen Wert für die Zeitüberschreitung in der Eigenschaft value der Befehle wait for fest. Für die Befehle assert beträgt der Timeout-Wert 15 Sekunden.

  {
      "id": "e9a3161a-de29-4557-bbf6-9950c1881425",
      "comment": "",
      "command": "assertElementPresent",
      "target": "linkText=About",
      "targets": [],
      "value": ""
  }
  

• Sie können den Befehl assert title verwenden, um Seitentitel zu validieren.

  {
      "id": "46eb59c2-5fd6-4481-b3e8-eaaddab79a69",
      "comment": "",
      "command": "assertTitle",
      "target": "instana - Google Search",
      "targets": [],
      "value": ""
  }
  

• Sie können den Befehl assert text verwenden, um zu bestätigen, dass der Text eines Elements den angegebenen Wert enthält. Die Eigenschaft value dieses Befehls muss eine exakte Zeichenfolgenübereinstimmung sein. Selenium Die IDE unterstützt keinen Mustervergleich für diesen Befehl.

  {
      "id": "ed733875-5682-4a3b-9a3e-9286f88a62ca",
      "comment": "",
      "command": "assertText",
      "target": "linkText=About",
      "targets": [],
      "value": "About"
  }
  

Sie können den Befehl echo verwenden, um Protokollierungsmeldungen in Konsolenprotokollen auszudrucken, die Sie bei der Fehlersuche unterstützen.

{
    "id": "03e23d25-38e3-4051-81ff-740109350ee8",
    "comment": "",
    "command": "echo",
    "target": "Generate a TOTP token from a TOTP key",
    "targets": [],
    "value": ""
}

In den meisten Testfällen muss auf der Seite gescrollt werden, um ein Webelement zu fokussieren, sichtbar oder klickbar zu machen. Im Selenium IDE-Skript müssen Sie JavaScript für den Bildlauf verwenden. Verwenden Sie den Befehl runScript oder executeScript , um einen Bildlauf zu implementieren, wie im folgenden Beispiel gezeigt:

• Blättern Sie bis zur Hälfte der Seitenhöhe:

  {
      "id": "e4d8bc94-cd2c-4648-b64e-952ccfa89aaa",
      "comment": "",
      "command": "runScript",
      "target": "window.scrollTo(0, document.body.scrollHeight/2)",
      "targets": [],
      "value": ""
  }
  

• Blättern Sie bis zum Ende der Seite:

  {
      "id": "e4d8bc94-cd2c-4648-b64e-952ccfa89aaa",
      "comment": "",
      "command": "runScript",
      "target": "window.scrollTo(0, document.body.scrollHeight)",
      "targets": [],
      "value": ""
  }
  

• Blättern Sie zum Anfang der Seite:

  {
      "id": "e4d8bc94-cd2c-4648-b64e-952ccfa89aaa",
      "comment": "",
      "command": "runScript",
      "target": "window.scrollTo(0, 0)",
      "targets": [],
      "value": ""
  }
  

• Blättern Sie zu dem Webelement und klicken Sie darauf:

  Warten Sie, bis das Element gefunden wurde, blättern Sie zu ihm und klicken Sie es an.

  {
      "id": "d13e50bd-f698-4a04-9420-701a21dcde8d",
      "comment": "",
      "command": "waitForElementPresent",
      "target": "id=pnnext",
      "targets": [],
      "value": "20000"
  },
  {
      "id": "b345d354-1d95-45d0-81ab-7c78695ed040",
      "comment": "",
      "command": "runScript",
      "target": "const el = document.getElementById('pnnext'); el.scrollIntoView(); el.click();",
      "targets": [],
      "value": ""
  }
  

  {
      "id": "d13e50bd-f698-4a04-9420-701a21dcde8d",
      "comment": "",
      "command": "waitForElementPresent",
      "target": "css=#pnnext > span:nth-child(2)",
      "targets": [],
      "value": "20000"
  },
  {
      "id": "b345d354-1d95-45d0-81ab-7c78695ed040",
      "comment": "",
      "command": "runScript",
      "target": "const el = document.querySelector('#pnnext > span:nth-child(2)'); el.scrollIntoView(); el.click();",
      "targets": [],
      "value": ""
  }
  

• Um auf den Filterbereich zu doppelklicken und Tasten einzugeben, können Sie folgendes Beispiel verwenden:

  {
      "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb1",
      "comment": "",
      "command": "doubleClickAt",
      "target": "id=repos-list-filter-input",
      "targets": [],
      "value": ""
  }, {
      "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb1",
      "comment": "",
      "command": "type",
      "target": "id=repos-list-filter-input",
      "targets": [],
      "value": "instana"
  }
  

• Um die Taste Enter nach einer Pause von 3 Sekunden im Filterbereich einzugeben, können Sie das folgende Beispiel verwenden:

  {
      "id": "60135a5c-6aee-4b9b-86a5-d9d0fa41deb2",
      "comment": "",
      "command": "pause",
      "target": "3000",
      "targets": [],
      "value": ""
  }, {
      "id": "d0239041-5bdf-42be-b920-c5055628f161",
      "comment": "",
      "command": "sendKeys",
      "target": "id=repos-list-filter-input",
      "targets": [],
      "value": "${KEY_ENTER}"
  },
  

Im folgenden Beispiel wird das Selenium IDE-Skript verwendet, um in einer Suchmaschine nach den Instana-Schlüsselwörtern zu suchen:

{
  "id": "d54cb226-42e2-493a-9965-c05d209da23a",
  "version": "2.0",
  "name": "test-google-search",
  "url": "https://www.google.com",
  "tests": [{
    "id": "c0283e5a-8cbd-492f-8b3d-f2476f319264",
    "name": "search instana",
    "commands": [{
      "id": "cd6aaf21-62f8-4d7f-af0a-5fe8beee8fde",
      "comment": "",
      "command": "open",
      "target": "/",
      "targets": [],
      "value": ""
    }, {
      "id": "f6ef14b9-0f06-4b62-bb29-41c21a298703",
      "comment": "",
      "command": "click",
      "target": "id=APjFqb",
      "targets": [],
      "value": ""
    }, {
      "id": "ed0b72f9-8da9-4413-8088-819b89f1f6dc",
      "comment": "",
      "command": "type",
      "target": "id=APjFqb",
      "targets": [],
      "value": "instana"
    }, {
      "id": "f9746499-1d97-4f83-aa8a-a5419d9e3922",
      "comment": "",
      "command": "sendKeys",
      "target": "id=APjFqb",
      "targets": [],
      "value": "${KEY_ENTER}"
    }, {
      "id": "93939f21-739f-4c84-bb2e-580af6b1bc76",
      "comment": "",
      "command": "waitForElementPresent",
      "target": "css=.zgAlFc svg",
      "targets": [],
      "value": "10000"
    }, {
      "id": "331e3fc1-9baa-4519-9814-3105d6d06937",
      "comment": "",
      "command": "assertTitle",
      "target": "instana - Google Search",
      "targets": [],
      "value": ""
    }]
  }],
  "suites": [{
    "id": "7de135e9-a6c4-4b39-b28a-092bb0d7cbac",
    "name": "Search Instana",
    "persistSession": false,
    "parallel": false,
    "timeout": 300,
    "tests": ["c0283e5a-8cbd-492f-8b3d-f2476f319264"]
  }],
  "urls": ["https://www.google.com/"],
  "plugins": []
}

• Zugriff auf die im Instana-Backend-Server definierten Benutzeranmeldeinformationen

  Um einen Berechtigungsnachweis mit der Synthetic Open API zu erstellen, führen Sie die folgenden Schritte aus:

  1. Vergewissern Sie sich, dass Sie die richtigen Berechtigungen haben.
  2. Verwenden Sie Synthetic OpenAPI, um ein Credential zu erstellen, indem Sie die Variablen credentialName und credentialValue übergeben.

  Verwenden Sie dann in Ihrem Testskript $secure.credentialName , um auf den erstellten Berechtigungsnachweis zu verweisen, z. B. $secure.password oder $secure.username. ${} in der Value Eigenschaft in Selenium IDE Skript ist, um auf die vordefinierten Variablen zu verweisen, um von konstanten String zu unterscheiden. $secure.credentialName ist der Zugriff auf die Benutzeranmeldeinformationen in Instana.

  Hinweis: Es wird nur das Format $secure.credentialName unterstützt. Das Format $secure[credentialName] wird nicht unterstützt.

  {
      "id": "98b7df8f-ec53-47f9-b7a0-0eedbfc64ff0",
      "comment": "",
      "command": "click",
      "target": "id=email",
      "targets": [],
      "value": ""
  }, {
      "id": "83ae509f-4247-4acc-ab99-46ef4c620f4f",
      "comment": "",
      "command": "type",
      "target": "id=email",
      "targets": [],
      "value": "${$secure.username}"
  }
  

• Generieren Sie ein zeitbasiertes Einmalpasswort (TOTP) aus einem geheimen Schlüssel, um sich auf der Website mit Zwei-Faktor-Authentifizierung anzumelden ( 2FA ).

  {
      "id": "ec51296b-4d16-4167-ac83-ba87f89cc0c7",
      "comment": "Generate a TOTP token from a TOTP key",
      "command": "executeScript",
      "target": "return $browser.generateTOTPToken($secure.totpKey);",
      "targets": [],
      "value": "totpToken"
  }, {
      "id": "3cbc306a-ed33-46bf-9923-92752b0466f2",
      "comment": "",
      "command": "type",
      "target": "id=password",
      "targets": [],
      "value": "${totpToken}"
  }
  

Die Screenshots finden Sie auf der Seite mit den Details der Instana-Testergebnisse.

{
    "id": "b49ff289-f041-44f1-836b-ba7e993c3f07",
    "comment": "",
    "command": "executeScript",
    "target": "await $browser.takeScreenshot()",
    "targets": [],
    "value": ""
}

Sie können $synthetic.xxxx, $secure.xxx oder $env.xxx verwenden, um auf globale Variablen zuzugreifen, wie im folgenden Beispiel gezeigt.

Für die Verwendung von Variablen in der Syntax von Schablonenstrings in JavaScript, wie z. B. dem Befehl echo , verwenden Sie die Standard-Syntax Node.js und fügen die Variablen in ${} ein.

{
    "id": "da853ea2-7253-4938-ad2d-9272f4c6d3e2",
    "comment": "",
    "command": "echo",
    "target": "tag1's value is ${$synthetic.tag1}",
    "targets": [],
    "value": ""
}

{
    "id": "26438c58-868d-4d6d-9e6f-dbe9d8f373fd",
    "comment": "",
    "command": "executeScript",
    "target": "$attributes.set('regionName', 'green-region');",
    "targets": [],
    "value": ""
}

Auf die benutzerdefinierten Attribute, die von $attributes API im Skript festgelegt wurden, und die benutzerdefinierten Eigenschaften, die von customProperties in der Testspezifikation definiert wurden, kann in den Testergebnissen mit der Metrik synthetic.tags zugegriffen werden. Sie können die synthetic.tags Metrik zum Filtern der Testergebnisse oder zum Übergeben eines benutzerdefinierten Werts an die benutzerdefinierte Nutzlast von Smart Alert.

• Verwenden Sie die Befehle Selenium runScript und executeScript , um erweiterte Browser-Test-APIs aufzurufen.

  Sie können die Befehle Selenium runScript und executeScript verwenden, um vordefinierte Browser-Test-APIs und globale Variablen in Instana Browser Testing aufzurufen.

  Der Unterschied zwischen executeScript und runScript besteht darin, dass executeScript die Speicherung des zurückgegebenen Wertes in einer Variablen unterstützt. Sie können dann assert oder echo die Variable mit ${xxx}. Um den zurückgegebenen Wert zu speichern, verwenden Sie das Schlüsselwort return und geben einen Variablennamen in das Eingabefeld value ein.

  {
      "id": "ec51296b-4d16-4167-ac83-ba87f89cc0c7",
      "comment": "Generate a TOTP token from a TOTP key",
      "command": "executeScript",
      "target": "return $browser.generateTOTPToken($secure.totpKey);",
      "targets": [],
      "value": "totpToken"
  }, {
      "id": "3cbc306a-ed33-46bf-9923-92752b0466f2",
      "comment": "",
      "command": "echo",
      "target": "Generated TOTO token ${totpToken}",
      "targets": [],
      "value": ""
  }
  

• Definieren Sie eine Umgebungsvariable, und verwenden Sie sie in den Browser-Test-APIs.

  {
      "id": "10d09a25-d101-43b0-84df-f22265b7cec6",
      "comment": "",
      "command": "storeJson",
      "target": "{\"proxy\": \"<proxy_server>:8080\", \"noproxy\": \"localhost,google.com,192.168.1.0/24\"}",
      "targets": [],
      "value": "proxyConfig"
  },
  {
      "id": "237bd334-d963-4a73-b9bb-4c31f1dce051",
      "comment": "",
      "command": "runScript",
      "target": "await $browser.setProxy(${proxyConfig.proxy}, ${proxyConfig.noproxy});",
      "targets": [],
      "value": ""
  }
  

• Blättern Sie zu dem Webelement und klicken Sie darauf.

  Sie können die Instana-API für Browsertests verwenden, um vorherige Bildlaufschritte einfach zu implementieren. Das unten stehende Beispiel implementiert die Logik der Elemente waiting for element present, waiting for element visible, scrollIntoView und click . Mit der Funktion scrollIntoView kann das Element in den sichtbaren Bereich des Browserfensters verschoben werden.

  {
      "id": "b345d354-1d95-45d0-81ab-7c78695ed040",
      "comment": "",
      "command": "runScript",
      "target": "let element = await $browser.waitForAndFindElement(By.xpath(`//a[contains(.,'Customer stories')]`), 30000); await $browser.executeScript(`arguments[0].scrollIntoView()`, element); await $browser.executeScript(`arguments[0].click()`, element)",
      "targets": [],
      "value": ""
  }
  

{
    "id": "2e91846e-037b-473d-a977-7fbdfe52d1a4",
    "comment": "",
    "command": "executeScript",
    "target": "await $browser.addHostnamesToDenylist(['ajax.googleapis.com/ajax/libs/jquery']);",
    "targets": [],
    "value": ""
}

{
    "id": "a418460e-a0a9-4c68-bbd0-fb78d6495e92",
    "comment": "",
    "command": "runScript",
    "target": "await $network.setProxy(${proxyConfig.proxy}, ${proxyConfig.noproxy});",
    "targets": [],
    "value": ""
}

Im folgenden Beispiel rufen die Befehle Selenium die Instana-Browser-Test-APIs und globale Variablen auf.

Beispiel für die Anmeldung und Validierung der Instana-Benutzeroberfläche