Test del browser con gli script dell'IDE Selenium

1. Scaricare e installare l'IDE Selenium.

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

   • Per gli utenti di Firefox, aggiungere l' addon Firefox al browser. Quindi, riavviare il browser come necessario.

   • Per gli utenti di Chrome, completare uno dei seguenti metodi:

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

     • Installare l'IDE 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.

     • Scaricate l'IDE dal sito Selenium IDE GitHub in base al vostro sistema operativo ed eseguite l'applicazione in locale.

       Nota: L'applicazione Selenium IDE registra progetti nel formato 3.0 che il motore di riproduzione sintetico PoP BrowserScript non supporta ancora.

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

       Dopo aver salvato il progetto nell'applicazione Selenium IDE, per modificare manualmente il file .side , completare i seguenti passaggi:

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

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

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

       3. Cambiare la versione in 2.0.

       4. Salvare il file.

2. Aprite Selenium IDE dalla barra dei menu. Fate clic sul link Record a new test in a new project e registrate un copione 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. Inserire nella proprietà Value un valore per il timeout da attendere fino alla 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, fate 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 di testo della ricerca.

   Fornire 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 con i browser, questa situazione viene definita " 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 lo script e fate clic su Esegui.

   

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

   

Per ulteriori informazioni, vedere Selenium IDE Get Started. L'esempio completo è riportato nella sezione seguente.

Considerare l'uso del runner locale Instana Synthetic-browser-script per testare ed eseguire il debug dello script registrato localmente. Il runner locale Synthetic-browser-script fornisce lo stesso runtime di Instana Synthetics e può aiutare a cancellare i cookie o i profili utente per ogni esecuzione di test.

Quindi è possibile creare Selenium IDE test su Instana, selezionare Create Synthetic Test -> Browser Script Test -> Switch to Advanced Mode, fare clic su Add Script e caricare il file .side .

• Se non è possibile visualizzare il grafico della linea temporale nei risultati del test su Instana. È possibile verificare se l'ID del test è presente 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 e quindi le seguenti proprietà negli script dell'IDE Selenium sono sovrascritte dal motore di riproduzione del browser Instana:

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

• È possibile utilizzare i comandi Explicit Wait disponibili per attendere che una condizione sia soddisfatta prima di procedere con il comando successivo nel codice. L 'attesa esplicita è una pratica ottimale 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 l' 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 determinato timeout con wait for element present, assert element present o altri comandi di attesa esplicita. Impostare un valore per il timeout nella proprietà value dei comandi wait for . Per i comandi di 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 L'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 utilizzare 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 Selenium IDE 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 di Instana

  Per creare una credenziale con Synthetic Open API, completare i seguenti passaggi:

  1. Assicurati di avere le autorizzazioni corrette.
  2. Utilizzare Synthetic OpenAPI per creare una credenziale passando le variabili credentialName e credentialValue .

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

  Nota: è supportato solo il formato $secure.credentialName . Il formato $secure[credentialName] 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}"
  }
  

Gli screenshot sono disponibili nella pagina dei risultati del test Instana.

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

È possibile utilizzare $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 modello in JavaScript, come il comando echo , utilizzare la sintassi standard di Node.js e inserire 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": ""
}

Gli attributi personalizzati impostati dall'API $attributes nello script e le proprietà personalizzate definite da customProperties nella definizione del test sono accessibili nei risultati del test con la metrica synthetic.tags . È possibile utilizzare la metrica synthetic.tags per filtrare i risultati del test o passare un valore personalizzato a Carico utile personalizzato Smart Alert .

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

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

  La differenza tra executeScript e runScript è che executeScript supporta la memorizzazione del valore restituito in una variabile. Si può quindi assert o echo la variabile con ${xxx}. Per memorizzare il valore restituito, usare 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 d'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 l'API di test del browser Instana per implementare facilmente i passaggi di scorrimento precedenti. 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 di Selenium invocano le API di test del browser Instana e le variabili globali.

Esempio di accesso e convalida dell'interfaccia utente di Instana