{"id":15177604,"url":"https://github.com/sudharsan-selvaraj/react-webdriver","last_synced_at":"2025-10-26T16:30:45.183Z","repository":{"id":50322816,"uuid":"360095932","full_name":"sudharsan-selvaraj/react-webdriver","owner":"sudharsan-selvaraj","description":"Library to locate react elements by component, props and state using Selenium Webdriver.","archived":false,"fork":false,"pushed_at":"2022-07-29T11:59:12.000Z","size":99,"stargazers_count":25,"open_issues_count":3,"forks_count":7,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-01-31T21:11:28.078Z","etag":null,"topics":["automation","locator","react","reactjs","selenium","selenium-webdriver","testing-tools","webdriver"],"latest_commit_sha":null,"homepage":"","language":"Java","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/sudharsan-selvaraj.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}},"created_at":"2021-04-21T08:47:54.000Z","updated_at":"2024-08-28T11:04:08.000Z","dependencies_parsed_at":"2022-08-04T10:30:34.877Z","dependency_job_id":null,"html_url":"https://github.com/sudharsan-selvaraj/react-webdriver","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/sudharsan-selvaraj%2Freact-webdriver","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sudharsan-selvaraj%2Freact-webdriver/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sudharsan-selvaraj%2Freact-webdriver/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sudharsan-selvaraj%2Freact-webdriver/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sudharsan-selvaraj","download_url":"https://codeload.github.com/sudharsan-selvaraj/react-webdriver/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238366707,"owners_count":19460170,"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","locator","react","reactjs","selenium","selenium-webdriver","testing-tools","webdriver"],"created_at":"2024-09-27T14:41:04.368Z","updated_at":"2025-10-26T16:30:44.797Z","avatar_url":"https://github.com/sudharsan-selvaraj.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-webdriver\n\nAn idea inspired by [@Paul Hammant](https://github.com/paul-hammant) 's [ngWebdriver](https://github.com/paul-hammant/ngWebDriver) project, \u003ci\u003ereact-webdriver\u003c/i\u003e help you to locate web elements in your REACT app using components, props and states for Selenium java tests. It works with Firefox, Chrome and all the other Selenium-WebDriver browsers.\n\n# How it works\n\n\u003ci\u003ereact-webdriver\u003c/i\u003e make use of [resq(React Element Selector Query)](https://github.com/baruchvlz/resq) which does most of the heavy lifting in finding react elements from the DOM.\n\n# Usage\n```java\nChromeDriver driver = new ChromeDriver();\n/* #root is the selector for root element where the react app is rendered */\nReactWebDriver reactWebdriver = new ReactWebDriver((JavascriptExecutor) driver, \"#root\");\n```\n\n### Locator\n```java\n/* Filter just by component name */\nByReact.component(\"NavLink\")\n\n/* Filter by component name and prop */\nByReact.component(\"NavLink\").props(\"{ \\\"name\\\" : \\\"home\\\" }\")\n\n/* Filter by component name and state */\nByReact.component(\"NavLink\").state(\"{ \\\"title\\\" : \\\"Go to home\\\" }\")\n\n/* Filter by component name and both prop \u0026 state */\nByReact.component(\"NavLink\").props(\"{ \\\"name\\\" : \\\"home\\\" }\")state(\"{ \\\"title\\\" : \\\"Go to home\\\" }\")\n```\n## Using Page Objects\nThis work in the same way as WebDriver's page object technology, there is a custom `FindBy` \nannotations for ReactWebDriver:\n```java\n@ByReactComponent.FindBy(\n        name = \"NavLink\",\n        props = \"{\\\"name\\\": \\\"home\\\"}\"\n)\npublic WebElement homeNavLink;\n```\n\n## Example App\nConsider the below React App:\n```javascript\nclass MyComponent extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = {\n            id: props.id\n        };\n    }\n\n    render() {\n        return ( \n            \u003cdiv\u003e Name: { this.props.name} \u003c/div\u003e \n            \u003cdiv\u003e Id: { this.props.id} \u003c/div\u003e    \n        )\n    }\n\n}\n\nconst App = () =\u003e ( \u003c\n    \u003cdiv\u003e\n    \t\u003cMyComponent name = \"java\" id = \"1\" /\u003e\n    \t\u003cMyComponent name = \"javascript\" id = \"2\" /\u003e\n    \u003c/div\u003e\n)\n\nReactDOM.render( \u003cApp/\u003e , document.getElementById('root'))\n```\n\n## To select all \u003ci\u003e\u003cb\u003eMyComponent\u003c/b\u003e\u003c/i\u003e\n```java\n driver.findElements(ByReact.component(\"MyComponent\"))\n```\nor using a wildcard selector:\n```java\ndriver.findElements(ByReact.component(\"*Component\"))\nor\ndriver.findElements(ByReact.component(\"My*\"))\n```\n\n## Filtering by props\n```java\n driver.findElement(ByReact.component(\"MyComponent\").props(\"{ \\\"name\\\": \\\"java\\\" }\"))\n```\nwill return the first \u003cb\u003eMyComponent\u003c/b\u003e. \n## Filtering by state\n```java\n driver.findElement(ByReact.component(\"MyComponent\").state(\"{ \\\"id\\\": \\\"1\\\" }\"))\n```\n## Filtering by both props and state\n```java\n driver.findElement(ByReact.component(\"MyComponent\").props(\"{ \\\"name\\\": \\\"java\\\" }\").state(\"{ \\\"id\\\": \\\"1\\\" }\"))\n```\n# Retrieve React Properties from element\nCreate a ReactDriver instance\n```java\nChromeDriver driver = new ChromeDriver();\nReactWebDriver reactWebdriver = new ReactWebDriver((JavascriptExecutor) driver, \"#root\");\n```\nUsing the reactDriver, we will find the required ReactComponent using\n```java\nReactComponent component = reactWebDriver.getComponent(ByReact.component(\"MyComponent\"));\n```\nBy default, `getComponent` method will return the first matching node from the DOM if more than one node present for the given selector.\nWe can also find a specific node by passing the index as below\n```java\nReactComponent component = reactWebDriver.getComponent(ByReact.component(\"MyComponent\"), 1);\n```\nThis will fetch the 2nd element from the list of matched elements. Index starts from `0`.\nNow using the react component, we can fetch the `props` and `state` of the element\n```java\nassertEquals(component.getProp(\"name\"), \"java\");\nassertEquals(component.getProp(\"id\"), \"1\");\n```\nand to retrieve the state\n```java\nassertEquals(component.getState(\"id\"), 1);\n```\n# Installation\n\n## Maven\n```xml\n\u003cdependency\u003e\n  \u003cgroupId\u003eio.github.sudharsan-selvaraj\u003c/groupId\u003e\n  \u003cartifactId\u003ereact-webdriver\u003c/artifactId\u003e\n  \u003cversion\u003e1.0\u003c/version\u003e\n\u003c/dependency\u003e\n```\n\n## Gradle\n```groovy\nimplementation group: 'io.github.sudharsan-selvaraj', name: 'react-webdriver', version: '1.0'\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsudharsan-selvaraj%2Freact-webdriver","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsudharsan-selvaraj%2Freact-webdriver","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsudharsan-selvaraj%2Freact-webdriver/lists"}