https://github.com/sudharsan-selvaraj/react-webdriver

Library to locate react elements by component, props and state using Selenium Webdriver.
https://github.com/sudharsan-selvaraj/react-webdriver

automation locator react reactjs selenium selenium-webdriver testing-tools webdriver

Last synced: 4 months ago
JSON representation

Library to locate react elements by component, props and state using Selenium Webdriver.

• Host: GitHub
• URL: https://github.com/sudharsan-selvaraj/react-webdriver
• Owner: sudharsan-selvaraj
• License: mit
• Created: 2021-04-21T08:47:54.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-07-29T11:59:12.000Z (over 2 years ago)
• Last Synced: 2024-09-28T14:41:24.050Z (4 months ago)
• Topics: automation, locator, react, reactjs, selenium, selenium-webdriver, testing-tools, webdriver
• Language: Java
• Homepage:
• Size: 96.7 KB
• Stars: 25
• Watchers: 5
• Forks: 7
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-webdriver

An idea inspired by [@Paul Hammant](https://github.com/paul-hammant) 's [ngWebdriver](https://github.com/paul-hammant/ngWebDriver) project, react-webdriver 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.

# How it works

react-webdriver 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.

# Usage

```java

ChromeDriver driver = new ChromeDriver();

/* #root is the selector for root element where the react app is rendered */

ReactWebDriver reactWebdriver = new ReactWebDriver((JavascriptExecutor) driver, "#root");

```

### Locator

```java

/* Filter just by component name */

ByReact.component("NavLink")

/* Filter by component name and prop */

ByReact.component("NavLink").props("{ \"name\" : \"home\" }")

/* Filter by component name and state */

ByReact.component("NavLink").state("{ \"title\" : \"Go to home\" }")

/* Filter by component name and both prop & state */

ByReact.component("NavLink").props("{ \"name\" : \"home\" }")state("{ \"title\" : \"Go to home\" }")

```

## Using Page Objects

This work in the same way as WebDriver's page object technology, there is a custom `FindBy` 

annotations for ReactWebDriver:

```java

@ByReactComponent.FindBy(

        name = "NavLink",

        props = "{\"name\": \"home\"}"

)

public WebElement homeNavLink;

```

## Example App

Consider the below React App:

```javascript

class MyComponent extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            id: props.id

        };

    }

    render() {

        return ( 

            
 Name: { this.props.name} 
 

            
 Id: { this.props.id} 
    

        )

    }


}

const App = () => ( <

    


    	

    	

    

)


ReactDOM.render(  , document.getElementById('root'))

```

## To select all MyComponent

```java

 driver.findElements(ByReact.component("MyComponent"))

```

or using a wildcard selector:

```java

driver.findElements(ByReact.component("*Component"))

or

driver.findElements(ByReact.component("My*"))

```

## Filtering by props

```java

 driver.findElement(ByReact.component("MyComponent").props("{ \"name\": \"java\" }"))

```

will return the first MyComponent. 

## Filtering by state

```java

 driver.findElement(ByReact.component("MyComponent").state("{ \"id\": \"1\" }"))

```

## Filtering by both props and state

```java

 driver.findElement(ByReact.component("MyComponent").props("{ \"name\": \"java\" }").state("{ \"id\": \"1\" }"))

```

# Retrieve React Properties from element

Create a ReactDriver instance

```java

ChromeDriver driver = new ChromeDriver();

ReactWebDriver reactWebdriver = new ReactWebDriver((JavascriptExecutor) driver, "#root");

```

Using the reactDriver, we will find the required ReactComponent using

```java

ReactComponent component = reactWebDriver.getComponent(ByReact.component("MyComponent"));

```

By default, `getComponent` method will return the first matching node from the DOM if more than one node present for the given selector.

We can also find a specific node by passing the index as below

```java

ReactComponent component = reactWebDriver.getComponent(ByReact.component("MyComponent"), 1);

```

This will fetch the 2nd element from the list of matched elements. Index starts from `0`.

Now using the react component, we can fetch the `props` and `state` of the element

```java

assertEquals(component.getProp("name"), "java");

assertEquals(component.getProp("id"), "1");

```

and to retrieve the state

```java

assertEquals(component.getState("id"), 1);

```

# Installation

## Maven

```xml

  io.github.sudharsan-selvaraj

  react-webdriver

  1.0

```

## Gradle

```groovy

implementation group: 'io.github.sudharsan-selvaraj', name: 'react-webdriver', version: '1.0'

```