doc: Add write real test section into writing your first test page

pages/getting-started/writing-your-first-test.md

@@ -125,3 +125,151 @@ Expect vem do [Chai](http://www.chaijs.com/).
 alguma familiaridade e conhecimento prévio. Mas se não tiver, tudo bem.
 
 ## Escreva um teste real
+
+Um teste sólido geralmente cobre 3 fases:
+
+1. Configurar o estado da aplicação
+2. Realizar uma ação
+3. Fazer uma asserção sobre o resultado da ação
+
+Também conhecido pela tríade "Given, When, Then", ou "Arrange, Act, Assert". Mas a ideia é: 
+primeiro a aplicação é colocada em um estado específico, então uma ação é realizada na 
+aplicação, o que causa uma mudança, e finalmente o resultado da apicação é checado.
+
+Hoje, vamos ver esses passos de perto e mapeá-los claramente em comandos do Cypress:
+
+1. Visitar uma página web.
+2. Consultar um elemento.
+3. Interagir com o elemento.
+4. Verificar o conteúdo da página.
+
+### Passo 1: Visitar uma página web
+
+[//]: <> (TODO - Adicionar link Kitchen Sink quando for traduzido)
+Primeiro, vamos visitar uma página web. Neste exemplo vamos usar a aplicação 
+[Kitchen Sink](https://docs.cypress.io/examples/examples/applications.html#Kitchen-Sink)
+para que você possa experimentar o Cypress sem se preocupar em procurar uma página para 
+testar.
+
+Podemos passar a URL que queremos visitar para o `cy.visit()`. Vamos substituir nosso teste 
+anterior pelo teste abaixo que de fato visita uma página:
+
+```javascript
+describe('My First Test', () => {
+  it('Visits the Kitchen Sink', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})
+```
+
+Salve o arquivo e retorne ao Cypress Test Runner. Você vai perceber algumas coisas:
+
+[//]: <> (TODO - Adicionar Command Log e Pré visualização links)
+
+1. O [Log de Comandos](https://docs.cypress.io/guides/core-concepts/test-runner.html#Command-Log)
+agora exibe a nova ação `visit`.
+2. A aplicação Kitchen Sink foi carregada no painel de 
+[pré visualização da aplicação](https://docs.cypress.io/guides/core-concepts/test-runner.html#Overview).
+3. O teste está verde, mesmo não tendo nenhuma asserção.
+4. O `visit` exibe um estado pendente em azul até que a página termine de carregar.
+
+Se essa solicitação tivesse retornado com um código de status diferente de 2xx, como 404 ou 500, 
+ou se houvesse um erro de JavaScript no código do aplicativo, o teste teria falhado.
+
+[Vídeo de exemplo](https://docs.cypress.io/img/snippets/first-test-visit-30fps.mp4).
+
+```markdown
+Teste apenas aplicações que você controla
+
+Embora neste guia estamos testando nossa aplicação exemplo, você não deve testar aplicações que você 
+não controla. Por quê?
+
+1. São passíveis de mudanças a qualquer momento, o que pode quebrar os testes.
+2. Podem fazer testes A/B o que torna impossível ter resultados consistentes.
+3. Podem detectar que o usuário é um script e bloquear o acesso (como o Google faz).
+4. Podem ter funcionalidades de segurança habilitadas que previne o Cypress de funcionar corretamente.
+
+O ponto do Cypress é ser uma ferramente de uso diário para construir e testar suas próprias aplicações.
+
+O Cypress não é uma ferramenta de automação de propósito geral. É pouco adequado para scripts em sites que
+estão em produção, e não estão sob seu controle.
+```
+
+### Passo 2: Consultar um elemento
+
+Agora que temos a página web carregada, precisamos fazer algo nela. Porque não clicamos em um link?
+Parece ser fácil, vamos ver qual deles gostamos... que tal `type`?
+
+Para encontrar esse elemento pelo seu conteúdo, usamos `cy.contains()`.
+
+Vamos adicionar isso em nosso teste e ver o que acontece:
+
+```javascript
+describe('My First Test', () => {
+  it('finds the content "type"', () => {
+    cy.visit('https://example.cypress.io')
+
+    cy.contains('type')
+  })
+})
+```
+
+Agora o teste deve exibir o comando `CONTAINS` e ainda estar verde.
+
+[//]: <> (TODO - Adicionar link Default Assertions quando for traduzido)
+Mesmo sem adicionar uma asserção, sabemos que está tudo certo! Isso acontece pois muitos dos comandos
+do Cypress são construídos para falhar caso não encontram o que é esperado. Isso é conhecido como uma
+[Asserção Padrão](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Default-Assertions).
+
+Para confirmar, substitua `type` por qualquer palavra que não esteja na página, como `hype`.
+Perceba que o teste falha, mas só depois de 4 segundos!
+
+Entende o que o Cypress está fazendo? Automaticamente espera e tenta novamente pois é esperado que
+eventualmente o elemento será encontrado no DOM. O teste não falha imediatamente.
+
+![Teste com falha](https://docs.cypress.io/img/guides/first-test-failing-contains.529e740a.png)
+
+[//]: <> (TODO - Adicionar link Debugging quando for traduzido)
+
+> Tomamos o cuidado de escrever centenas de mensagens de erro personalizadas que tentam explicar claramente
+o que deu errado no Cypress. Nesse caso, o Cypress atingiu o tempo limite tentando encontrar o texto hype
+em toda a página. Para ler mais sobre a exibição do erro, leia sobre
+[Erros de depuração](https://docs.cypress.io/guides/guides/debugging.html#Errors).
+
+Antes de adicionar outro comando - vamos consertar esse teste. Substitua `hype` por `type`.
+
+[Vídeo de exemplo](https://docs.cypress.io/img/snippets/first-test-contains-30fps.mp4)
+
+### Passo 3: Clicar em um elemento
+
+Ok, agora queremos clicar no link que encontramos. Como fazer isso? Adicione o comando `.click()`
+no final do comando anterior, como abaixo:
+
+```javascript
+describe('My First Test', () => {
+  it('clicks the link "type"', () => {
+    cy.visit('https://example.cypress.io')
+
+    cy.contains('type').click()
+  })
+})
+```
+
+É quase possível ler o teste como uma história! O Cypress chama isso de encadeamento e comandos são
+encadeados para contruir testes que realmente expressam o que a aplicação faz de forma declarativa.
+
+Note também que o painel da aplicação foi atualizado depois do clique, abrindo o link e mostrando a
+página de destino.
+
+Agora podemos fazer uma asserção nessa nova página!
+
+[Vídeo de exemplo](https://docs.cypress.io/img/snippets/first-test-click-30fps.mp4)
+
+[//]: <> (TODO - Adicionar link Triple Slash Directives quando for traduzido)
+
+> Você pode ver o IntelliSense em seus arquivos de teste ao adicionar uma única linha de comentário especial.
+Leia sobre isso [aqui](https://docs.cypress.io/guides/tooling/IDE-integration.html#Triple-slash-directives).
+
+### Passo 4: Fazer uma asserção
+
+[Voltar para o topo](#escrevendo-o-primeiro-teste)