Modelo de objeto de página, Vulgarmente conhecido como POM, é um padrão popular em qualquer estrutura de automação. O Page Object Model também pode ser aplicado no Cypress. O Page Object Model tem muitas vantagens na criação de uma estrutura para automação de teste, como reduzir a duplicação de código e aumentar a capacidade de manutenção e a legibilidade. Cypress nos fornece a flexibilidade de incorporar o Modelo de Objeto de Página no script de teste. Neste artigo, veremos como criar um modelo de objeto de página em Passo cipreste passo a passo com exemplos.

Sumário:

• O que é o modelo de objeto de página?
• Arquitetura da Estrutura do Modelo de Objeto da Página
• Vantagens de usar o modelo de objeto de página no Cypress
• Cypress Modelo de Objeto de Página Passo a Passo com Exemplo
• Acessando os Objetos de Página no arquivo Spec
• Como usar luminárias como fonte de dados de teste no modelo de objeto de página no Cypress?
• Acessando os valores do arquivo JSON no arquivo de caso de teste
• Perguntas Frequentes

O que é o modelo de objeto de página?

Modelo de objeto de página é um padrão de design onde o os objetos de página são separados dos scripts de teste de automação. Os testes de automação nos fornecem muitas vantagens que nos beneficiam nos testes; no entanto, existem alguns resultados, como duplicação de código e um aumento no risco de manutenção à medida que o projeto cresce. Vamos entender o significado do POM com um exemplo.

Considere que temos várias páginas em nosso aplicativo, como a página de login, a página de registro e a página de reserva de voos.

• A página de login contém todos os elementos da web das funcionalidades de login
• O Registro contém todos os métodos e elementos da web do processo de registro
• Os voos da reserva contêm os elementos da web da página de reserva de voos

Existem três casos de teste, ou seja, TC1, TC2 e TC3.

• TC1 contém os casos de teste de login.
• TC2 contém casos de teste de login e registro
• TC3 contém casos de teste de login, registro e reserva de voo

Agora, a página de login interage com TC1.

A página de registro precisa interagir com TC1 e TC2, e

A página de reserva de voo precisa interagir com TC1, TC2 e TC3

Como você pode ver, existem funcionalidades comuns entre os três casos de teste. Em vez de escrever os métodos e localizadores de login em todos os arquivos do caso de teste, podemos tê-los separadamente e acessá-los através dos arquivos. Dessa forma, o código não se repete e é facilmente legível.

Uma das melhores práticas de codificação é um conceito chamado DRY. Isso significa Não se repita. Como o formulário completo diz claramente, não devemos repetir as linhas do código continuamente. Para superar isso, Modelo de objeto de página desempenha um papel importante nas melhores práticas de codificação.

Arquitetura da Estrutura do Modelo de Objeto da Página

A estrutura de modelo de objeto de página arquitetura é uma arquitetura comprovada que pode ser personalizada com métodos simples. Hoje, quase todas as empresas seguem metodologias ágeis, que envolvem integração, desenvolvimento e testes contínuos. Os testadores de automação mantêm a estrutura de teste para trabalhar junto com o processo de desenvolvimento com o Modelo de objeto de página. É um significativo padrão de design na manutenção da estrutura de teste de automação à medida que o código cresce com novos recursos.

O objeto de página é um padrão de design que é uma classe orientada a objetos que interage com as páginas do aplicativo que estamos testando. O objeto da página é composto por Classe de página e Casos de teste. Classe de página consiste em métodos e localizadores para interagir com os elementos da web. Criamos classes separadas para cada página do aplicativo. Estaremos criando métodos individuais para cada funcionalidade e os acessaremos em nosso arquivo de especificações.

Vantagens de usar o modelo de objeto de página no Cypress

1. Os métodos são reutilizável em todo o projeto e fácil de manter quando o projeto cresce. As linhas de código se tornam menos legível e otimizado.
2. O padrão de objeto de página sugere que separemos o operações e fluxo que estamos executando na IU de verificação degraus. Quando seguimos o padrão POM, tendemos a escrever código limpo e facilmente compreensível.
3. Com o modelo de objeto de página, objetos e casos de teste são independentes um do outro. Podemos chamar os objetos em qualquer lugar do projeto. Desta forma, se estivermos usando ferramentas diferentes como TestNG / JUnit para testes funcionais ou Cucumber para testes de aceitação, então é fácil acessível.

Cypress Modelo de Objeto de Página Passo a Passo com Exemplo

Esta seção entenderá como criar um Modelo de Objeto de Página em Cypress com exemplos em tempo real que podemos implementar em projetos. Vamos entender a configuração básica e o processo passo a passo para criar um Modelo de Objeto de Página.

Vamos discutir o cenário no qual escreveremos as funções neste exemplo.

1. Navegar para https://admin-demo.nopcommerce.com/ site do Network Development Group
2. Insira um nome de usuário e uma senha válidos
3. Clique no botão Login
4. Valide o URL se ele está anexado a /admin após o login

Estaremos criando dois arquivos - um arquivo PageObject e um arquivo spec para este exemplo. Comecemos!

Passo 1: Abra nosso projeto em código VS. Crie uma pasta chamada PageObject sob a integração pasta. Nessa pasta, você pode criar arquivos de objeto de página para qualquer módulo.

Passo 2: Crie um arquivo chamado LoginPage.js sob a PageObject pasta. Em LoginPage.js, estaremos escrevendo os métodos que envolvem as funcionalidades de login.

Passo 3: Vamos começar a escrever nosso primeiro método de teste em o LoginPage.js Arquivo. Temos que primeiro criar uma classe que iremos exportar em nosso arquivo de especificações. Chamaremos nossa classe de Página de login

class LoginPage { }

Com base em nosso pseudocódigo, nossa primeira etapa é navegar até a URL. Chamaremos nosso método de navigate(). Dentro de nosso método de navegação, devemos adicionar o cy.visit() função do Cypress.

 navegue() { cy.visit('https://admin-demo.nopcommerce.com/') }

Passo 4: Agora, teremos que inserir o nome de usuário em nosso campo de e-mail. Vamos nomear nosso método como enterEmail (). Primeiro, devemos obter o localizador do campo de e-mail e acessá-los via cy.get() comando. Então, limparemos o campo usando o clear() comando e adicione o nome de usuário usando o type() comando. Em nosso método, passamos um parâmetro nome de usuário para passar o valor no arquivo de especificações. Desta forma, estamos mantendo genérico para acessar este método se um id de e-mail diferente for necessário.

enterEmail(username) { cy.get('[id=Email]').clear() cy.get('[id=Email]').type(username); retorne isso }

Em vez de escrever o cy.get() comando duas vezes no código acima, podemos simplesmente repeti-los com o ponto operador.

  enterEmail(username) { cy.get('[id=Email]') .clear() .type(username); retorne isso }

Você deve ter notado return this na linha 9. isto indica que o digite e-mail método pertence ao particular Página de login classe. Basicamente, isto representa a classe.

Passo 5: Temos que criar um método para senhas semelhante ao nosso método enterEmail. Chamaremos nosso método de senha de enterPassword(). Inicialmente, obteremos o localizador da senha, limparemos o campo e digitaremos o valor de entrada. Vamos passar um parâmetro para o nosso método chamado pswd e acesso no type() comando.

enterPassword(pswd) { cy.get('[id=Password]') .clear() .type(pswd) return this }

Passo 6: Nosso último método seria clicar no botão de login. Devemos nomear nosso método como submit(). Obteremos o localizador e clicaremos no botão usando o click() método de Cypress.

 submit() { cy.get('[type=submit]').click() }

Passo 7: Agora, temos que exportar esta classe para usá-la em nosso arquivo de especificações. Para isso, apenas adicionamos uma linha fora de nossa classe e podemos acessá-la facilmente em nosso arquivo de especificações.

exportar página de login padrão

Viva! Criamos um arquivo de objeto de página para nosso projeto. Foi muito simples e fácil!

Acessando os Objetos de Página no arquivo Spec

Agora, vamos prosseguir para nosso arquivo de caso de teste. Temos que criar um arquivo de especificações em nossa pasta de integração. Chamaremos nosso arquivo de especificações POMDemo.spec.js.

Passo 1: Para acessar nossos métodos no arquivo LoginPage.js, devemos importar eles em nosso arquivo de especificações. Importamos usando a instrução import. Devemos navegar até o arquivo LoginPage.js usando ../

No nosso caso, o caminho é ../integration/PageObject/LoginPage. Portanto, a instrução de importação será semelhante à mostrada a seguir.

importe LoginPage de "../integration/PageObject/LoginPage"

Passo 2: Como usamos o Mocha, vamos escrever nosso caso de teste dentro describe() e it() bloquear. descrever () representa um suíte de teste, e () representa um caso de teste. Ambos os blocos são uma função e aceitam um parâmetro de string que inclui o descrição do teste.

describe("Cypress POM Test Suite", function () { })

Dentro do bloco de descrição, vamos escrever nosso it() adicionando a descrição como login com credenciais válidas.

it("Login com credenciais válidas", function () { })

Passo 3: Para acessar nossos métodos a partir de nosso arquivo de objeto Page, devemos criar uma instância para nossa classe Login. Para criar uma instância para a classe de login, devemos declarar uma variável e atribuí-la ao nosso arquivo de classe usando o novo palavra-chave. Com a variável declarada, podemos acessar facilmente os métodos do arquivo de objeto da Página.

                                               const login = new LoginPage();

Note: Com a variável login, podemos acessar os métodos da classe de objeto Page. Quando começamos a digitar login. , o vscode listará as sugestões de todos os métodos disponíveis no arquivo LoginPage.js. Isso nos ajuda a verificar se exportamos e importamos nossa classe corretamente!

Passo 4: Vamos ligar para o nosso navigate() método para visitar o URL. Esta é a primeira ação em nosso caso de teste.

/// import LoginPage from "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("Login com credenciais válidas", function () { const login = new LoginPage(); login.navigate(); }); });

Passo 5: Devemos inserir o nome de usuário no campo de e-mail. Nós acessamos o enterEmail() com o entrar objeto. enterEmail() método aceita um parâmetro nome de usuário. Portanto, devemos passar o valor do nome de usuário como um corda em nosso arquivo de especificações

/// importar LoginPage de "./PageObject/LoginPage" descreve("Cypress POM Test Suite", function () { it("Login com credenciais válidas", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[email protegido]'); }) })

Passo 6: Semelhante à etapa 5, devemos chamar nosso enterPassword() método passando a senha como um parâmetro na string.

/// importar LoginPage de "./PageObject/LoginPage" descreve("Cypress POM Test Suite", function () { it("Login com credenciais válidas", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[email protegido]'); login.enterPassword('admin'); }) })

Passo 7: Em seguida, temos que clicar no botão de login. Vamos chamar o método submit() de nosso arquivo de objeto de página.

/// importar LoginPage de "./PageObject/LoginPage" descreve("Cypress POM Test Suite", function () { it("Login com credenciais válidas", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[email protegido]'); login.enterPassword('admin'); login.submit(); }) })

Passo 8: Depois de fazer o login, temos que declarar o URL. Vamos verificar se o URL é igual ao URL após o login. Para afirmação, vamos usar o Chai biblioteca de asserção, que é embutida no Cypress.

/// importar LoginPage de "./PageObject/LoginPage" descreve("Cypress POM Test Suite", function () { it("Login com credenciais válidas", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[email protegido]'); login.enterPassword('admin'); login.submit(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }) })

A imagem acima representa o caso de teste de login. Conseguimos escrever um caso de teste com um modelo de objeto de página com muito poucas etapas simples. Agora vamos executar o caso de teste e ver o resultado.

Devemos abrir o executor de teste Cypress e clicar no arquivo de especificações e executar nosso caso de teste. Verifique isto artigo sobre como abrir o executor de teste Cypress.

Viva! Escrevemos com sucesso um caso de teste que usa o modelo de objeto de página no Cypress. Podemos incorporar esse padrão em projetos em tempo real. Existem muitas maneiras de escrever os métodos em um arquivo de objeto de página. Mostrei um exemplo que é padrão e funciona para qualquer projeto. Você também pode escrever apenas o função de retorno no arquivo de objeto da página e, em seguida, clique em e tipo diretamente em nosso arquivo de especificações.

Veremos outro padrão que podemos usar no projeto. Este método também funcionará perfeitamente bem.

Neste tipo, estaremos retornando apenas a função localizadora em nosso método e realizaremos ações no arquivo de teste. Vamos escrever o código para o mesmo cenário que vimos acima.

Objeto de página - LoginPage.js

class LoginPage { navegue() { cy.visit('https://admin-demo.nopcommerce.com/') } enterEmail() { return cy.get('[id=Email]') } enterPassword() { return cy.get('[id=Password]') } submit() { return cy.get('[type=submit]') } } export default LoginPage

Como vimos acima, estamos escrevendo apenas o localizador dentro de nossa função e retornando-os. O retorno representa que o método particular pertence ao classe LoginPage.js. Não estamos adicionando nenhuma ação em nossos métodos.

Arquivo de especificação - POMDemo.spec.js

Veremos o exemplo de acesso aos métodos no arquivo spec.

/// importar LoginPage de "./PageObject/LoginPage" descreve("Cypress POM Test Suite", function () { it("Login com credenciais válidas", function () { const login = new LoginPage(); login.navigate(); login.enterEmail().clear() login.enterEmail().type('[email protegido]'); login.enterPassword().clear() login.enterPassword().type('admin'); login.submit().click(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

Aqui, chamamos o método do arquivo PageObject e executamos as ações do caso de teste. Então, primeiro, estamos chamando nossa variável de referência entrar e, em seguida, anexando-o com o método enterEmail() e finalmente anexando a ação tipo. No nosso type(), estamos passando o nome de usuário valor.

Como você pode ver, todos os comandos foram executados e o caso de teste foi aprovado!

Você pode escolher o modelo de objeto de página adequado ao seu projeto e à sua opinião. Não existe uma regra específica para seguir apenas um procedimento.

Como usar luminárias como fonte de dados de teste no modelo de objeto de página no Cypress?

Em nossos exemplos de modelo de objeto de página, passamos o valor de nome de usuário e senha diretamente no arquivo de objeto de página ou diretamente no arquivo de caso de teste. Esta seção entenderá como usar luminárias em Cypress para manter os dados seguros e não expostos. Devemos tentar manter todas as credenciais e dados em um arquivo e acessá-los. Dessa forma, é fácil de manter e dados confidenciais, como nome de usuário e senha, não são expostos. Este método também é um dos procedimentos que precisamos seguir no Padrão de Objeto de Página.

Como discutido anteriormente, Fixture ajuda a armazenar dados em um arquivo JSON ou arquivo Excel, ou uma biblioteca externa como Apache POI. Usaremos esses dados criando uma variável e acessando-os em nosso arquivo de especificações. Vamos entender com um exemplo.

Cypress fornece uma pasta chamada “luminárias. ” Vamos criar um JSON arquivo chamado Credenciais.json sob a pasta 'Fixtures'.

Vamos declarar nosso nome de usuário, senha e valores de URL que precisamos validar em um formato JSON no credenciais.json arquivo.

{ "nome de usuário" : "[email protegido]", "senha": "admin", "adminUrl": "https://admin-demo.nopcommerce.com/admin/" }

Acessando os valores do arquivo JSON no arquivo de caso de teste

Como definimos os valores em nosso arquivo JSON, iremos acessá-los em nosso arquivo de caso de teste usando Luminárias da Cypress. Iremos acessar o valor JSON com isto palavra-chave. Vamos envolver a função de fixação em um antes() bloquear.

describe("Cypress POM Test Suite", function () { before(function () { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) })

cy.fixture ('credentials'). then (function (testdata) {this.testdata = testdata}) - esta linha representa que estamos passando pelo credenciais.json arquivo como um parâmetro para nosso cy.fixture () comando. Aqui, não precisamos passar se é um arquivo JSON. Basta passar o nome do arquivo sozinho. Depois, passamos dados de teste como parâmetro na função e acessar o dados de teste variável usando isto.

/// import LoginPage from "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { before(function () { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) }) it("Login com credenciais válidas", function () { const login = new LoginPage(); login.navigate(); login.enterEmail(this.testdata.username) login.enterPassword(this.testdata.password ) login.submit(); cy.url().should('ser.equal', this.testdata.adminUrl) }); });

login.enterEmail (this.testdata.username) - Isso irá buscar o valor do nome de usuário do arquivo credentials.json e preenchê-lo no campo de e-mail.

login.enterPassword (this.testdata.password) - Isso irá buscar o valor da senha do arquivo credentials.json e preenchê-lo no campo de senha

cy.url (). should ('be.equal', this.testdata.adminUrl) - Isso irá obter o adminUrl do arquivo credentials.json e validar na declaração

Agora, vamos executar o caso de teste para o resultado.

Como podemos ver, os casos de teste foram executados e passaram. Este exemplo o ajudará a escrever um caso de teste baseado em dados básico. Você pode incorporá-lo em seu projeto usando este método. Você pode criar novos arquivos JSON na pasta Fixture, adicionar valores relacionados aos dados de teste e acessá-los em qualquer arquivo de teste.

Perguntas Frequentes

O Cypress é compatível com o modelo de objeto de página?

Claro. Cypress oferece toda a flexibilidade para brincar com páginas e objetos no repositório. É fácil de implementar.

Qual modelo de objeto de página devo usar nos exemplos acima?

Não existe uma regra específica para seguir apenas uma forma de Modelo de Objeto de Página. Você pode usar qualquer modelo que foi discutido acima. Você é livre para personalizar o modelo de acordo com seu projeto.

Por que devo usar fixtures no modelo de objeto de página no Cypress?

Fixture ajuda a armazenar dados confidenciais como nome de usuário, senha e URLs em um arquivo separado como JSON ou Excel. Isso garante a segurança do aplicativo e acessa-os facilmente em qualquer arquivo do projeto. Para acessar o arquivo JSON, usamos luminárias para usá-lo em nosso arquivo de especificações.

Aishwarya Lakshmi

Olá… eu sou Aishwarya Lakshmi, concluí meu B.Tech e tenho quase 2+ anos de experiência na área de testes. Sou um entusiasta de testes e apaixonado por testes e adoro explorar coisas novas em minha área e compartilhá-las com meus colegas. Gosto de escrever blogs durante meu tempo livre da maneira mais simples, mas eficaz. Como testador, gosto de ter as coisas perfeitas, por isso desejo que meus leitores tenham um entendimento perfeito da tecnologia. Eu me mantenho atualizado com as novas tecnologias relacionadas a testes e passo tempo entendendo-as. Fico feliz em ajudar os alunos a compreender os conceitos dos testes.