Test del browser con script IDE Selenium

1. Scarica e installa l'IDE di Selenium.

   È possibile scaricare e installare l'IDE " Selenium " per gli utenti di Firefox e e Chrome.

   • Per gli utenti di Firefox, aggiungete l 'estensione Firefox al browser. Quindi, se necessario, riavvia il browser.

   • Per gli utenti di Chrome, seguire una delle seguenti procedure:

     Nota: l'estensione per Chrome " Selenium " non è più disponibile sul Chrome Web Store.

     • Installa l'IDE di Selenium utilizzando la riga di comando o il prompt dei comandi.

       npm install -g selenium-ide
       selenium-ide
       

       Per ulteriori informazioni sulle istruzioni di installazione, consultare il file README.

     • Scarica l'IDE dalla pagina delle versioni di Selenium IDE GitHub in base al tuo sistema operativo ed esegui l'applicazione in locale.

       Nota: l'applicazione IDE " Selenium " salva i progetti nel formato " 3.0 ", che il motore di riproduzione "Synthetic PoP " BrowserScript non supporta ancora.

       Per garantire la compatibilità, è necessario modificare manualmente il numero di versione nel .side file da 3.0 a 2.0.

       Dopo aver salvato il progetto nell'applicazione IDE di Selenium, per modificare il .side file manualmente, procedere come segue:

       1. Apri il .side file in un editor di testo.

       2. Trova il campo "versione" nel file. L'esempio seguente mostra l'aspetto del campo "versione":

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

       3. Modifica la versione in 2.0.

       4. Salvare il file.

2. Apri Selenium IDE dalla barra dei menu. Fare clic su Record a new test in a new project e registrare uno script seguendo le istruzioni.

   Quando Selenium IDE registra, genera un comando per ogni azione utente in uno script.

   

3. Eseguire azioni di prova per cercare le parole chiave instana in Google.

   Premere Enter per passare alla pagina dei risultati della ricerca. Aggiungere una condizione wait in questa pagina; fare clic con il tasto destro del mouse sull'icona di ricerca e selezionare Selenium IDE -> Wait For -> Present. Immettere un valore per il timeout nella proprietà Value per attendere la visualizzazione dell'elemento, ad esempio 10000 per attendere fino a 10 secondi.

   

4. Aggiungere un'asserzione per verificare il test. Aggiungere un comando assert; fare clic con il pulsante destro del mouse sulla pagina e selezionare Selenium IDE -> Assert -> Title.

   Quindi, terminate le registrazioni, fare clic sul pulsante Interrompi registrazione in Selenium IDE.

   

5. È possibile aggiungere comandi come send keys con il valore di ${KEY_ENTER} per digitare Enter nell'area del testo di ricerca.

   Fornite un valore di timeout come 10000 nella proprietà Value del comando wait for element present per attendere una condizione. Utilizzare lo stesso valore Target usato nel passaggio precedente per individuare l'elemento web dell'area di testo di ricerca. Questo è un passo importante per garantire che il test venga eseguito in modo stabile e con successo. Nel campo dei test del browser, questo viene definito Attese esplicite. La logica interroga l'applicazione per verificare la presenza di una condizione specifica prima di passare al comando successivo nel codice. Se la condizione non viene soddisfatta prima di un determinato valore di timeout, viene visualizzato un errore di timeout.

   Quindi testate il vostro script, facendo clic su esegui.

   

6. Dopo la registrazione, salvare lo script in un file .side .

   

Per ulteriori informazioni, consultare la guida introduttiva all'IDE su Selenium. L'esempio completo è riportato nella sezione seguente.

Ti consigliamo di utilizzare il runner locale per script di browser sintetico di Instana per testare ed eseguire il debug dello script registrato in locale. Il local runner dello script del browser Synthetic offre lo stesso ambiente di esecuzione di Synthetics su Instana e consente di cancellare i cookie o i profili utente ad ogni esecuzione del test.

A questo punto puoi creare un test IDE per l' Selenium e su Instana, selezionare Create Synthetic Test -> Browser Script Test -> Switch to Advanced Mode, cliccare Add Scriptsu e caricare il .side file.

• Se non riesci a visualizzare il grafico cronologico nei risultati del test su Instana. È possibile verificare se l'ID del test si trova nella proprietà suites -> tests. Senza questo ID, il test non viene riprodotto.

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

• Instana supporta solo test serializzati nelle suite di test; pertanto, le seguenti proprietà negli script dell'IDE Selenium vengono sovrascritte dal motore di riproduzione del browser Instana :

  • "persistSession": falso
  • "parallelo": false

• È possibile utilizzare i comandi Attesa esplicita disponibili per attendere che una condizione sia soddisfatta prima di procedere con il comando successivo nel codice. L'attesa esplicita è una best practice nei test dei browser. Se la condizione specificata non viene soddisfatta prima di un determinato valore di timeout, viene visualizzato un errore di timeout. Il test fallisce con un errore. Il comando wait più utilizzato è wait for element present. Inserire il valore del timeout in millisecondi nella proprietà value.

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

• È possibile fare una pausa di qualche millisecondo con il comando pause. Nell'esempio seguente, il tempo di attesa è di 3 secondi.

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

Per convalidare automaticamente i risultati dei test, si possono usare le asserzioni e Attesa esplicita. Se la convalida fallisce, lo stato del risultato del test viene visualizzato come fallito. È possibile monitorare i fallimenti dei test con Synthetic Smart Alert.

• È possibile attendere che l'elemento richiesto sia presente nell'interfaccia utente prima di un timeout designato con i comandi wait for element present, assert element present o altri Attesa esplicita. Impostare un valore per il timeout nella proprietà value dei comandi wait for. Per i comandi assert, il valore di timeout è di 15 secondi.

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

• È possibile utilizzare il comando assert title per convalidare i titoli delle pagine.

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

• È possibile utilizzare il comando assert text per confermare che il testo di un elemento contenga il valore fornito. La proprietà value di questo comando deve corrispondere a una stringa esatta. Selenium IDE non supporta la corrispondenza dei modelli per il comando.

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

È possibile usare il comando echo per stampare i messaggi di registrazione nei registri della console per aiutare a risolvere i problemi.

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

La maggior parte dei casi di test richiede lo scorrimento della pagina per rendere un elemento web focalizzato, visibile o cliccabile. Nello script Selenium IDE, è necessario utilizzare JavaScript per lo scorrimento. Utilizzate il comando runScript o executeScript per implementare lo scorrimento come mostrato nell'esempio seguente:

• Scorrete a metà dell'altezza della pagina:

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

• Scorrere fino alla fine della pagina:

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

• Scorrere all'inizio della pagina:

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

• Scorrere fino all'elemento web e fare clic su di esso:

  Attendere che l'elemento venga individuato, quindi scorrerlo e fare clic su di esso.

  {
      "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": ""
  }
  

• Per fare doppio clic nell'area del filtro e digitare i tasti, si può usare il seguente esempio:

  {
      "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"
  }
  

• Per digitare il tasto Enter dopo una pausa di 3 secondi nell'area del filtro, si può utilizzare il seguente esempio:

  {
      "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}"
  },
  

Nell'esempio seguente, lo script IDE " Selenium " viene utilizzato per cercare le parole chiave " Instana " in un motore di ricerca:

{
  "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": []
}

• Accedere alle credenziali utente definite nel server backend Instana

  Per creare una credenziale con l' API Synthetic Open, procedere come segue:

  1. Assicurati di disporre delle autorizzazioni corrette.
  2. Utilizza ` OpenAPI ` per creare una credenziale passando le variabili credentialNamecredentialValue `` e ``.

  Quindi, nello script di test, utilizzare $secure.credentialName per fare riferimento alla credenziale creata, ad esempio, $secure.password o $secure.username. ${} nella proprietà Value nello script IDE Selenium è per fare riferimento alle variabili predefinite per distinguerle dalle stringhe costanti. $secure.credentialName è come accedere alle credenziali utente in Instana.

  Nota: è supportato solo il $secure.credentialName formato. Il $secure[credentialName] formato non è supportato.

  {
      "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}"
  }
  

• Generare una password unica basata sul tempo (TOTP) da una chiave segreta per accedere al sito web con l'autenticazione a due fattori (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}"
  }
  

È possibile trovare gli screenshot nella pagina dei dettagli dei risultati dei test su Instana.

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

Si può usare $synthetic.xxxx, $secure.xxx o $env.xxx per accedere alle variabili globali, come mostrato nell'esempio seguente.

Per utilizzare le variabili nella sintassi delle stringhe dei modelli in JavaScript, come nel echo comando, usa la sintassi standard di Node.js e inserisci le variabili in ${}.

{
    "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": ""
}

È possibile accedere agli attributi personalizzati impostati da ` $attributesAPI ` nello script e alle proprietà personalizzate definite nella customProperties definizione del test tramite la synthetic.tags metrica. È possibile utilizzare il synthetic.tags parametro per filtrare i risultati del test oppure passare un valore personalizzato al payload personalizzato di Smart Alert.

• Utilizza i comandi Selenium runScript e executeScript per richiamare le API di test del browser avanzate.

  È possibile utilizzare i comandi ` SeleniumrunScript ` e `` executeScript per richiamare le API di test del browser predefinite e le variabili globali in ` Instana Browser Testing`.

  La differenza tra executeScript e runScript è che executeScript supporta la memorizzazione del valore restituito in una variabile. È quindi possibile assert o echo la variabile con ${xxx}. Per memorizzare il valore restituito, utilizzare la parola chiave return e fornire un nome di variabile nel campo di input value.

  {
      "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": ""
  }
  

• Definire una variabile di ambiente e utilizzarla nelle API di test del browser.

  {
      "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": ""
  }
  

• Scorrere fino all'elemento web e fare clic su di esso.

  È possibile utilizzare il browser di test Instana API per implementare facilmente le operazioni di scorrimento descritte in precedenza. L'esempio riportato di seguito implementa la logica degli elementi waiting for element present, waiting for element visible, scrollIntoView e click. La funzione scrollIntoView può far scorrere l'elemento nell'area visibile della finestra del browser.

  {
      "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": ""
}

Nell'esempio seguente, i comandi Selenium richiamano le API di test del browser Instana e le variabili globali.

Esempio di accesso e verifica dell'interfaccia utente di Instana