Ir para o conteúdo principal

Estrutura de Projeto - Page Object Model (POM)

Falamos do Versionamento e também trouxemos as boas práticas de Seletores além do ESLint para correção de erros de sintaxe e boas práticas, antes de prosseguirmos vamos passar em como está sendo Estruturado o Projeto. 
A abordagem adotada é a Page Object Model (POM), para garantir organização, reutilização de código e manutenção facilitada, o projeto de testes automatizados com Cypress está sendo estruturado utilizando o padrão Page Object Model (POM).

O que é POM?

Page Object Model é um padrão de design que separa a lógica de teste dos detalhes de implementação da interface. Em vez de escrever seletores e comandos diretamente nos testes, eles são organizados em módulos reutilizáveis, tornando o código mais limpo, reutilizável e de fácil manutenção.

Estrutura Atual do Projeto

support/
Contém arquivos de suporte e organização do projeto Cypress.

  • commands/
    Comandos personalizados que encapsulam ações reutilizáveis:

    • autenticacao.js: Comandos de login/logout.

    • navegacao.js: Comandos para navegação entre páginas.

    • assercoes.js: Comandos de validação e asserções comuns.

  • config/
    Arquivos de configuração global para facilitar manutenções e reutilização:

    • variaveis.js: Definições de variáveis e constantes usadas nos testes.

    • seletores.js: Mapeamento centralizado de seletores dos elementos da aplicação.

  • database/
    Armazena dados estáticos utilizados nos testes:

    • databaseCep.json: Dados de cep válidos para endereços.

  • helpers/
    Funções auxiliares que suportam os testes:

    • formatacao.js: Funções para formatar dados (como CPF, datas, etc.).

    • geracaoDados.js: Geração de dados dinâmicos (nomes, e-mails, etc.).

    • requisicoes.js: Encapsula uma lógica de apoio (consulta à API para obter dados usados nos testes).
    • importacao.js: Importação no sistema vindo do fixtures.
    • produtos.js: automatiza a busca e seleção de um produto pela descrição;

  • e2e.js
    Arquivo principal que importa e registra os comandos personalizados.

Vantagens da Estrutura

  • Organização: Cada responsabilidade está em seu lugar (ex: comandos, seletores, dados).

  • Reutilização: Funções e seletores centralizados podem ser usados em múltiplos testes.

  • Facilidade de manutenção: Se um seletor mudar, basta ajustar em um único arquivo.

  • Escalabilidade: A estrutura permite crescer sem se tornar confusa.

Como Funciona na Prática

  • Comandos personalizados (em commands/) encapsulam ações comuns como login, clique em menus, validações, etc.

    • Exemplo:

      js

      // commands/autenticacao.js Cypress.Commands.add('login', (usuario, senha) => { cy.get(seletores.login.usuario).type(usuario); cy.get(seletores.login.senha).type(senha); cy.get(seletores.login.botao).click(); });

  • Seletores (em config/seletores.js) ficam centralizados:

    js

    export const seletores = { login: { usuario: '#input-usuario', senha: '#input-senha', botao: '#btn-login' } };

  • Fixtures (em fixtures/) armazenam dados que simulam entrada de usuários, produtos ou outros contextos de teste.

  • Helpers oferecem funções utilitárias para gerar dados ou formatar valores conforme regras da aplicação.

Próximos passos

Essa estrutura inicial serve como base para o crescimento controlado da suíte de testes. À medida que o sistema evolui, podem ser adicionados novos módulos como, e seguiremos conforme solicitado.
Ideias de teste:

  • pages/: Objetos de página por tela ou fluxo

  • intercept/: Mocks de API com cy.intercept()

  • hooks/: Pré-condições de teste reutilizáveis

  • validators/: Funções de validação mais complexa



Nenhum comentário
Voltar ao topo