Tutorial: Como rodar testes no Safari com Cypress

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:

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

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.

• Cypress básico
• Cypress intermediário
• Cypress avançado
• Boas práticas em automação de testes com Cypress
• Testes end-to-end com Cypress
• Testes de regressão visual com Cypress e Percy (básico)

👋  Até a próxima e bons testes!