Skip to content

Latest commit

 

History

History
86 lines (56 loc) · 4.05 KB

0.md

File metadata and controls

86 lines (56 loc) · 4.05 KB
Raw

Pré-requisitos

Antes de começar, garanta que os seguintes sistemas estejam instalados em seu computador.

  • git (estou usando a versão 2.26.2 enquanto escrevo esta aula)
  • Node.js (estou usando a versão v14.15.4 enquanto escrevo esta aula)
  • NPM (estou usando a versão 6.14.11 enquanto escrevo esta aula)

Obs.: Recomendo utilizar as mesmas versões, ou versões mais recentes dos sistemas citados acima.

Obs. 2: Ao instalar o Node.js o NPM é instalado automaticamente.

Obs. 3: Para verificar as versões do git, Node.js e NPM instaladas em seu computador, execute o comando git --version && node --version && npm --version no seu terminal de linha de comando.

Obs. 4: Na lista de requisitos acima, deixei links para encontrar os instaladores, no caso de não tê-los instalados ainda.

Clonando o projeto 🐑

Abra o navegador, acesse a URL https://github.com/wlsf82/curso-cypress-avancado, clique no botão Code, escolha uma opção de clone (HTTPS ou SSH), copie o link de clone do projeto, e em seu terminal de linha de comando (em uma pasta onde você armazene seus projetos de software), execute o comando git clone [cole-o-link-copiado-aqui].

Após o clone do projeto, acesse o diretório recém clonado (ex.: cd curso-cypress-avancado/).

Dentro do diretório curso-cypress-avancado/ você terá os sub-diretórios .git/ (diretório oculto), cypress/ e lessons/, e os arquivos .gitignore (arquivo oculto), cypress.json, LICENSE, package-lock.json, package.json e README.md.

Instalação das dependências de desenvolvimento

Com o projeto clonado a partir do GitHub, é hora de instalarmos suas depedências de desenvolvimento.

Visto que tais dependências já estão listadas no arquivo package.json, basta executar o comando npm install (ou npm i - versão curta) na raiz do projeto.

🧙 Este comando irá baixar o cypress, o cypress-localstorage-commands, o faker, e o standardjs, visto que estes estão listados na seção de devDependencies.

Obs. 5: ⚠️ Ao final do curso deixo o link para um vídeo no Canal TAT no YouTube demonstrando como fazer o upgrade para uma versão mais recente do Cypress (v10+).

Execute o comando npm test (ou npm t - versão curta) para garantir que tudo está funcionando como deveria. Se tudo ocorrer conforme o esperado, você deve obter um resultado como o seguinte.

> cypress run


...

  Running:  hackerStories.spec.js                                                           (1 of 1)


  Hacker Stories
    ✓ shows the footer (1776ms)
    List of stories
      - shows the right data for all rendered stories
      ✓ shows the next twenty stories after clicking "More" (1215ms)
      ✓ shows 20 stories, I dismiss one, then it shows one less (658ms)
      Order by
        - orders by title
        - orders by author
        - orders by comments
        - orders by points
      Errors
        - shows "Something went wrong ..." in case of a server error
        - shows "Something went wrong ..." in case of a network error
    Search
      ✓ types and hits ENTER (1388ms)
      ✓ types and clicks the submit button (1125ms)
      Last searches
        ✓ searches via the last searched term (1807ms)
        ✓ shows a max of 5 buttons for the last searched terms (2246ms)


  7 passing (10s)
  7 pending


  ...

Informações adicionais

  • O cypress é o framework de testes o qual vou te ensinar algumas funcionalidades avançadas
  • O cypress-localstorage-commands vamos utilizar para acessar o localStorage do browser durante alguns dos testes
  • O faker iremos utilizar em um dos testes para a geração de dados randômicos
  • E o standardjs será utilizado para seguirmos um estilo de codificação padrão (tal como o uso de aspas simples em vez de aspas duplas, identação com 2 espaços, final de linha sem ponto-e-vírgula, etc.)

Legal, os pre-requisitos estão prontos. ☑️

Vá para a aula 1 para conhecer a aplicação em teste e os desafios que te esperam.