{"id":16958874,"url":"https://github.com/ebazhanov/page-object-model-cypress-simple","last_synced_at":"2025-04-14T09:22:20.294Z","repository":{"id":103093570,"uuid":"236959059","full_name":"Ebazhanov/page-object-model-cypress-simple","owner":"Ebazhanov","description":"Learn Page object model (POM) with Cypress in two simple steps","archived":false,"fork":false,"pushed_at":"2020-02-09T11:39:55.000Z","size":104165,"stargazers_count":5,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T09:51:52.911Z","etag":null,"topics":["cypress","cypress-example","page-object","pom","pom-improvements","selectors","template-project"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ebazhanov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-29T10:41:54.000Z","updated_at":"2024-02-13T14:54:12.000Z","dependencies_parsed_at":"2023-04-12T10:21:12.330Z","dependency_job_id":null,"html_url":"https://github.com/Ebazhanov/page-object-model-cypress-simple","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ebazhanov%2Fpage-object-model-cypress-simple","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ebazhanov%2Fpage-object-model-cypress-simple/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ebazhanov%2Fpage-object-model-cypress-simple/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ebazhanov%2Fpage-object-model-cypress-simple/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ebazhanov","download_url":"https://codeload.github.com/Ebazhanov/page-object-model-cypress-simple/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248852218,"owners_count":21171850,"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":["cypress","cypress-example","page-object","pom","pom-improvements","selectors","template-project"],"created_at":"2024-10-13T22:43:47.985Z","updated_at":"2025-04-14T09:22:20.287Z","avatar_url":"https://github.com/Ebazhanov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Learn \"Page object model\" with cypress in two simple steps\n---------------\n\n### #1 This is the first example with simple abstraction\n\u003e Really simple just abstract your selectors\n\n##### So here is the difference:\n- example **without** POM [here](https://github.com/Ebazhanov/page-object-model-cypress-simple/blob/master/cypress/e2e/exampleWithoutPOM.js)\n```javascript\n    describe('given `Customer service` page', () =\u003e {\n        before(() =\u003e {\n            cy.visit('/gp/help/customer/display.html')\n        });\n        context('when user clicks on `My orders` button', () =\u003e {\n            before(() =\u003e {\n                cy.get('[alt=\"Meine Bestellungen\"]').click();\n            });\n            it('should navigate user to `Login` page', () =\u003e {\n                cy.get('.a-form-label').should('contain.text', 'E-Mail-Adresse');\n            });\n        });\n    });\n```\n\n- second one **with** POM [here](https://github.com/Ebazhanov/page-object-model-cypress-simple/blob/master/cypress/e2e/exampleWithPOM.js)\n```javascript\n    describe('given `Customer service` page', () =\u003e {\n        before(() =\u003e {\n            cy.visit(homePage.navigateToCustomerServicePage())\n        });\n        context('when user clicks on `My orders` button', () =\u003e {\n            before(() =\u003e {\n                cy.get(customServicePage.getMyOrdersButton()).click();\n            });\n            it('should navigates user to `Login` page and assert Email-Address input label', () =\u003e {\n                cy.get(loginPage.emailAddersInputTextLabel()).should('contain.text', 'E-Mail-Adresse');\n            });\n        });\n    });\n```\n\n##### The diagram shows us:\n- dependencies where we are keeping our locators/selectors\n\u003cimg src=\"https://monosnap.com/image/nw7GXXmrnoTxFqLOVrn6VKMuzMjUcC\"/\u003e\n\n### #2 The second example with improvements for complex pages and with lot of elements on it.\n![amazon home page section](chrome-capture.gif)\n- without POM improvements [here](https://github.com/Ebazhanov/page-object-model-cypress-simple/blob/master/cypress/e2e/PomWithoutImprovments.js)\n```javascript\nimport {Desktop1} from '../page-objects/HomePage/Desktop1'\nimport {Desktop2} from '../page-objects/HomePage/Desktop2'\nimport {Desktop3} from '../page-objects/HomePage/Desktop3'\nimport {Desktop4} from '../page-objects/HomePage/Desktop4'\n\ndescribe('Amazon test with POM improvements', () =\u003e {\n    const section1 = new Desktop1();\n    const section2 = new Desktop2();\n    const section3 = new Desktop3();\n    const section4 = new Desktop4();\n```\n\n- example with POM improvements [here](https://github.com/Ebazhanov/page-object-model-cypress-simple/blob/master/cypress/e2e/PomWithImprovments.js)\n```javascript\nimport {HomePage} from '../page-objects/HomePage'\n\ndescribe('Amazon test with POM improvements', () =\u003e {\n    const homePage = new HomePage();\n    const section1 = homePage.getDesktop1();\n    const section2 = homePage.getDesktop2();\n    const section3 = homePage.getDesktop3();\n    const section4 = homePage.getDesktop4();\n```\n\n### General benefit from this structure is: \n- Reusability of the same selectors/locator in different classes/tests\n- Clear and more readable architecture\n- Easy to fix failed **tests** by fixing locator/selector in one place\n- and etc... \n\n## Usage: \n- `npx cypress open`\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Febazhanov%2Fpage-object-model-cypress-simple","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Febazhanov%2Fpage-object-model-cypress-simple","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Febazhanov%2Fpage-object-model-cypress-simple/lists"}