Automation Testing

O que é Microsoft Playwright JS Automation (2021 Tutorial)

Antes de entrarmos no Tutorial de automa√ß√£o JS do Microsoft Playwright, gostaria de responder a uma pergunta que freq√ľentemente me fazem.

Por que a automação de teste baseada em navegador é tão complicada, independentemente de qual instrumento de teste eu uso?

Quais s√£o os desafios dos aplicativos de navegador modernos?

Os aplicativos da web de hoje tendem a ser extremamente ricos e responsivos.

Microsoft Playwright automatizando o desenvolvimento moderno da Web

Ali√°s, os desenvolvedores est√£o construindo principalmente aplicativos de p√°gina √ļnica que fazem muito mais em uma guia do navegador do que os aplicativos da web costumavam fazer h√° uma dezena.

O comportamento altamente responsivo dos aplicativos da web é sustentado principalmente pelo tratamento de eventos assíncronos.

Por exemplo, digamos que você esteja escolhendo um botão específico em uma página e, em seguida, um tanto aconteça na página.

Esses aplicativos da web raramente são isolados e geralmente envolvem seus serviços de back-end conversando pela rede.

Existem muitos eventos assíncronos ocorrendo dentro de um aplicativo, e ser capaz de automatizar essas coisas de maneira previsível é difícil.

Você pode se deparar com casos em que uma rede leva um pouco mais de tempo e proíbe a IU de estar pronta para um script interagir com ela porque ainda está carregando nos bastidores.

Ou você pode estar esperando uma novidade janela pop-up ser liberada e pode ter que mudar de contexto e automatizar essa janela.

Existem muitos cenários porquê esses envolvidos na construção de aplicativos da web hoje.

Essa natureza assíncrona cria dificuldade para qualquer tipo de automação funcionar de maneira confiável, e é por isso que tantos desenvolvedores e testadores estão lutando com a automação.

√Č c√° que toda a teoria de fragilidade ou descama√ß√£o come√ßa a entrar em foco.

Evidente, a maioria dos frameworks e drivers existentes estão fazendo o que podem para melhorar as coisas, mas dados os requisitos dos aplicativos da web hoje, é um problema difícil.

Por justificação disso, o Microsoft Playwright JS A equipe percebeu a premência de uma instrumento que pudesse seguir e mourejar com essa novidade abordagem de desenvolvimento web.

E daí é Playwright, e porquê ele pode ajudar nos desafios atuais de teste de desenvolvimento de software?

O que é Microsoft Playwright JS?

Microsoft Playwright JS é uma novidade livraria de automação em vários navegadores de código lhano, baseada em JavaScript, para testes ponta a ponta.

O objetivo do Playwright Node.js √© fornecer uma √ļnica API para desenvolvedores e testadores para automatizar seus aplicativos da web nos tr√™s principais motores de navegador de hoje:

Arjun Attam, o gerente de programa da equipe Playwright JS da Microsoft, me disse que eles criaram o Playwright explicitamente para o espaço de automação da web. O objetivo deles era ajudar a introduzir a automação rápida e confiável o suficiente para atender às necessidades da web moderna.

Voc√™ pode estar pensando: “Ummm … isso parece muito com o Titereiro”.

E você estaria manifesto Рparcialmente.

Mas é o seguinte.

 

Dramaturgo Vs Puppeteer?

O dramaturgo da Microsoft começou porquê um fork do Puppeteer.

Para quem não sabe, o Puppeteer é uma livraria de nós para automatizar os navegadores chromium com a API JavaScript.

Em muitos aspectos, porém, o Playwright tem uma filosofia dissemelhante por trás disso.

Por um lado, ele foi projetado para testes e2e. √Č evidente quando se olha porqu√™ a equipe do Playwright criou sua API que foi feito com desenvolvedores e testadores em mente.

Arjun explicou que eles conversaram com um grupo de desenvolvedores e testadores usando várias ferramentas de automação em vários navegadores para automatizar seus aplicativos da web no contexto de testes ponta a ponta. O que eles descobriram foi que havia lacunas na capacidade de executar esses testes em vários navegadores.

Eles também estavam procurando por uma API mais direta que simplificasse a curva de estágio para usar a automação.

Portanto, sua equipe criou o Playwright para se concentrar nesses problemas de teste do e2e desde o início.

Mas porquê?

Playwright Js é uma instrumento de teste da Web?

O dramaturgo JS tenta abordar o problema introduzindo padr√Ķes de lucidez que tornam as coisas f√°ceis logo que saem da caixa. Ele tamb√©m inclui os recursos necess√°rios para cen√°rios mais avan√ßados.

Quando voc√™ cria e executa um script Playwright, ele passa por uma s√©rie de listas de verifica√ß√£o e garante que a IU est√° pronta para o teste executar as a√ß√Ķes.

Uma vez que usuários, estamos naturalmente programados para esperar por essas coisas, mas muitas ferramentas exigem que você codifique para esses cenários. Em vez disso, o Playwright tenta mourejar com esses tipos de problemas para você involuntariamente.

Exemplos pr√°ticos de tutoriais em JS da Microsoft Playwright

Por exemplo, as a√ß√Ķes no Microsoft Playwright JS aguardam involuntariamente que os elementos estejam prontos antes que seu teste interaja com eles.

Uma vez que esperar por um elemento usando o dramaturgo

Esperar que um elemento esteja pronto é um padrão típico que os desenvolvedores precisam redigir em seu código explicitamente.

Mas o Playwright faz isso involuntariamente para você nos bastidores.

Esse recurso torna mais f√°cil redigir testes e, por sua vez, pode torn√°-los mais confi√°veis.

Ele também foi projetado para permitir que você execute em todos os principais navegadores (Chromium, Firefox, WebKit, et al.)

Aliás, eles adicionaram recursos de teste mais novos para oferecer suporte a coisas porquê uma API para LifeE- de arquivos e suporte para mourejar melhor com iframes fora do processo, isolamento de site e contextos de navegador.

Quais s√£o os recursos com suporte do Microsoft Playwright JS?

  • Voc√™ pode fabricar cen√°rios que abrangem v√°rias p√°ginas, dom√≠nios e iframes
  • Espera involuntariamente que os elementos estejam prontos para poupar tempo antes de executar a√ß√Ķes (porqu√™ clicar, preencher)
  • Voc√™ pode interceptar a atividade de rede para fazer stub e simular solicita√ß√Ķes de rede
  • O Playwright JS pode at√© emular dispositivos m√≥veis, geolocaliza√ß√£o, permiss√Ķes
  • Esta instrumento oferece suporte a componentes da web por meio de seletores de penetra√ß√£o de sombra
  • Permite que voc√™ acesse eventos de ingresso nativos para mouse e teclado
  • Pode ser usado para fazer upload e download de arquivos

O objetivo desta instrumento é fornecer uma API maleável com recursos suficientes para que você possa evitar problemas comuns que causam fragilidade ou instabilidade sem ter que antecipá-los de forma programática.

Outra escolha de design foi centrar o Playwright em torno da noção de contextos do navegador.

Quais idiomas o Playwright JS suporta?

O Playwright originalmente começou porquê uma livraria Javascript Node.js, mas agora oferece suporte a várias linguagens de programação porquê:

Quais s√£o os contextos do navegador Microsoft Playwright?

Os contextos do navegador s√£o ambientes isolados constru√≠dos em uma √ļnica inst√Ęncia do navegador. Eles tornam veros√≠mil fabricar testes simult√Ęneos que s√£o totalmente separados uns dos outros e executados em paralelo ao contexto do navegador.

Os contextos do navegador tamb√©m permitem emular cen√°rios em que voc√™ est√° alterando a janela de visualiza√ß√£o do dispositivo, as permiss√Ķes ou as localiza√ß√Ķes GEO em v√°rias p√°ginas.

Mais uma vez, o objetivo é fazer com que o Playwright atenda às necessidades dos desenvolvedores e testadores para a geração de testes ponta a ponta.

Uma vez que executar testes de dramaturgo em paralelo

O contexto do navegador realmente entra em jogo ao discutir a paralelização.

Ao automatizar um aplicativo da web, voc√™ est√° usando uma inst√Ęncia do navegador. Voc√™ pode iniciar essas inst√Ęncias do navegador; voc√™ pode fechar essas inst√Ęncias do navegador.

O Playwright introduz um no√ß√£o chamado contextos do navegador, que √© fundamental para o prot√≥tipo de realiza√ß√£o. Portanto, uma √ļnica inst√Ęncia do navegador pode ser usada para fabricar contextos de navegador m√ļltiplos, simult√Ęneos e isolados.

Esses contextos de navegador são extremamente rápidos e baratos de fabricar, portanto, você pode fabricar centenas de contextos de navegador e pode fechá-los conforme necessário.

Cada contexto de navegador também pode hospedar várias páginas da web.

Por exemplo, se voc√™ estiver usando a √ļnica inst√Ęncia do WebKit e estiver criando um contexto de navegador em cima disso e executando seus scripts dentro desse contexto de navegador.

Agora, porqu√™ esses contextos de navegador s√£o isolados e simult√Ęneos, voc√™ pode realmente executar testes paralelos com uma √ļnica inst√Ęncia do WebKit em v√°rios contextos.

Tutorial do dramaturgo sobre porquê usar janelas de exibição

Cada contexto pode ter uma janela de visualização do navegador específica.

Ele pode ter uma formato de permiss√Ķes espec√≠fica. Pode ter geolocaliza√ß√£o padr√£o.

 

Isso significa que ele pode fabricar um contexto de navegador para a janela de visualiza√ß√£o do iPhone com geolocaliza√ß√£o definida para zoom, por exemplo, dando a ele um conjunto espec√≠fico de permiss√Ķes e executando seu aplicativo da web dentro desse envolvente de emula√ß√£o.

Voc√™ provavelmente pode imaginar um cen√°rio em que deseja executar seus testes em uma matriz de dispositivos m√≥veis, desktops, janelas de visualiza√ß√£o e geolocaliza√ß√£o com diferentes permiss√Ķes.

Portanto, voc√™ pode remoinhar um contexto de navegador para cada um desses par√Ęmetros e execut√°-los em paralelo.

Normalmente, uma √ļnica inst√Ęncia do navegador pode ser faceta para iniciar e fechar, mas pode ser reutilizada em ambientes isolados por contextos do navegador. Voc√™ pode usar essa t√©cnica para executar seus testes em paralelo em v√°rios conjuntos de cen√°rios de emula√ß√£o.

Leste recurso est√° marchetado no Playwright.

Suporta cenários que requerem casos de teste de autenticação

Outra coisa legítimo que você pode fazer com esse recurso é emular, em um navegador, o contexto das credenciais de autenticação.

Por exemplo, muitos aplicativos usam cookies do navegador para definir o estado de autenticação.

Usando dois contextos de navegador diferentes na mesma inst√Ęncia do navegador, onde voc√™ tem duas credenciais de autentica√ß√£o diferentes.

Todos os aplicativos t√™m um tino de permiss√Ķes e fun√ß√Ķes de usu√°rio.

Portanto, você pode fazer login porquê gestor em um contexto e fazer login porquê um usuário suposto no outro contexto e, essencialmente, executar o teste em paralelo entre essas duas credenciais de autenticação diferentes.

Novamente, o principal c√° √© reutilizar a inst√Ęncia, o que significa que voc√™ n√£o perder√° tempo iniciando um novo navegador ou fechando-o e recriando-o continuamente.

Você pode fazer essa operação faceta de iniciar antes que seus testes sejam executados e, essencialmente, fabricar novos contextos que são extremamente rápidos e baratos de fabricar e destruir no contexto de seus testes.

Falando em executar testes em paralelo, isso dá suporte à integração e entrega contínuas?

Uma vez que usar o Microsoft Playwright JS com pipelines de CI / CD

Para facilitar, a equipe de Arjun lançou muitas receitas que estão disponíveis em vários provedores de CI. Portanto, eles têm documentação sobre porquê estrear com:

Essas ferramentas são muito populares e fazem secção da experiência mais ampla do desenvolvedor com o uso do Playwright.

Para facilitar o evento de esforços de CI / CD de automação de teste, eles também lançaram uma imagem docker. Portanto, se você não estiver usando um desses provedores de CI, pode usar um contêiner do docker para estrear a implantação na nuvem do Playwright com essa imagem do docker.

Aliás, com o lançamento de uma ação do GitHub para o Playwright, se você não quiser reprofundar na formato e tiver um tanto que funcione imediatamente, esta é uma ótima opção.

Usando as a√ß√Ķes do GitHub e as a√ß√Ķes do GitHub do Playwright adicionadas ao YAML da sua a√ß√£o, voc√™ pode estrear rapidamente a executar o Playwright no CI.

O que é o gravador de teste Playright JS

Embora atualmente n√£o venha com um Testim, recentemente criou um gratuito para ele chamado Playground.

Um dos desafios de usar o Playwright e o Puppeteer é que você precisa redigir testes em código, o que leva tempo e esforço para convencionar.

As solu√ß√Ķes de automa√ß√£o de teste sem c√≥digo podem permitir o registro r√°pido das jornadas do usu√°rio, que podem ser configuradas em um editor ou c√≥digo.

Essa gravação gratuita elimina muitas das tarefas mundanas e repetitivas de redigir testes.

Isso acelera a geração de teste para seguir os ciclos de lançamento cada vez menores e ajuda a erigir a cobertura de teste necessária para prometer a qualidade.

Oren Rubin, fundador da Testim, explica:

Oren também menciona alguns contras do uso da instrumento de navegador sem cabeça Playwright Node.js em sua sessão TestGuild Meetup

  • Sem suporte para IE 11
  • atualmente nenhuma solu√ß√£o de rede f√°cil
  • sem sistema de plugins,
  • n√£o muitas integra√ß√Ķes,
  • API ainda est√° mudando – eles acabaram de compreender a vers√£o 1.0 recentemente

Ali√°s, descobri que o pessoal da Checkly lan√ßou recentemente um gravador sem cabe√ßa com extens√£o Chome para gravar as intera√ß√Ķes do navegador e gerar um script Puppeteer ou Playwright

Pensamentos finais

Uma vez que você viu, o Microsoft Playwright foi desenvolvido para ser extremamente modular e focado em ser um driver de automação que funciona muito com outras partes de sua rima de testes.

Confira no Github, experimente e me diga o que você achou.

 

Leave a Reply

O seu endereço de email não será publicado. Campos obrigatórios marcados com *