Conversation
cypress/support/page/triagemPage.ts
Outdated
| @@ -0,0 +1,173 @@ | |||
| export class TriagemPage { | |||
| elements = { | |||
There was a problem hiding this comment.
Parabéns pela estrutura. O caminho está certo. 🙂
Mas podemos melhorar alguns pontos para deixar o código mais limpo e melhorar a manutenção e reuso.
Você está usando uma abordagem de page object baseada em page actions, significa que você está estruturando em um único arquivo tanto os seletores quanto os métodos que interagem com eles. Não há problema nisso, é um padrão comum, embora eu pessoalmente prefira separar em dois arquivos (elementos + ações) para deixar mais explícita a responsabilidade de cada parte. Vamos manter essa estrutura por agora e vamos focar em melhorar a organização.
1- separar elementos por etapa: tente separar os elementos por etapa criando mais de um objeto e mantendo apenas em elements o que é comum a todas as etapas ou a todas as telas.
ex:
const elements = {
tituloTriagem: () => cy.get('h1'),
btnAvancar: () => cy.get('[data-testid="btnAvancar"]'),
...
};
const seusDados: {
titulo: () => cy.contains("h2", "Seus Dados"),
inputNome: () => cy.get('[data-testid="input-nome"]'),
inputIdade: () => cy.get('[data-testid="input-idade"]'),
selectGenero: () => cy.get('[data-testid="select-genero"]'),
btnAvancar: () => cy.get('[data-testid="btn-avancar-seus-dados"]'),
}
2 - Vamos reutilizar corretamente: Mapear um elemento só faz sentido quando:
- O seletor é estável
- O elemento será usado várias vezes
- E você realmente precisa chamá-lo em diferentes cenários ou ações.
Se eu vou buscar um botão pelo texto apenas para clicar imediatamente, e isso acontece com vários botões diferentes, não faz sentido criar um mapeamento separado para cada um:
cy.contains("button", "Salvar").click();
cy.contains("button", "Finalizar").click();
cy.contains("button", "Cancelar").click();
Em vez de gerar código duplicado, podemos criar uma função para apenas executar a ação.
Você pode criar uma genérica e sempre chamar ela quando precisar clicar em um botão pelo texto
clickBotaoPorTexto = (texto: string) =>
cy.contains("button", texto).click();
Ou pode criar uma função para cada botão
clicarEmCancelar = () =>
cy.contains("button", "Cancelar").click();
clicarEmSalvar = () =>
cy.contains("button", "Salvar").click();
Vamos iniciar com essa 2 melhorias que já vai mexer bastante no seu código e depois eu sugiro outras para as funções de ação.
| cy.visit("/"); | ||
| }); | ||
|
|
||
| it("Acessar formulário de triagem", () => { |
There was a problem hiding this comment.
Reutilizando as três próximas linhas, acredito que esse cenário não exista mais. Ter a tela carregada passa a ser um pré-requisito dos cenários.
|
|
||
| it("Acessar formulário de triagem", () => { | ||
| cy.login(Cypress.env("paciente").email, Cypress.env("paciente").senha) | ||
| cy.url({ timeout: 20000 }).should("include", "/paciente"); |
There was a problem hiding this comment.
Esse trecho aqui acho que podemos reutilizar. O que acha de tentar colocar no before?
| it("Acessar formulário de triagem", () => { | ||
| cy.login(Cypress.env("paciente").email, Cypress.env("paciente").senha) | ||
| cy.url({ timeout: 20000 }).should("include", "/paciente"); | ||
| triagemPage.clicarIniciartriagem(); |
There was a problem hiding this comment.
Esse trecho aqui acho que podemos reutilizar. O que acha de tentar colocar no before?
| cy.login(Cypress.env("paciente").email, Cypress.env("paciente").senha) | ||
| cy.url({ timeout: 20000 }).should("include", "/paciente"); | ||
| triagemPage.clicarIniciartriagem(); | ||
| triagemPage.validarPaginaTriagemCarregada(); |
There was a problem hiding this comment.
Esse trecho aqui acho que podemos reutilizar. O que acha de tentar colocar no before?
There was a problem hiding this comment.
Organize o arquivo eliminando as linhas em branco desnecessárias.
There was a problem hiding this comment.
Organizar o arquivo removendo as linhas em branco desnecessárias.
| inputNomeApoio: () => cy.get('#name'), | ||
| inputParentesco: () => cy.get('#kinship'), | ||
| inputTelefoneApoio: () => cy.get('#phone'), | ||
|
|
There was a problem hiding this comment.
Organizar o arquivo removendo as linhas em branco desnecessárias.
There was a problem hiding this comment.
Organizar o arquivo removendo as linhas em branco desnecessárias.
| redeApoio: redeApoioElements | ||
| }; | ||
|
|
||
| actions = new TriagemActions(); |
There was a problem hiding this comment.
Foi instanciada um TriagemActions, mas ele não está sendo usado. Aparentemente o TriagemPage e o TriagemActions está fazendo as mesmas coisas, não sendo necessário o triagemActions.
2 participants
No description provided.