Modèle d'objet de page, mieux connu sous le nom de POM, est un modèle populaire dans n'importe quel framework d'automatisation. Le modèle d'objet de page peut également être appliqué dans Cypress. Page Object Model présente de nombreux avantages dans la création d'un cadre pour l'automatisation des tests, tels que la réduction de la duplication de code et l'augmentation de la maintenabilité et de la lisibilité. Cypress nous offre la possibilité d'incorporer Page Object Model dans le script de test. Dans cet article, nous verrons comment créer un modèle d'objet de page dans Marche en cyprès pas à pas avec des exemples.

Sommaire :

• Qu'est-ce que le modèle d'objet de page ?
• Architecture de cadre de modèle d'objet de page
• Avantages de l'utilisation du modèle d'objet de page dans Cypress
• Modèle d'objet de page étape par étape Cypress avec exemple
• Accès aux objets de page dans le fichier Spec
• Comment utiliser les appareils comme source de données de test dans le modèle d'objet de page dans Cypress ?
• Accéder aux valeurs du fichier JSON dans le fichier de scénario de test
• Foire aux Questions

Qu'est-ce que le modèle d'objet de page ?

Le modèle d'objet de page est un modèle de conception où le les objets de page sont séparés des scripts de test d'automatisation. Les tests d'automatisation nous offrent de nombreux avantages dont nous profitons dans les tests ; Cependant, il existe certains résultats tels que la duplication de code et une augmentation du risque de maintenabilité à mesure que le projet se développe. Laissez-nous comprendre la signification de POM avec un exemple.

Considérez que nous avons plusieurs pages dans notre application, telles que la page de connexion, la page d'inscription et la page de réservation de vols.

• La page de connexion contient tous les éléments Web des fonctionnalités de connexion
• L'enregistrement contient toutes les méthodes et éléments Web du processus d'enregistrement
• La rubrique Réserver des vols contient les éléments Web de la page de réservation de vol

Il existe trois cas de test, à savoir TC1, TC2 et TC3.

• TC1 contient les cas de test de connexion.
• TC2 contient des cas de test de connexion et d'enregistrement
• TC3 contient des cas de test de connexion, d'enregistrement et de réservation de vol

Désormais, la page de connexion interagit avec TC1.

La page d'inscription doit interagir avec TC1 et TC2, et

La page de réservation de vol doit interagir avec TC1, TC2 et TC3

Comme vous pouvez le voir, il existe des fonctionnalités communes entre les trois cas de test. Au lieu d'écrire les méthodes et les localisateurs de connexion dans tous les fichiers de cas de test, nous pouvons les avoir séparément et y accéder à travers les fichiers. De cette façon, le code n'est pas répété et il est facilement lisible.

L'une des meilleures pratiques en matière de codage est un concept appelé ASSÉCHER. Ça veut dire Ne te répète pas. Comme le dit clairement le formulaire complet, nous ne devons pas répéter les lignes de code encore et encore. Pour surmonter cela, Modèle d'objet de page joue un rôle important dans les meilleures pratiques de codage.

Architecture de cadre de modèle d'objet de page

La cadre de modèle d'objet de page L'architecture est une architecture éprouvée qui peut être personnalisée avec des méthodes simples. Aujourd'hui, presque toutes les entreprises suivent des méthodologies agiles, qui impliquent une intégration, un développement et des tests continus. Les testeurs d'automatisation maintiennent le cadre de test pour travailler parallèlement au processus de développement avec le Modèle d'objet de page. C'est un important modèle de conception dans la maintenance du cadre de test d'automatisation au fur et à mesure que le code grandit avec de nouvelles fonctionnalités.

L'objet page est un modèle de conception qui est une classe orientée objet qui interagit avec les pages de l'application que nous testons. L'objet de la page comprend Classe de pages et Cas de test. Classe de pages se compose de méthodes et de localisateurs pour interagir avec les éléments Web. Nous créons des classes distinctes pour chaque page de l'application. Nous allons créer des méthodes individuelles pour chaque fonctionnalité et y accéder dans notre fichier de spécifications.

Avantages de l'utilisation du modèle d'objet de page dans Cypress

1. Les méthodes sont réutilisable sur l'ensemble du projet et facile à entretenir lorsque le projet grandit. Les lignes de code deviennent moins lisible et optimisé.
2. Le modèle d'objet de page suggère que nous séparions le opérations et flux que nous effectuons dans l'interface utilisateur à partir de vérification pas. Lorsque nous suivons le modèle POM, nous avons tendance à écrire code propre et facilement compréhensible.
3. Avec le modèle d'objet de page, objets et cas de test sont indépendants les uns des autres. Nous pouvons appeler les objets n'importe où dans le projet. De cette façon, si nous utilisons différents outils comme TestNG/JUnit pour les tests fonctionnels ou Cucumber pour les tests d'acceptation, alors il est facilement accessible.

Modèle d'objet de page étape par étape Cypress avec exemple

Cette section comprendra comment créer un modèle d'objet de page dans Cypress avec des exemples en temps réel que nous pouvons mettre en œuvre dans des projets. Nous comprendrons à partir de la configuration de base et du processus étape par étape de création d'un modèle d'objet de page.

Discutons du scénario sur lequel nous écrirons les fonctions dans cet exemple.

1. Accédez à https://admin-demo.nopcommerce.com/ site
2. Entrez un nom d'utilisateur et un mot de passe valides
3. Cliquez sur le bouton Connexion
4. Validez l'URL si elle est ajoutée avec /admin après connexion

Nous allons créer deux fichiers - un fichier PageObject et un fichier spec pour cet exemple. Commençons!

Étape 1: Ouvrez notre projet en code VS. Créer un dossier appelé ObjetPage sous le l'intégration dossier. Sous ce dossier, vous pouvez créer des fichiers d'objet de page pour n'importe quel module.

Étape 2: Créez un fichier nommé Page de connexion.js sous le ObjetPage dossier. Dans LoginPage.js, nous écrirons les méthodes qui impliquent les fonctionnalités de connexion.

Étape 3: Commençons à écrire notre première méthode de test dans la page de connexion.js déposer. Nous devons d'abord créer une classe que nous exporterons dans notre fichier de spécifications. Nous appellerons notre classe comme Page de connexion

classe LoginPage { }

Sur la base de notre pseudocode, notre première étape consiste à naviguer vers l'URL. Nous appellerons notre méthode comme navigate(). Dans notre méthode de navigation, nous ajouterons le cy.visit() fonction de Cypress.

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

Étape 4: Maintenant, nous devrons entrer le nom d'utilisateur dans notre champ e-mail. Nous nommerons notre méthode comme entrerEmail(). Tout d'abord, nous devrions obtenir le localisateur du champ de courrier électronique et y accéder via cy.get() commander. Ensuite, nous effacerons le champ en utilisant le clear() commande et ajoutez le nom d'utilisateur à l'aide de la type() commander. Dans notre méthode, nous passons un paramètre Nom d'utilisateur pour passer la valeur dans le fichier de spécifications. De cette façon, nous le gardons générique pour accéder à cette méthode si un identifiant de messagerie différent est requis.

enterEmail(nom d'utilisateur) { cy.get('[id=Email]').clear() cy.get('[id=Email]').type(nom d'utilisateur); retourne ça }

Au lieu d'écrire le cy.get() commande deux fois dans le code ci-dessus, nous pouvons simplement les boucler avec le point opérateur.

  enterEmail(nom d'utilisateur) { cy.get('[id=Email]') .clear() .type(nom d'utilisateur); retourne ça }

Vous avez peut-être remarqué return this à la ligne 9. this indique que le entrerEmail méthode appartient au particulier Page de connexion classer. Essentiellement, this représente la classe.

Étape 5: Nous devons créer une méthode pour les mots de passe similaire à notre méthode enterEmail. Nous appellerons notre méthode de mot de passe comme enterPassword(). Initialement, nous obtiendrons le localisateur du mot de passe, effacerons le champ et saisirons la valeur d'entrée. Nous allons passer un paramètre à notre méthode appelée pswd et l'accès dans le type() commander.

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

Étape 6: Notre dernière méthode serait de cliquer sur le bouton de connexion. Nous nommerons notre méthode comme submit(). Nous obtiendrons le localisateur et cliquerons sur le bouton en utilisant le click() méthode de Cypress.

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

étapes 7: Maintenant, nous devons exporter cette classe pour l'utiliser dans notre fichier de spécifications. Pour cela, nous ajoutons simplement une ligne en dehors de notre classe, et nous pouvons facilement y accéder dans notre fichier de spécification.

exporter la page de connexion par défaut

Hourra! Nous avons créé un fichier d'objet de page pour notre projet. C'était assez simple et facile !

Accès aux objets de page dans le fichier Spec

Passons maintenant à notre fichier de cas de test. Nous devons créer un fichier spec dans notre dossier d'intégration. Nous appellerons notre fichier spec POMDemo.spec.js.

Étape 1: Pour accéder à nos méthodes dans le fichier LoginPage.js, nous devons importer dans notre fichier de spécifications. Nous importons en utilisant l'instruction import. Nous devons naviguer vers le fichier LoginPage.js en utilisant ../

Dans notre cas, le chemin est ../integration/PageObject/LoginPage. Ainsi, la déclaration d'importation ressemblera à quelque chose comme ci-dessous.

importer la page de connexion à partir de "../integration/PageObject/LoginPage"

Étape 2: Puisque nous utilisons Mocha, nous allons écrire notre cas de test à l'intérieur describe() et it() bloquer. décrire() représente un suite de tests, et it() représente un cas de test. Les deux blocs sont une fonction et acceptent un paramètre de chaîne qui inclut le la description du test.

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

À l'intérieur du bloc de description, nous écrirons notre it() en ajoutant la description en tant que connexion avec des informations d'identification valides.

it("Se connecter avec des informations d'identification valides", function () { })

Étape 3: Pour accéder à nos méthodes à partir de notre fichier objet Page, nous devons créer une instance pour notre classe Login. Pour créer une instance pour la classe de connexion, nous devons déclarer une variable et l'affecter à notre fichier de classe en utilisant le neufs mot-clé. Avec la variable déclarée, nous pouvons facilement accéder aux méthodes depuis le fichier objet Page.

                                               const connexion = new LoginPage();

Notes: Avec la variable login, nous pouvons accéder aux méthodes à partir de la classe d'objets Page. Quand nous commençons à taper login. , le vscode listera les suggestions de toutes les méthodes disponibles dans le fichier LoginPage.js. Cela nous aide à vérifier que nous avons correctement exporté et importé notre classe !

Étape 4: Appelons notre navigate() méthode pour visiter l'URL. Il s'agit de la première action de notre cas de test.

/// import LoginPage from "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("Se connecter avec des identifiants valides", function () { const login = new LoginPage(); login.navigate(); }); });

Étape 5: Nous devons entrer le nom d'utilisateur dans le champ e-mail. Nous accédons au enterEmail() les vous connecter objet. enterEmail() la méthode accepte un paramètre Nom d'utilisateur. Nous devrions donc passer la valeur du nom d'utilisateur en tant que un magnifique dans notre fichier de spécifications

/// importer LoginPage depuis "./PageObject/LoginPage" décrire("Cypress POM Test Suite", function () { it("Connexion avec des informations d'identification valides", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[email protected]'); }) })

Étape 6: Similaire à l'étape 5, nous devrions appeler notre enterPassword() méthode en passant le mot de passe en paramètre dans la chaîne.

/// importer LoginPage depuis "./PageObject/LoginPage" décrire("Cypress POM Test Suite", function () { it("Connexion avec des informations d'identification valides", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[email protected]'); login.enterPassword('admin'); }) })

Étape 7: Ensuite, nous devons cliquer sur le bouton de connexion. Nous appellerons la méthode submit() à partir de notre fichier d'objet de page.

/// importer LoginPage depuis "./PageObject/LoginPage" décrire("Cypress POM Test Suite", function () { it("Connexion avec des informations d'identification valides", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[email protected]'); login.enterPassword('admin'); connexion.submit(); }) })

Étape 8: Après la connexion, nous devons affirmer l'URL. Nous allons vérifier si l'URL est égal à l'URL après la connexion. Pour l'assertion, on utilisera le Chaï bibliothèque d'assertions, qui est intégrée à Cypress.

/// importer LoginPage depuis "./PageObject/LoginPage" décrire("Cypress POM Test Suite", function () { it("Connexion avec des informations d'identification valides", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[email protected]'); login.enterPassword('admin'); connexion.submit(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }) })

L'image ci-dessus représente le cas de test de connexion. Nous avons pu écrire un cas de test avec un modèle d'objet de page avec très peu d'étapes simples. Exécutons maintenant le cas de test et voyons le résultat.

Nous allons ouvrir le lanceur de test Cypress, cliquer sur le fichier de spécifications et exécuter notre scénario de test. Vérifie ça article sur la façon d'ouvrir le lanceur de test Cypress.

Hourra! Nous avons écrit avec succès un cas de test qui utilise le modèle d'objet de page dans Cypress. Nous pouvons intégrer ce modèle dans des projets en temps réel. Il existe de nombreuses façons d'écrire les méthodes dans un fichier objet de page. Je vous ai montré un exemple qui est standard et fonctionne pour n'importe quel projet. Vous pouvez également écrire uniquement le fonction de retour dans le fichier objet de la page, puis cliquez sur et type directement dans notre fichier de spécifications.

Nous verrons un autre modèle que nous pouvons utiliser dans le projet. Cette méthode fonctionnera également parfaitement bien.

Dans ce type, nous renverrons uniquement la fonction de localisation dans notre méthode et effectuerons des actions dans le fichier de test. Nous allons écrire du code pour le même scénario que nous avons vu ci-dessus.

Objet de page – LoginPage.js

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

Comme nous l'avons vu ci-dessus, nous écrivons uniquement le locator à l'intérieur de notre fonction et les renvoyons. Le retour représente que la méthode particulière appartient à la classe LoginPage.js. Nous n'ajoutons aucune action dans nos méthodes.

Fichier de spécification - POMDemo.spec.js

Nous examinerons l'exemple d'accès aux méthodes dans le fichier spec.

/// importer LoginPage depuis "./PageObject/LoginPage" décrire("Cypress POM Test Suite", function () { it("Connexion avec des informations d'identification valides", function () { const login = new LoginPage(); login.navigate(); login.enterEmail().clear() login.enterEmail().type('[email protected]'); login.enterPassword().clear() login.enterPassword().type('admin'); login.submit().click(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

Ici, nous appelons la méthode à partir du fichier PageObject et effectuons les actions du scénario de test. Donc d'abord, nous appelons notre variable de référence vous connecter puis en l'ajoutant avec la méthode enterEmail() et enfin en ajoutant l'action type. Dans notre type(), nous passons le nom d'utilisateur Plus-value.

Comme vous pouvez le voir, toutes les commandes ont été exécutées et le scénario de test a réussi !

Vous pouvez choisir le modèle d'objet de page qui convient à votre projet et à votre opinion. Il n'y a pas de règle particulière pour s'en tenir à une seule procédure.

Comment utiliser les appareils comme source de données de test dans le modèle d'objet de page dans Cypress ?

Dans nos exemples de modèle d'objet de page, nous avons transmis la valeur du nom d'utilisateur et du mot de passe directement dans le fichier d'objet de page ou directement dans le fichier de scénario de test. Cette section comprendra comment utiliser luminaires à Cypress pour garder les données en sécurité et non exposées. Nous devrions essayer de conserver toutes les informations d'identification et les données dans un seul fichier et d'y accéder. De cette façon, il est facile à entretenir et les données sensibles telles que le nom d'utilisateur et le mot de passe ne sont pas exposées. Cette méthode est également l'une des procédures que nous devons suivre dans Page Object Pattern.

Comme discuté plus tôt, Fixture permet de stocker des données dans un fichier JSON ou un fichier Excel, ou une bibliothèque externe comme Apache POI. Nous utiliserons ces données en créant une variable et y accéderons dans notre fichier de spécifications. Laissez-nous comprendre avec un exemple.

Cypress fournit un dossier appelé "agencements. " Nous allons créer un JSON fichier appelé Lettres de créance.json dans le dossier « Appareils ».

Déclarons nos valeurs de nom d'utilisateur, de mot de passe et d'URL que nous devons valider au format JSON dans le informations d'identification.json fichier.

{ "nom d'utilisateur" : "[email protected]", "mot de passe" : "admin", "adminUrl" : "https://admin-demo.nopcommerce.com/admin/" }

Accéder aux valeurs du fichier JSON dans le fichier de scénario de test

Comme nous avons défini les valeurs dans notre fichier JSON, nous y accéderons dans notre fichier de cas de test en utilisant Agencements de Cyprès. Nous accéderons à la valeur JSON avec this mot-clé. Enveloppons la fonction fixture dans un avant que() bloque.

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 }) – cette ligne représente que nous passons le informations d'identification.json fichier en tant que paramètre de notre cy.fixture() commander. Ici, nous ne sommes pas obligés de transmettre s'il s'agit d'un fichier JSON. Il suffit de passer le nom du fichier seul. Plus tard, nous passons données de test comme paramètre dans la fonction et accéder au données de test variable à l'aide this.

/// import LoginPage from "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { before(function () { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) }) it("Se connecter avec des identifiants valides", function () { const login = new LoginPage(); login.navigate(); login.enterEmail(this.testdata.username) login.enterPassword(this.testdata.password ) login.submit(); cy.url().should('be.equal', this.testdata.adminUrl) }); });

login.enterEmail(this.testdata.username) – Cela récupérera la valeur du nom d'utilisateur dans le fichier credentials.json et la remplira dans le champ de l'e-mail.

login.enterPassword(this.testdata.password) – Cela récupérera la valeur du mot de passe dans le fichier credentials.json et la remplira dans le champ du mot de passe

cy.url().should('be.equal', this.testdata.adminUrl) – Cela obtiendra l'adminUrl du fichier credentials.json et validera dans l'assertion

Exécutons maintenant le scénario de test pour le résultat.

Comme nous pouvons le voir, les cas de test ont été exécutés et ont réussi. Cet exemple vous aidera à écrire un cas de test de base basé sur les données. Vous pouvez l'intégrer dans votre projet en utilisant cette méthode. Vous pouvez créer de nouveaux fichiers JSON dans le dossier Fixture, ajouter des valeurs liées aux données de test et y accéder via n'importe quel fichier de test.

Foire aux Questions

Cypress prend-il en charge le modèle d'objet de page ?

Bien sûr. Cypress offre toute la flexibilité nécessaire pour jouer avec les pages et les objets du référentiel. Il est facile à mettre en œuvre.

Quel modèle d'objet de page dois-je utiliser à partir des exemples ci-dessus ?

Il n'y a pas de règle particulière pour s'en tenir à un seul mode de modèle d'objet de page. Vous pouvez utiliser n'importe quel modèle qui a été discuté ci-dessus. Vous êtes libre de personnaliser le modèle en fonction de votre projet.

Pourquoi devrais-je utiliser des appareils dans le modèle d'objet de page dans Cypress ?

Fixture permet de stocker des données sensibles telles que le nom d'utilisateur, le mot de passe et les URL dans un fichier séparé comme JSON ou Excel. Cela garantit la sécurité de l'application et y accède facilement dans tous les fichiers du projet. Pour accéder au fichier JSON, nous utilisons agencements pour l'utiliser dans notre fichier de spécifications.

Aishwarya Lakshmi

Salut… Je m'appelle Aishwarya Lakshmi, j'ai terminé mon B.Tech et j'ai près de 2 ans d'expérience dans le domaine des tests. Je suis un passionné de tests et passionné par les tests et j'aime explorer de nouvelles choses dans mon domaine et les partager avec mes pairs. J'aime écrire des blogs pendant mon temps libre de la manière la plus simple mais efficace. En tant que testeur, j'aime avoir les choses à la perfection, je souhaite donc à mes lecteurs d'avoir une parfaite compréhension de la technologie. Je me tiens au courant des nouvelles technologies liées aux tests et passe du temps à les comprendre. Je suis heureux d'aider les étudiants à comprendre les concepts des tests.