Taiko: Feature request: React Component selectors

[tkshnwesper]

Hi,

I think that it might be possible to find React Components while in development mode (since the React browser plugin is able to do it). Testing API would become super intuitive with that since we would be able to just find elements by component name and/or prop values and not worry about class or id names or even data tags for locating elements.

The API could probably look something like:

import React from 'react'
import { List, Button } from 'semantic-ui-react'
import { react, click } from 'taiko'

//...

react(List).exists() // simple

react(Button, { disabled: false }).text() === "Save" // finding using props

click(react(<Button disabled={false}>Save</Button>)) // jsx style

Cheers!

[BugDiver]

@tkshnwesper, your idea looks very interesting (knowing ReactJS popularity). I think it could be a taiko plugin (taiko-react). Taiko provides a way to extend its API.
We would love to help you if you are willing to contribute.
You can refer these links to know more about taiko plugins.

• Discussion about taiko plugin ecosystem
• https://taiko-preview.gauge.org/#loadplugin

Here a few taiko plugins

• https://github.com/saikrishna321/taiko-diagnostics
• https://github.com/getgauge-contrib/taiko-screencast

[SrinivasanTarget]

@tkshnwesper @BugDiver webdriver.io uses resq for querying react components.

[tkshnwesper]

Thanks for your replies :)
@BugDiver It would be my pleasure to contribute!
@SrinivasanTarget thank you for suggesting the library! 🎉

[tkshnwesper]

I started working on this and been doing so actively for the last couple of days. It currently supports just one API function, and I'll be expanding it to API similar to what taiko supports and even integrate it with taiko's existing selectors.

As of now there is a little bit of bloat present in the library because I got quite caught up in the middle of adding more features and publishing it as soon as I could 😅

I've used resq as pointed out by @SrinivasanTarget , and also thank you for sharing all those links @BugDiver . They helped a lot and saved lots of time that I would have spent searching 🎉

Here's the repo link:
https://github.com/tkshnwesper/taiko-react

Please feel free to contribute, suggest ideas and feedback, etc ✨

Cheers!

[zabil]

Looks good!

From what I understand this plugin is useful for getting virtual dom representation of the queried component.
I am not sure if it can fire events. But I can see the following workflow

• Use Taiko api to perform actions
• Use taiko-react plugin to read the component state and assert.

Is this right?

[tkshnwesper]

Thanks @zabil !

Currently, the workflow that you have mentioned is correct ✅ and that is how both of them could be made to work together.

However, there might be a way to fire events through taiko-react as well. I would have to do some research to learn how to implement this but I am pretty confident that it's possible.

I understand the importance of having this as it is the foundation behind integrating taiko-react with the page actions. I'll mostly probably start working on this once I finish wiring up some basic selectors and api.

I had a conversation with @sriv today, and he shared some excellent ideas related to integrating taiko with various UI frameworks.

Cheers!

[tkshnwesper]

Added functional tests ☑️
Moved to organization https://github.com/taiko-react/taiko-react ☑️

[SrinivasanTarget]

Good one Saurabh @tkshnwesper