I frame incorporati (più comunemente noti come iframe) vengono utilizzati per visualizzare contenuti di terze parti o incorporare nuove pagine nel contenuto di una pagina web. Nel mondo dell'automazione dei test, può essere difficile lavorare con gli iframe.

Il selenio richiede che un ingegnere utilizzi il switch_tometodo per modificare la messa a fuoco del conducente sul telaio stesso. Una volta eseguite le azioni, il driver deve essere focalizzato nuovamente sulla pagina principale utilizzando switch_to.default_content(). Sebbene questo non sia un flusso di lavoro difficile, può certamente essere una seccatura continuare a passare da un frame all'altro ogni volta che è necessario intraprendere un'azione.

Cypress non gestisce nativamente gli iframe. Ciò è dovuto al fatto che il cyprefisso utilizzato in tutti i comandi Cypress attraverserà il DOM fino a quando non verrà #documentindividuato a. Una volta individuato, l'attraversamento terminerà. Il codice personalizzato (o il plugin cypress-iframe ) è richiesto per utilizzare Cypress con iframe.

Il drammaturgo, d'altra parte, rende il lavoro con gli iframe semplice e intuitivo. In questo tutorial impareremo come utilizzare Playwright sia con iframe convenzionali che con iframe nidificati. Useremo le pagine DemoQA Frames e Nested Frames come punto focale per i nostri test.

Iniziare

Sarà necessario installare i seguenti pacchetti per questo tutorial:

• Pytest
• Drammaturgo

Metodi di selezione

Playwright offre agli ingegneri tre opzioni per la selezione di iframe:

• element_handle.content_frame ()
• page.frame ()
• page.frames [i]

La page.frames[i]proprietà deve essere utilizzata nei casi in cui un iframe non ha attributi univoci o elemento genitore. La proprietà elencherà tutti i frame attivi sulla pagina che possono essere indicizzati per un frame specifico. Non consiglierei di utilizzare questo metodo a meno che non si abbia accesso al codice sorgente dell'applicazione e non si possano utilizzare i due metodi precedenti.

Concentrandosi su un Iframe

La pagina DemoQA Frames contiene due iframe, uno al centro a sinistra della pagina e uno in basso a sinistra.

Gli iframe nella pagina dei frame DemoQA non hanno urlattributi univoci , né presentano nameattributi. Useremo il element_handle.content_frame()metodo per localizzarli poiché hanno selettori univoci per i loro elementi padre.

Ora abbiamo accesso al primo frame della pagina. Le asserzioni del drammaturgo possono essere utilizzate con ElementHandles frame_onee headingper scrivere asserzioni Pytest.

Frame annidati

Playwright fornisce un metodo aggiuntivo per selezionare i fotogrammi all'interno di iframe esistenti utilizzando la frame.child_frame[i]proprietà. La proprietà restituisce un elenco di tutti i frame secondari all'interno di un iframe sulla pagina. Simile alla page.frames[i]proprietà, è utile quando un iframe figlio non ha un attributo nameo univoco urlo un elemento genitore con una strategia di localizzazione univoca.

L'iframe figlio nella pagina DemoQA Nested Frames non ha strategie di localizzazione univoche, quindi dobbiamo usare la frame.child_frame[i]proprietà per selezionarlo.

L'iframe secondario contiene un bodyelemento e un singolo pelemento con il testo "Iframe figlio". Possiamo usarlo per creare asserzioni del drammaturgo al fine di costruire dichiarazioni di asserzioni Pytest.

Verifica

I test di cui sopra possono essere eseguiti nel tuo terminale utilizzando i seguenti comandi (se in uso pytest-playwright):

• pytest per una corsa senza testa
• pytest --headful per la testa

browser = {browser_type}.launch(headless=False)

La tua directory dovrebbe essere simile alla seguente al completamento di questo tutorial:

tests
    |__ test_frames.py
.gitignore
README.md
requirements.txt

Playwright consente agli ingegneri di scrivere codice di test chiaro e leggibile per trovare e agire contro iframe. A differenza dei concorrenti di Playwright nello spazio dell'automazione, gli ingegneri non hanno bisogno di scrivere codice personalizzato o tenere traccia della concentrazione del conducente quando lavorano con elementi di frame in linea.

Jonathan Thompson è un Senior Quality Engineer specializzato nell'automazione dei test. Attualmente risiede a Raleigh, NC con sua moglie e un Goldendoodle di nome Winston. Puoi connetterti con lui su LinkedIn o seguirlo su Twitter ( @jacks_elsewhere ) o Github ( ThompsonJonM ).