Scripts automatizados nivel junior #1

gabriel-e2e · 2024-10-07T22:23:05Z

Scripts Automatizados Usando Cypress - Nível Júnior, aplicação web EngageSphere.

ldasilvaNZ11

Parabens Gabriel pelo belo trabalho.

Conseguistes implementar testes de API e GUI muito rapidamente. Os detalhes os quais chamei a atenção serão coisas que iras desenvolver e aprender ao longo do curso da turma 3.

Um ponto o qual eu gostaria de destacar para o futuro seria de quando criares a Pull Request, podes incluir na descrição da mesma informações que ajudem o revisor a ganhar um contexto das mudanças propostas em codigo, como tambem algumas coisas que tenhas tido duvidas ou dificuldade em implementar e que talvez precisem de mais atencao do revisor 👍

Desculpe se algum feedback meu nao faça sentido, ou vai de encontro com o que tenhas aprendido, pois eu tambem estou aprendendo e evoluindo revisando o teu codigo. Nesse caso, podemos discutir o mesmo ate encontrar a solucao mais apropriada. Vamos juntos, e espero poder revisar teu codigo novamente em breve! Obrigado!

ldasilvaNZ11 · 2024-10-09T09:15:30Z

backend/package.json

@@ -10,6 +10,7 @@
  },
  "dependencies": {
    "@faker-js/faker": "^9.0.3",
+    "backend": "file:",


Fala Gabriel, qual seria a necessidade dessa dependencia backend?

Acredito que ela não seja necessaria, pois a aplicacao nao necessitaria dela para rodar.

Aqui vai uma breve explicação:
No contexto de módulos npm, a principal diferença entre dependencies e devDependencies está no momento em que os pacotes são necessários:

dependencies: São os pacotes essenciais que o projeto precisa para funcionar em produção. Esses módulos são instalados quando o projeto é executado em ambientes finais, como servidores de produção ou em builds de lançamento. São usados diretamente pelo código do projeto durante a execução (ex.: React).

devDependencies: São pacotes usados apenas durante o desenvolvimento e testes do projeto. Incluem ferramentas como linters, frameworks de testes e geradores de documentação. Esses módulos não são necessários em produção e, portanto, não são instalados quando o projeto é implementado nesse ambiente, exceto se forem explicitamente requisitados.
Em resumo, dependencies são para a execução do projeto, enquanto devDependencies são para o desenvolvimento do mesmo.

Só se resolver conversas que foram ajustadas.

Esta mudança não deveria ter ocorrido e portanto, recomendo reverter a mudança.

O mesmo vale para o arquivo backend/package-lock.json.

Eu apago, e essa linha simplesmente volta sozinha

Outro aluno teve o mesmo problema devido a uma extensão da RedHad no VSCode.

Você possui tal extensão instalada? Caso sim, tente desisntalar e veja se resolve o problema.

ldasilvaNZ11 · 2024-10-09T09:21:17Z

package.json

@@ -30,5 +30,8 @@
      "last 1 firefox version",
      "last 1 safari version"
    ]
+  },
+  "dependencies": {
+    "EngageSphere-Test-Design-Masterclass-Turma-3": "file:"


Aqui o mesmo principio se aplicaria novamente, nao seria necessario estabelecer isso como uma dependencia.

Mesma coisa aqui.

eu apaguei, mas ele retorna, misteriosamente. Dei uma pesquisada parece algum plugin faz isso não sei dizer com certeza

ldasilvaNZ11 · 2024-10-09T09:23:07Z

frontend/package.json

@@ -2,6 +2,7 @@
  "name": "frontend",
  "version": "0.1.0",
  "dependencies": {
+    "frontend": "file:",


Aqui tambem, eu removeria esse dependencia pois ela nao se enquadra na seguinte definicao:

dependencies: São os pacotes essenciais que o projeto precisa para funcionar em produção. Esses módulos são instalados quando o projeto é executado em ambientes finais, como servidores de produção ou em builds de lançamento. São usados diretamente pelo código do projeto durante a execução (ex.: React).

De novo. Só resolva conversas onde a sugestão foi implementada.

Como este não é o caso, o review do @ldasilvaNZ11 ainda vale.

eu apaguei, mas ele retorna, misteriosamente. Dei uma pesquisada parece algum plugin faz isso não sei dizer com certeza

cypress/support/e2e.js

cypress/support/commands.js

cypress/e2e/api.cy.js

cypress/e2e/e2e.cy.js

package.json

wlsf82

Fazer os ajustes conforme sugeridos pelo @ldasilvaNZ11.

wlsf82

Além dos review do @ldasilvaNZ11, deixei mais alguns pontos de melhoria os quais creio que lhe ajudarão a melhorar o design dos testes.

cypress.config.js

cypress/e2e/api.cy.js

cypress/e2e/e2e.cy.js

wlsf82

@gabriel-e2e, parabéns por mais uma rodada de testes com vários ajustes! 👏🏻

Deixei mais alguns comentários os quais creio que lhe ajudarão a melhorar ainda mais o design do testes.

Lembre-se de só enviar os ajustes para nova revisão após o encontro de amanhã. 😉

wlsf82 · 2024-10-18T21:24:00Z

backend/package.json

@@ -10,6 +10,7 @@
  },
  "dependencies": {
    "@faker-js/faker": "^9.0.3",
+    "backend": "file:",


Só se resolver conversas que foram ajustadas.

Esta mudança não deveria ter ocorrido e portanto, recomendo reverter a mudança.

O mesmo vale para o arquivo backend/package-lock.json.

cypress/e2e/e2e.cy.js

cypress/fixtures/clientes.json

cypress/support/commands.js

wlsf82 · 2024-10-18T21:39:57Z

frontend/package.json

@@ -2,6 +2,7 @@
  "name": "frontend",
  "version": "0.1.0",
  "dependencies": {
+    "frontend": "file:",


De novo. Só resolva conversas onde a sugestão foi implementada.

Como este não é o caso, o review do @ldasilvaNZ11 ainda vale.

wlsf82 · 2024-10-18T21:40:18Z

package.json

@@ -30,5 +30,8 @@
      "last 1 firefox version",
      "last 1 safari version"
    ]
+  },
+  "dependencies": {
+    "EngageSphere-Test-Design-Masterclass-Turma-3": "file:"


Mesma coisa aqui.

wlsf82

Muito bem @gabriel-e2e! 👏🏻

Deixei mais alguns comentários, os quais espero que agreguem ao seu conhecimento de design de testes automatizados.

Espero que tenha gostado da experiência de revisão de código da Test Design Masterlclass da TAT.

wlsf82 · 2024-10-30T20:10:19Z

.gitignore

@@ -11,6 +11,7 @@
 /cypress/downloads
 /cypress/screenshots
 /cypress/videos
+/cypress/fixtures


Esta pasta não deve ser adicionada ao .gitignore.

A pasta cypress/fixtures/ é parte da estrutura de pastas do Cypress e portanto não deve ser adicionada aqui.

Se você não estiver a utilizando, basta deletá-la e adicionar a configuração fixturesFolder: false no arquivo de configurações do Cypress (cypress.config.js).

wlsf82 · 2024-10-30T20:12:34Z

cypress/e2e/e2e.cy.js

+    })
+
+    it('Retorna à lista de clientes ao clicar no botão "Voltar"', () => {
+        cy.contains('button', 'View').should('be.visible').click()


Para simplificar, você pode remover a verificação intermediária.

Suggested change

cy.contains('button', 'View').should('be.visible').click()

cy.contains('button', 'View').click()

O Cypress já espera por elementos estarem visíveis antes de clicar neles, portanto, use tal abordagem somente quando necessário.

O mesmo vale para a linha abaixo.

wlsf82 · 2024-10-30T20:14:30Z

cypress/e2e/e2e.cy.js

+    })
+
+    it('Abre e fecha o messenger', () => {
+        cy.get('button[class^="Messenger_openCloseButton"]').should('be.visible').click()


Visto que você repete o seletor starts with em vários testes, que tal criar um comando customizado chamado getByClassThatStartsWith?

O mesmo seria implementado assim:

Cypress.Commands.add('getByClassThatStartsWith', classPart => { cy.get(`[class^="${classPart}"]`) })

E então, seria usado assim:

cy.getByClassThatStartsWith('Messenger_openCloseButton')

wlsf82 · 2024-10-30T20:15:32Z

cypress/e2e/e2e.cy.js

+
+    it('Abre e fecha o messenger', () => {
+        cy.get('button[class^="Messenger_openCloseButton"]').should('be.visible').click()
+        cy.get('h2').should('contain', 'How can we help you?')


Veja uma alternativa mais simples.

Suggested change

cy.get('h2').should('contain', 'How can we help you?')

cy.contains('h2, 'How can we help you?').should('be.visible')

A propósito, perceba a verificação pela visibilidade do elemento.

wlsf82 · 2024-10-30T20:16:26Z

cypress/e2e/e2e.cy.js

+        cy.get('button[class^="Messenger_openCloseButton"]').should('be.visible').click()
+        cy.get('h2').should('contain', 'How can we help you?')
+        cy.get('button[class^="Messenger_openCloseButton"]').should('be.visible').click()
+        cy.get('h2').should('not.contain', 'How can we help you?')


Aqui a verificação correta seria a seguinte:

Suggested change

cy.get('h2').should('not.contain', 'How can we help you?')

cy.contains('h2, 'How can we help you?').should('not.exist')

wlsf82 · 2024-10-30T20:17:34Z

cypress/e2e/e2e.cy.js

+        cy.get('button[class^="Messenger_openCloseButton"]').click()
+        cy.get('h2').should('contain', 'How can we help you?')
+        cy.get('#messenger-name').should('be.focused')
+        cy.get('#messenger-name').should('have.attr', 'required')


Em vez de repetir o cy.get, a linha acima podia ser assim:

cy.get('#messenger-name') .should('be.focused') .and('have.attr', 'required')

wlsf82 · 2024-10-30T20:18:12Z

cypress/e2e/e2e.cy.js

+        cy.get('h2').should('contain', 'How can we help you?')
+        cy.get('input[id="messenger-name"]').type('Seu Madruga')
+        cy.get('#email').type('madruguinha@gmail.com')
+        cy.get('#message').type('chiforinfola')


😆 chiforinfola

wlsf82 · 2024-10-30T20:20:05Z

cypress/fixtures/clientes.json

@@ -0,0 +1,22 @@
+[


Não vejo este fixture sendo usada em lugar nenhum.

Se este for o caso, recomendo deletá-la.

A propósito, esta não é a estrutura que o frontend espera.

A estrutura correta é esta.

cypress/support/commands.js

wlsf82 · 2024-10-30T20:25:04Z

cypress/support/e2e.js

@@ -0,0 +1 @@
+import './commands'


Suggested change

import './commands'

import './commands'

Recomenda-se deixar uma linha em branco ao final de cada arquivo.

Dessa forma, ferramentas como o GitHub não exibem o ícone de No newline at end of file.

Isso é uma boa prática e convenção a ser seguida.

Scripts automatizados nivel junior

579a04d

ldasilvaNZ11 self-assigned this Oct 9, 2024

ldasilvaNZ11 reviewed Oct 9, 2024

View reviewed changes

wlsf82 requested changes Oct 9, 2024

View reviewed changes

wlsf82 requested changes Oct 10, 2024

View reviewed changes

Revisoes PR da aula 1

5f6ac9e

gabriel-e2e closed this Oct 16, 2024

gabriel-e2e requested a review from wlsf82 October 16, 2024 20:38

gabriel-e2e reopened this Oct 18, 2024

wlsf82 requested changes Oct 18, 2024

View reviewed changes

gabriel-e2e added 2 commits October 28, 2024 11:37

Terceiro commit

675bfd1

terceira rodada

5a0ec97

gabriel-e2e requested review from wlsf82 and ldasilvaNZ11 October 28, 2024 17:13

codigo ajustado

eee3c92

wlsf82 requested changes Oct 30, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Scripts automatizados nivel junior #1

Scripts automatizados nivel junior #1

gabriel-e2e commented Oct 7, 2024

ldasilvaNZ11 left a comment •

edited

Loading

ldasilvaNZ11 Oct 9, 2024

wlsf82 Oct 18, 2024

gabriel-e2e Oct 28, 2024

wlsf82 Oct 30, 2024

ldasilvaNZ11 Oct 9, 2024

wlsf82 Oct 18, 2024

gabriel-e2e Oct 30, 2024

ldasilvaNZ11 Oct 9, 2024

wlsf82 Oct 18, 2024

gabriel-e2e Oct 30, 2024

wlsf82 left a comment

wlsf82 left a comment

wlsf82 left a comment

wlsf82 Oct 18, 2024

wlsf82 Oct 18, 2024

wlsf82 Oct 18, 2024

wlsf82 left a comment

wlsf82 Oct 30, 2024

wlsf82 Oct 30, 2024

wlsf82 Oct 30, 2024

wlsf82 Oct 30, 2024

wlsf82 Oct 30, 2024

wlsf82 Oct 30, 2024

wlsf82 Oct 30, 2024

wlsf82 Oct 30, 2024

wlsf82 Oct 30, 2024

wlsf82 Oct 30, 2024

	cy.contains('button', 'View').should('be.visible').click()
	cy.contains('button', 'View').click()

	cy.get('h2').should('contain', 'How can we help you?')
	cy.contains('h2, 'How can we help you?').should('be.visible')

	cy.get('h2').should('not.contain', 'How can we help you?')
	cy.contains('h2, 'How can we help you?').should('not.exist')

Scripts automatizados nivel junior #1

Are you sure you want to change the base?

Scripts automatizados nivel junior #1

Conversation

gabriel-e2e commented Oct 7, 2024

ldasilvaNZ11 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wlsf82 left a comment

Choose a reason for hiding this comment

wlsf82 left a comment

Choose a reason for hiding this comment

wlsf82 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wlsf82 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ldasilvaNZ11 left a comment •

edited

Loading