{"id":15433930,"url":"https://github.com/abhinaba-ghosh/protractor-react-selector","last_synced_at":"2026-01-20T14:33:34.107Z","repository":{"id":65476656,"uuid":"216230297","full_name":"abhinaba-ghosh/protractor-react-selector","owner":"abhinaba-ghosh","description":"React element locator for protractor using component, props and states","archived":false,"fork":false,"pushed_at":"2020-07-22T16:23:17.000Z","size":128,"stargazers_count":2,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-27T01:06:55.005Z","etag":null,"topics":["props","protractor","protractor-plugin","react","react-components","react-locator","reactjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/protractor-react-selector","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/abhinaba-ghosh.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"patreon":"user?u=32109749","custom":["paypal.me/abhinabaghosh"]}},"created_at":"2019-10-19T15:46:11.000Z","updated_at":"2020-07-22T16:23:19.000Z","dependencies_parsed_at":"2023-01-25T06:25:16.416Z","dependency_job_id":null,"html_url":"https://github.com/abhinaba-ghosh/protractor-react-selector","commit_stats":null,"previous_names":["abhinaba1080/protractor-react-selector"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/abhinaba-ghosh/protractor-react-selector","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhinaba-ghosh%2Fprotractor-react-selector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhinaba-ghosh%2Fprotractor-react-selector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhinaba-ghosh%2Fprotractor-react-selector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhinaba-ghosh%2Fprotractor-react-selector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abhinaba-ghosh","download_url":"https://codeload.github.com/abhinaba-ghosh/protractor-react-selector/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhinaba-ghosh%2Fprotractor-react-selector/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28604935,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T12:01:53.233Z","status":"ssl_error","status_checked_at":"2026-01-20T12:01:46.545Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["props","protractor","protractor-plugin","react","react-components","react-locator","reactjs"],"created_at":"2024-10-01T18:36:10.315Z","updated_at":"2026-01-20T14:33:34.090Z","avatar_url":"https://github.com/abhinaba-ghosh.png","language":"JavaScript","funding_links":["https://patreon.com/user?u=32109749","paypal.me/abhinabaghosh"],"categories":[],"sub_categories":[],"readme":"# Protractor-React-Selector\n\n[![Build Status](https://circleci.com/gh/abhinaba-ghosh/protractor-react-selector.svg?style=shield\u0026branch-=master)](https://app.circleci.com/pipelines/github/abhinaba-ghosh/protractor-react-selector)\n[![NPM release](https://img.shields.io/npm/v/protractor-react-selector.svg 'NPM release')](https://www.npmjs.com/package/protractor-react-selector)\n\nReactJS is one of the most widely use Front-End libraries in the web. Along side React, many developers use styling tools that will minify or re-write the class attribute values attached to the HTML elements via className props in JSX. These modifications and overwrites make it difficult to select the generated HTML using the WebDriver's query commands like findElement or findElements since it's not guaranteed that the class name will remain the same.\n\nWorry Not! Here We Introduce **Protractor-React-Selector** :hatching_chick:\n\n_protractor-react-selector_ is lightweight plugin to help you to locate web elements in your REACT app using props and states.Internally, protractor-react-selector uses a library called [resq](https://github.com/baruchvlz/resq) to query React's VirtualDOM in order to retrieve the nodes.\n\nRead complete setup Blog [here](https://medium.com/@abhinabaghosh.1994/test-your-react-app-efficiently-with-protractor-b8406db9148f)\n\n## Installation\n\nInstall this module locally with the following command to be used as a (dev-)dependency:\n\n```shell\nnpm install --save protractor-react-selector\n```\n\n## TSConfig settings for type definition\n\n```js\n{\n  \"compilerOptions\": {\n    \"sourceType\": \"module\",\n    \"types\": [\"node\", \"protractor-react-selector\"]\n  }\n}\n```\n\n## Alert\n\n- protractor-react-selector supports NodeJS 8 or higher\n- cypress-react-selector supports NodeJS 8 or higher\n\n## Configuration\n\n_protractor-react-selector_ can be used as a plugin in your protractor configuration file with the following code:\n\n```typescript\nexports.config = {\n  // ... the rest of your config\n  plugins: [\n    {\n      // The module name\n      package: 'protractor-react-selector',\n    },\n  ],\n};\n```\n\n## How to use React Selector?\n\nLets take this example REACT APP:\n\n```jsx\n// imports\n\nconst MyComponent = ({ someBooleanProp }) =\u003e (\n  \u003cdiv\u003eMy Component {someBooleanProp ? 'show this' : ''} \u003c/div\u003e\n);\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cMyComponent /\u003e\n    \u003cMyComponent someBooleanProp={true} /\u003e\n  \u003c/div\u003e\n);\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n#### Wait for application to be ready to run tests\n\nTo wait until the React's component tree is loaded, add the `waitForReact` method to fixture's `before` hook.\n\n```ts\nawait browser.waitForReact(timeOut?:number=10000, reactRoot?:string='#root')\n```\n\n```js\nbeforeAll(() =\u003e {\n   await browser.get('http://localhost:3000/myApp')\n   await browser.waitForReact()\n})\n```\n\nthis will wait to load react inside your app. waitForReact automatically find out the react root of your application.\n\nThe default timeout for waitForReact is `10000` ms. You can specify a custom timeout value:\n\n```js\nawait browser.waitForReact(30000);\n```\n\n#### Wait to Load React for different react roots\n\nIt may even possible that you have different REACT roots (different REACT instances in same application). In this case, you can specify the `CSS Selector` of the target root.\n\n```js\nconst App = () =\u003e (\n  \u003cdiv id=\"mount\"\u003e\n    \u003cMyComponent /\u003e\n    \u003cMyComponent someBooleanProp={true} /\u003e\n  \u003c/div\u003e\n);\n```\n\nThere is some application which displays react components asynchronously. You need to pass root selector information to the react selector.\n\n```ts\n// if your react root is set to different selector other than 'root'\n// then you don't need to pass root element information\nawait browser.waitForReact(10000, '#mount');\n```\n\n#### Find Element by React Component\n\nYou should have [React Develop Tool](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) installed to spy and find out the component name as sometimes components can go though modifications. Once the React gets loaded, you can easily identify an web element by react component name:\n\n```ts\n// with only component. If you don't provide any root element, it assume that root is set to '#root'\nconst myElement = element(by.react('MyComponent'));\n\n// to fetch all elements matched with component, props and state, you can use protractor native 'all' method\nconst myElement = element.all(by.react('MyComponent'));\n```\n\n#### Element filtration by Props and States\n\nYou can filter the REACT components by its props and states like below:\n\n```ts\nconst myElement = element(\n  by.react('MyComponent', { someBooleanProp: true }, { someBooleanState: true })\n);\n```\n\n#### Wildcard selection\n\nYou can select your components by partial name use a wildcard selectors:\n\n```ts\n// Partial Match\nconst myElement = element(by.react('My*', { someBooleanProp: true }));\n\n// Entire Match\nconst myElement = element(by.react('*', { someBooleanProp: true })); // return all components matched with the prop\n```\n\n## Sample Tests\n\nCheckout sample tests [here](./test/)\n\n## Tool You Need\n\n[React-Dev-Tool](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) — You can inspect the DOM element by simply pressing the f12. But, to inspect REACT components and props, you need to install the chrome plugin.\n\n## Tell me your issues\n\nyou can raise any issue [here](https://github.com/abhinaba1080/protractor-react-selector/issues)\n\n## Contribution\n\nAny pull request is welcome.\n\nIf it works for you , give a [Star](https://github.com/abhinaba1080/protractor-react-selector)! :star2: :star: :star2:\n\n_- Copyright \u0026copy; 2019- [Abhinaba Ghosh](https://www.linkedin.com/in/abhinaba-ghosh-9a2ab8a0/)_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhinaba-ghosh%2Fprotractor-react-selector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabhinaba-ghosh%2Fprotractor-react-selector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhinaba-ghosh%2Fprotractor-react-selector/lists"}