{"id":15658635,"url":"https://github.com/san650/cypress-page-object","last_synced_at":"2025-05-01T14:53:57.859Z","repository":{"id":32672688,"uuid":"139358201","full_name":"san650/cypress-page-object","owner":"san650","description":"Represent the screens of your website as a series of objects in your Cypress test suite","archived":false,"fork":false,"pushed_at":"2023-03-04T02:43:53.000Z","size":341,"stargazers_count":22,"open_issues_count":4,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-01T14:53:51.779Z","etag":null,"topics":["cypress","e2e","e2e-tests","page-object","testing"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/san650.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2018-07-01T20:02:23.000Z","updated_at":"2024-06-25T13:16:45.000Z","dependencies_parsed_at":"2024-10-23T08:54:51.098Z","dependency_job_id":null,"html_url":"https://github.com/san650/cypress-page-object","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/san650%2Fcypress-page-object","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/san650%2Fcypress-page-object/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/san650%2Fcypress-page-object/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/san650%2Fcypress-page-object/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/san650","download_url":"https://codeload.github.com/san650/cypress-page-object/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251895424,"owners_count":21661342,"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","e2e","e2e-tests","page-object","testing"],"created_at":"2024-10-03T13:13:17.960Z","updated_at":"2025-05-01T14:53:57.841Z","avatar_url":"https://github.com/san650.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cypress Page Object\n\nRepresent the screens of your website as a series of objects in your [Cypress](https://www.cypress.io/) test suite. This library addon eases the construction of these objects for your acceptance/integration/end to end tests.\n\n## Table of content\n\n* [Quick Start](#quick-start)\n* [What is a Page Object?](#what-is-a-page-object?)\n* [API](#api)\n  * [`page`](#page)\n  * [`clickable`](#clickable)\n  * [`fillable`](#fillable)\n  * [`visitable`](#visitable)\n* [Development](#development)\n* [License](#license)\n\n## Quick Start\n\nInstall the library using npm\n\n```js\n$ npm install --save-dev cypress-page-object\n```\n\nAfter installing the library you can create a page object inside your project.\n\nLet's assume the website you want to test has a http://example.com/login.html page, we can test a failed login. Create a new integration and define a page object as follows.\n\n```js\nimport { page, visitable, fillable, clickable } from \"cypress-page-object\";\n\nconst loginPage = page({\n  visit: visitable('/login'),\n  fillUsername: fillable('#username'),\n  fillPassword: fillable('#password'),\n  submit: clickable('[type=\"submit\"]'),\n\n  errorMessage() {\n    return cy.get('.error-message');\n  }\n});\n\ncontext('My Awesome WebSite', () =\u003e {\n\n  it('logs into the website', () =\u003e {\n    loginPage\n      .visit()\n      .fillUsername('john@example.com')\n      .fillPassword('wrong password')\n      .submit()\n      .errorMessage()\n      .should('contain', 'Wrong username and password');\n  });\n\n});\n```\n\nAs you can see, by having a page object we extract away the CSS selectors from the test making it more readable.\n\n## What is a Page Object?\n\nAn excerpt from the Selenium Wiki\n\n\u003e Within your web app's UI there are areas that your tests interact with. A Page\n\u003e Object simply models these as objects within the test code. This reduces the\n\u003e amount of duplicated code and means that if the UI changes, the fix need only\n\u003e be applied in one place.\n\nThe pattern was first introduced by the Selenium\n\nYou can find more information about this design pattern here:\n\n* [Page Objects - Selenium wiki](https://github.com/SeleniumHQ/selenium/wiki/PageObjects)\n* [PageObject - Martin Fowler](http://martinfowler.com/bliki/PageObject.html)\n\n## API\n\n### `page`\n\nCreates a new page object. The new page object contains some utilities to make\nyour tests a bit more DRY and easier to read.\n\n**Example**\n\n```js\nimport { page, visitable, fillable, clickable } from \"cypress-page-object\";\n\nconst loginPage = page({\n  visit: visitable('/login'),\n  fillUsername: fillable('#username'),\n  fillPassword: fillable('#password'),\n  submit: clickable('[type=\"submit\"]'),\n\n  errorMessage() {\n    return cy.get('.error-message');\n  }\n});\n\ncontext('My Awesome WebSite', () =\u003e {\n\n  it('logs into the website', () =\u003e {\n    loginPage\n      .visit()\n      .fillUsername('john@example.com')\n      .fillPassword('wrong password')\n      .submit()\n      .errorMessage()\n      .should('contain', 'Wrong username and password');\n  });\n\n});\n```\n\nYou can add any property to your page object and they will be accessible from your tests.\n\n```js\nimport { page } from \"cypress-page-object\";\n\nconst loginPage = page({});\n\nloginPage.should('contain', 'My text');\n```\n\n\n\n### `clickable`\n\nClicks a button or input\n\n**Example**\n\n```js\nimport { page, clickable } from \"cypress-page-object\";\n\nconst login = page({\n  submit: clickable('button[type=\"submit\"]')\n});\n\nlogin.submit();\n```\n\n| Parameter          | Type    | Description |\n| ---                | ---     | --- |\n| `selector`         | string  | CSS selector of the element to click |\n\n### `fillable`\n\nFills an input with text\n\n**Example**\n\n```js\nimport { page, fillable } from \"cypress-page-object\";\n\nconst login = page({\n  username: fillable('input#username')\n  password: fillable('input#password')\n});\n\nlogin\n  .username(\"john@doe.com\")\n  .password(\"secret\");\n```\n\n| Parameter          | Type    | Description |\n| ---                | ---     | --- |\n| `selector`         | string  | CSS selector of the input element |\n| `options`          | object  | Additional options |\n| `options.isHidden` | boolean | True to force write hidden inputs |\n\n### `visitable`\n\nLoads a page\n\n**Example**\n\n```js\nimport { page, visitable } from \"cypress-page-object\";\n\nconst login = page({\n  visit: visitable('/login')\n});\n\nlogin.visit();\ncy.url().should('include', '/form')\n```\n\n| Parameter | Type   | Description |\n| ---       | ---    | --- |\n| `path`    | string | Full path of the page to load |\n\n## Development\n\nTBA\n\n## License\n\ncypress-page-object is licensed under the MIT license.\n\nSee [LICENSE](./LICENSE) for the full license text.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsan650%2Fcypress-page-object","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsan650%2Fcypress-page-object","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsan650%2Fcypress-page-object/lists"}