React selector is not working without .withProps methods

vvedachalam commented 5 years ago

The ReactSelector issue is, when I use eact component name with .withProps, it is working but if I use only react component name, then it is not working.

The below code works const INDUSTRYDROPDOWN = ReactSelector('SelectInput').withProps('name', 'industry'); the below code doesnot work const INDUSTRYDROPDOWN = ReactSelector('SelectInput'); There is only one SelectInput field

I am using TestCafe with Cucumber-js with Typescript.

Page.ts Code:
import { Selector } from 'testcafe'
import { testController } from '../../support/testControllerHolder'
import { waitForReact, ReactSelector } from 'testcafe-react-selectors';

const INDUSTRYDROPDOWN = ReactSelector('SelectInput');

getIndustry(){
    return INDUSTRYDROPDOWN.with({ boundTestRun: testController });
}

.........

pageStep.ts
Given(/^I access mandate form$/, async () => {
await testController.navigateTo(signuppage.getSignUpURL());
}
Then(/^I can see Industry field$/, async () => {
await testController
.expect(signuppage.getIndustry().visible).ok();
}

............

form.feature
Scenario: Mandate Form is filled successfully
Given I access mandate form
Then I can see Industry field

If you change the react selector with .withProps const INDUSTRYDROPDOWN = ReactSelector('SelectInput').withProps('name', 'industry'); then it works fine. There is only one 'SelectInput' field

vvedachalam commented 5 years ago

UPDATE: If I use .findReact('dom-ele') , theen it works fine

getIndustry(){ return INDUSTRYDROPDOWN.findReact('div').with({ boundTestRun: testController }); }

However, this complicates the locator selection. So if we can fix the issue, it will be great. NOTE: getReact() has got the same issue too

kirovboris commented 5 years ago

The .withProps('name', 'industry') method in

ReactSelector('SelectInput').withProps('name', 'industry')

internally uses the same mechanism as ReactSelector does. So it's currently difficult to determine the reason of that behavior. A simple working example would be very helpful. Also, please note that ReactSelector looks for the root dom node for a react component. If you use .findReact, it looks for a nested dom node. So check for visibility can give a different result in some cases, e.g., if a parent component is a position:fixed element.

kirovboris commented 5 years ago

I will close the issue because no activity has been encountered for a long time. Feel free to reopen the issue if the problem persists and you can provide an example to reproduce it.

vvedachalam commented 5 years ago

@kirovboris The advantage of using reactSelector is the elimination of complex locator usage.

Here I can navigate to surname easily by using React Selector ReactSelector('ReactSurName') rather using ReactSelector('ReactSurName').findReact('div') Hope this will give more insight on the prob

AndreyBelym commented 5 years ago

Likely it's a bug in ReactSelector caused by ReactSelector's internal functions that can't correctly handle the DOM tree of your page. Could you please provide a sample page to reproduce the issue?

DevExpress / testcafe-react-selectors

React selector is not working without .withProps methods #123