https://github.com/taiko-react/taiko-react
React component selector plugin for Taiko
https://github.com/taiko-react/taiko-react
gauge react reactjs selector taiko
Last synced: 5 months ago
JSON representation
React component selector plugin for Taiko
- Host: GitHub
- URL: https://github.com/taiko-react/taiko-react
- Owner: taiko-react
- License: apache-2.0
- Created: 2019-04-12T18:53:02.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-06-16T10:32:27.000Z (over 1 year ago)
- Last Synced: 2025-07-05T10:50:02.113Z (6 months ago)
- Topics: gauge, react, reactjs, selector, taiko
- Language: CoffeeScript
- Homepage: https://www.npmjs.com/package/taiko-react
- Size: 675 KB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# taiko-react [](https://travis-ci.org/taiko-react/taiko-react) [](https://coveralls.io/github/taiko-react/taiko-react?branch=master) [](https://snyk.io/test/github/tkshnwesper/taiko-react?targetFile=package.json) [](https://greenkeeper.io/) [](https://circleci.com/gh/taiko-react/taiko-react) [](https://ci.appveyor.com/project/tkshnwesper/taiko-react)
`taiko-react` allows you to select React components on the webpage that you want to perform tests on.
It uses [resq](https://github.com/baruchvlz/resq) to find the React components.
## Pre-requisites
1. The webpage that is being tested needs to be using React.
2. React needs to be running in development mode (not production).
## Install
```Shell
npm i taiko-react
```
## Usage
Load up the plugin and navigate to the React powered webpage ⚡️
```js
const { openBrowser, goto, loadPlugin } = require('taiko')
const { ID, clientHandler, react } = require('taiko-react')
await loadPlugin(ID, clientHandler)
await openBrowser()
await goto("http://localhost:8080")
```
Now you may use various selectors to find React elements on the page 🔎
### Select using a **string**
```js
const selection = await react('App')
```
### Select using a **React component class**
```jsx
class App extends React.Component {/* ... */}
const selection = await react(App)
```
### Select using a **function**
```jsx
function App() {
return
Hello world!
}
const selection = await react(App)
```
### Select using a **React component instance**
```jsx
const selection = await react()
```
## API
### `.exists()` _-> `Boolean`_
Checks whether the component exists.
```jsx
const selection = await react(App)
assert(selection.exists())
```
### `.length()` _-> `Number`_
Finds the number of said components.
```jsx
const list = await react(List)
const listItem = await react(ListItem, { multiple: true })
assert(list.length() === 1)
assert(listItem.length() === 3)
```
## Functional tests
### Status
[](https://travis-ci.org/taiko-react/taiko-react-functional-tests)
### Repository
[taiko-react/taiko-react-functional-tests](https://github.com/taiko-react/taiko-react-functional-tests)
Made with 💟 + ☕️ from 🇮🇳