{"id":18537295,"url":"https://github.com/nareshnavinash/cypress-pageobjectmodel","last_synced_at":"2025-04-09T17:36:51.606Z","repository":{"id":41784395,"uuid":"274968993","full_name":"nareshnavinash/Cypress-PageObjectModel","owner":"nareshnavinash","description":"Page Object Model framework using Cypress","archived":false,"fork":false,"pushed_at":"2022-12-11T11:28:37.000Z","size":638,"stargazers_count":12,"open_issues_count":8,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T09:04:10.587Z","etag":null,"topics":["automation","cypress","javascript","page-object-model","ui-automation"],"latest_commit_sha":null,"homepage":"https://nareshnavinash.github.io/Cypress-PageObjectModel/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nareshnavinash.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-25T16:51:16.000Z","updated_at":"2024-07-06T18:46:29.000Z","dependencies_parsed_at":"2023-01-26T22:16:09.910Z","dependency_job_id":null,"html_url":"https://github.com/nareshnavinash/Cypress-PageObjectModel","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nareshnavinash%2FCypress-PageObjectModel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nareshnavinash%2FCypress-PageObjectModel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nareshnavinash%2FCypress-PageObjectModel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nareshnavinash%2FCypress-PageObjectModel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nareshnavinash","download_url":"https://codeload.github.com/nareshnavinash/Cypress-PageObjectModel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248078247,"owners_count":21044076,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["automation","cypress","javascript","page-object-model","ui-automation"],"created_at":"2024-11-06T19:37:44.696Z","updated_at":"2025-04-09T17:36:51.245Z","avatar_url":"https://github.com/nareshnavinash.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cypress Page Object Model Framework\n\nThis project is to support Page Object Model (POM) using Cypress. It also supports tagging feature which is not available by default in cypress. For better understanding of tests, allure and mochawsome reporting structure is included with this project structure.\n\n\n[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](LICENSE)\n[![Made with JavaScript](https://img.shields.io/badge/Made%20with-JavaScript-yellow.svg)](https://www.ruby-lang.org/en/)\n[![StackOverflow](http://img.shields.io/badge/Stack%20Overflow-Ask-blue.svg)]( https://stackoverflow.com/users/10505289/naresh-sekar )\n[![Contributions Welcome](https://img.shields.io/badge/Contributions-Welcome-brightgreen.svg)](CONTRIBUTING.md)\n[![email me](https://img.shields.io/badge/Contact-Email-green.svg)](mailto:nareshnavinash@gmail.com)\n\n\n![alt text](cypress/support/Cypress_POM.png)\n\n## Supports\n* Multiple browser automation\n* Allure reports\n* Jenkins Integration\n* Modes of run via CLI command\n* Headless run\n* Docker Execution\n* Failed Screenshots\n* Testdata driven tests\n* Tagging the tests\n* Retries of failed tests\n\n## Pending\n* Multi browser automation\n* Multi Thread run\n\n\n## Setup\n* Clone this repository\n* Navigate to the cloned folder\n* Install node and npm using `brew install node`\n* Install the dependencies with respect to this project by `npm install`\n\n\n## To Run the tests\n\nTo make the command line run options easier, added common run options as scripts in `package.json` file.\n\nFor a simple run of all the feature files in normal mode without any video recording, try\n```\nnpm run test\n```\nFor a simple run of all the feature files in normal mode with video recording, try\n```\nnpm run test:video\n```\nTo run the tests with specific spec file, try\n```\nnpm run test -- --spec \u003cPath to the spec file\u003e\n```\n\n### Tags\n\nCypress by default doesn't support any tagging feature to the tests. I have included a wrapper under `support/test-filter.js` and included that wrapper in every tests to specify the tags. Have this wrapper on top of every test description inside the test file. \n```\nTestFilter.any(['smoke', 'regression', ''], () =\u003e { // Specify the tags within this array\n    it('Sample test', () =\u003e {\n      // Test description\n    })\n  })\n```\nMake sure to have the empty string within the tag array, so that if no tags is specified in the test run to this testcase runs by default. To run the tests specific with any tags, try\n```\nnpm run test -- --env TEST_TAGS=regression\n```\n\n### Headless\n\nTo run the tests in headless mode,\n```\nnpm run test -- --headless\n```\nTo run the tests in headed mode,\n```\nnpm run test -- --headed\n```\n\n## Allure\nTo open the allure results,\n```\nnpm run serve-allure\n```\nTo clear the allure results,\n```\nnpm run clean-allure\n```\n\n## Multiple Browser\nMultiple browser is supported by cypress by default to run the tests against any specific browser, try\n\n```\nnpm run -- --browser \u003cBrowser name or path eg., chrome, firefox\u003e\n```\n\n## Reports\nFor better illustration on the testcases, allure reports and mochawsome has been integrated. Allure reports can also be integrated with jenkins to get a dashboard view. Apart from allure and mochawsome, command line is also integrated in such a way that cy.log is printed in the console.\n\n## Jenkins Integration with Docker images\nGet any of the linux with cypress docker image as the slaves in jenkins and use the same for executing the UI automation with this framework (Sample docker image - `https://hub.docker.com/r/cypress/browsers`). From the jenkins bash Execute the following to get the testcases to run,\n```\n#!/bin/bash -l\nnpm list\nls\ncd \u003cpath_to_the_project\u003e\nnpm install\nnpm run test \u003cor custom run option\u003e\n```\n\nIn Jenkins pipeline, try to add the following snippet to execute the tests,\n```\npipeline {\n    agent { docker { image 'cypress/browsers' } }\n    stages {\n        stage('build') {\n            steps {\n                sh 'cd project/'\n                sh 'npm install'\n                sh 'npm run test' # or custom methods\n            }\n        }\n    }\n}\n```\n\n## Retries\nBy default this project is specified to have retry count with 2. This can be changed by modifying the environment variable `\"RETRIES\": 2,` in `cypress.json` file. If in case you wish to have multiple retries for a specific testcase, you can add the following within the testcases,\n```\nCypress.currentTest.retries(4)\n```\n\n\n## Breakdown in to testcases\n\n### Adding page methods to the project\n\n1. Add page specific methods inside the `pages` folder structure. Pages are declared in namespaces so that we can directly call them within the tests without any declarations. Name the page files with `\u003cspec_name\u003e.pages.js` so that we wont get confused with the file functionality.\n\n```\nvar ActionsPage = {\n    enter_email: function(email) {\n        cy.get(ActionsLocator.email())\n        .type(email).should('have.value', email)\n    },\n}\n\n```\n\n2. For each page add make sure a locator page is added and included within the page file. We need to declare the locator identifiers within the locator file and then need to use that in pages.\n\n```\nimport ActionsLocator from '../locators/actions.locator';\n```\n\n### Adding locator methods to the project \n\n1. Add locator methods inside the `locators` folder structure. Locators are declared in namespaces so that we can directly call them within the tests or within the pages without any prior declarations. Name the page files with `\u003cspec_name\u003e.locators.js` so that we wont get confused with the file functionality.\n\n```\nvar ActionsLocator = {\n    email: function() {\n           return '.action-email'\n    }\n};\n\n```\n\n2. For each page add make sure a locator page is added and included within the page file. We need to declare the locator identifiers within the locator file and then need to use that in pages.\n\n```\nimport ActionsLocator from '../locators/actions.locator';\n```\n\n### Creating a new spec file in the project\n\n1. Spec files are created by default cypress standard and we could use all the hooks and definitions that are supported by cypress.\n\n2. Only changes that we need to do is to add the tags to the tests using the `TestFilter` custom wrapper. This helps us to run the tests by using tags. A very common usecase is to run the tests in regression or sanity mode to validate the application's stability at different situations.\n\n3. Global hooks are added within the `support/hooks.js` which is included in the `support/index.js` file. Here we could add any common actions among all the test cases at global level. A very common use case is to run the tests against different environment, for which we can pass the environment as a command line argument (or as an environment variable) and parse the same to declare the URL's which has to be consumed inside the tests.\n\n## Parallelization (Multi Thread run)\n\nCypress makes it a complex process to parallelize the tests since their billing revolvs around this feature. If we compare the other parallelization modules in Ruby or Python the number of parallel nodes is dependent on the number of cores of CPU. But here, we ought to specify a CI tool will different machines in the cloud. If we need to run two parallel mode within a machine, cypress doesn't support that.\n\n## Multi browser automation\n\nIts not possible to launch another browser instance with cypress. Traditionally we could launch multiple browser instance with different specifications to test the web applications. For Synchronous applications like real time chat bot, cloud call center etc., we ought to have multiple browsers launched at the same time. This flexibility is not visible here in cypress.\n\n## Built With\n\n* [Cypress](https://www.cypress.io/) - Automation core framework\n* [Allure](https://www.npmjs.com/package/@shelex/cypress-allure-plugin) - For Detailed reporting.\n\n## Contributing\n\n1. Clone the repo!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Create a pull request.\n\nPlease read [CONTRIBUTING.md](CONTRIBUTING.md) for details on code of conduct, and the process for submitting pull requests.\n\n## Authors\n\n* **[Naresh Sekar](https://github.com/nareshnavinash)**\n\n## License\n\nThis project is licensed under the GNU GPL-3.0 License - see the [LICENSE](LICENSE) file for details\n\n## Acknowledgments\n\n* To all the open source contributors whose code has been referred in this project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnareshnavinash%2Fcypress-pageobjectmodel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnareshnavinash%2Fcypress-pageobjectmodel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnareshnavinash%2Fcypress-pageobjectmodel/lists"}