Suporte ao WebKit na versão 10.8.0 do Cypress

Nesta pitada de Cypress, vou te mostrar como é simples executar scripts de testes automatizados contra o navegador Safari, utilizando Cypress.

Na versão 10.8.0, o Cypress lançou a funcionalidade experimental que dá suporte ao WebKit (motor web utilizado pelo navegador Safari).

Para facilitar o entendimento, vou usar a versão final do projeto do curso de testes automatizados com Cypress básico – da Escola TAT – no branch em que migrei o código para a versão 10 do Cypress.

Se quiseres acompanhar, faça o clone do projeto, conforme demonstrado abaixo:

git clone git@github.com:wlsf82/cypress-basico-v2.git

Observação: Se preferir, faça o clone via HTTPS, em vez de SSH.

Em seguida, acesse o diretório do projeto recém clonado e faça o checkout para o branch migrate-to-cypress-v-10.

cd cypress-basico-v2/
git checkout migrate-to-cypress-v-10

No branch atualizado para a versão 10, atualize o Cypress para a versão 10.8.0, conforme demonstrado abaixo:

npm i cypress@10.8.0 -D

Com isso, a versão do Cypress é atualizada na seção de devDependencies do arquivo package.json, além da atualização do arquivo package-lock.json.

Em seguida, instale o package playwright-webkit, também como dependência de desenvolvimento, conforme desmonstrado abaixo:

npm i playwright-webkit@1.26.0 -D

É isso mesmo, enquanto esta é uma funcionalidade experimental, o Cypress utiliza a implemtanção do seu “concorrente”, o Playwright, visto que este também é um projeto de código aberto. Que sacada, hein?

Observação 2: Para garantir que poderás reproduzir os mesmos resultados que eu (enquanto escrevia este tutorial), utilizei uma versão específica do playwright-webkit (1.26.0).

Após a instalação do playwright-webkit, uma nova entrada é adicionada à seção de devDependencies do arquivo package.json, além da atualização do arquivo package-lock.json.

Com o Cypress atualizado e o playwright-webkit instalado, atualize o arquivo de configuração do Cypress (cypress.config.js), habilitando a propriedade experimentalWebKitSupport, conforme demonstrado abaixo.

const { defineConfig } = require('cypress')

module.exports = defineConfig({
viewportHeight: 880,
viewportWidth: 1280,
e2e: {
setupNodeEvents(on, config) {},
},
experimentalWebKitSupport: true,
})

Atenção à linha de código destacada.

Agora, atualize a seção de scripts do arquivo package.json, adicionando um novo script, conforme abaixo:

"scripts": {
...,
"test:webkit": "cypress run --browser webkit"
},

Por fim, execute o novo script, aguarde pelo fim da execução e abra o vídeo gerado automaticamente pelo Cypress, para ver os testes utilizando o motor WebKit.

# Execute o seguinte na linha de comando:

npm run test:webkit

Ao final da execução, você deve ter um resultado como este:

cypress-basico-v2-webkit

Veja a execução no gif abaixo e perceba o WebKit sendo utilizado, vísivel no canto superior direito do test runner.

CAC-TAT.cy.js

E conforme prometido no início deste post, agora, de forma simples, podemos executar testes automatizados em um dos navegadores mais utilizados pelos usuários da rede mundial de computadores.

A web evoluiu. Finalmente os testes também.

Cypress.io


Acesse o código completo demonstrado neste tutorial através deste link.


E aí, o que achou desta “pitada de Cypress”?

Deixa um comentário.


Ficou curioso(a) e quer aprender mais sobre automação de testes com Cypress? Conheça meus cursos no Udemy.


👋  Até a próxima e bons testes!

Um comentário em “Tutorial: Como rodar testes no Safari com Cypress

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s