Quadros embutidos (mais comumente conhecidos como iframe) são usados ​​para exibir conteúdo de terceiros ou incorporar novas páginas ao conteúdo de uma página da web. No mundo da automação de teste, pode ser difícil trabalhar com iframes.

O Selenium requer que um engenheiro use o switch_tométodo para mudar o foco do motorista para o próprio quadro. Depois de realizar as ações, o driver precisa ser redirecionado para a página principal usando switch_to.default_content(). Embora não seja um fluxo de trabalho difícil, certamente pode ser um incômodo continuar alternando entre os quadros sempre que uma ação precisa ser executada.

O Cypress não lida nativamente com iframes. Isso se deve ao fato de que o cyprefixo usado em todos os comandos Cypress percorrerá o DOM até que um #documentseja localizado. Uma vez localizado, o percurso terminará. O código personalizado (ou o plugin cypress-iframe ) é necessário para usar o Cypress com iframes.

O Playwright, por outro lado, torna o trabalho com iframes simples e intuitivo. Neste tutorial, aprenderemos como usar o Playwright com iframes convencionais e iframes aninhados. Usaremos as páginas DemoQA Frames e Nested Frames como o foco de nossos testes.

Começando

Você precisará instalar os seguintes pacotes para este tutorial:

• Pytest
• Dramaturgo

Métodos Seletores

O Playwright fornece aos engenheiros três opções para selecionar iframes:

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

A page.frames[i]propriedade deve ser usada em instâncias onde um iframe não tem atributos exclusivos ou elemento pai. A propriedade irá listar todos os quadros ativos na página que podem ser indexados para um quadro específico. Eu não recomendaria usar esse método, a menos que você não tenha acesso ao código-fonte do aplicativo e não possa usar os dois métodos anteriores.

Foco em um Iframe

A página DemoQA Frames contém dois iframes, um no centro esquerdo da página e um no canto inferior esquerdo.

Os iframes na página DemoQA Frames não têm urlatributos exclusivos , nem apresentam nameatributos. Usaremos o element_handle.content_frame()método para localizá-los, pois eles possuem seletores exclusivos para seus elementos pais.

Agora temos acesso ao primeiro quadro da página. As asserções do dramaturgo podem ser usadas com o ElementHandles frame_onee headingpara escrever asserções do Pytest.

Frames aninhados

O Playwright fornece um método adicional para selecionar quadros dentro de iframes existentes usando a frame.child_frame[i]propriedade. A propriedade retorna uma lista de todos os quadros filhos em um iframe na página. Semelhante à page.frames[i]propriedade, isso é útil quando um iframe filho não tem um atributo nameou exclusivo url, ou um elemento pai com uma estratégia de localizador exclusivo.

O iframe filho na página DemoQA Nested Frames não tem nenhuma estratégia de localizador exclusiva, portanto, devemos usar a frame.child_frame[i]propriedade para selecioná-la.

O iframe filho contém um bodyelemento e um único pelemento com o texto “Iframe filho”. Podemos usar isso para criar asserções do Playwright a fim de construir declarações de asserções do Pytest.

Verificação

Os testes acima podem ser executados em seu terminal usando os seguintes comandos (se estiver usando pytest-playwright):

• pytest para uma corrida sem cabeça
• pytest --headful para cabeça cheia

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

Seu diretório deve ser semelhante ao seguinte após a conclusão deste tutorial:

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

O Playwright permite que os engenheiros escrevam um código de teste simples e legível para encontrar e agir contra iframes. Ao contrário dos concorrentes do Playwright no espaço de automação, os engenheiros não precisam escrever código personalizado ou controlar o foco do driver ao trabalhar com elementos de quadro em linha.

Jonathan Thompson é engenheiro sênior de qualidade especializado em automação de testes. Ele atualmente reside em Raleigh, NC com sua esposa e um Goldendoodle chamado Winston. Você pode se conectar com ele no LinkedIn ou segui-lo no Twitter ( @jacks_elsewhere ) ou no Github ( ThompsonJonM ).