search

storybookjs / react-native

đŸ““ Storybook for React Native!
https://storybook.js.org
MIT License
1k stars 142 forks source link

Appium Compatibility / Accessibility Changes #153

Open henrymoulton opened 3 years ago

henrymoulton commented 3 years ago

Is your feature request related to a problem? Please describe.

To enable Visual Testing using AWS Device Farm, we're looking at using Appium to click through our Storybook and take screenshots on every story. We would ideally choose Detox, however Device Farm doesn't support Detox due to Detox not supporting real devices.

If this solution works, it will enable automated Visual Testing using real devices and React Native, without requiring the Storybook Server to be running.

At the moment Appium and React Native work together by making use of the accessibilityLabel rather than testID (see more here and here )

I can see that the OnDeviceUI of Storybook currently uses testIDs https://github.com/storybookjs/react-native/blob/master/app/react-native/src/preview/components/OnDeviceUI/navigation/button.tsx#L34

which enables it to test using Detox: https://github.com/storybookjs/react-native/blob/master/examples/native/e2e/story-list.spec.ts

Describe the solution you'd like

I would add testID and accessibilityLabel to various parts of the Storybook UI, including:

https://github.com/storybookjs/react-native/blob/master/app/react-native/src/preview/components/StoryListView/index.tsx#L180

https://github.com/storybookjs/react-native/blob/master/app/react-native/src/preview/components/OnDeviceUI/navigation/button.tsx#L34

Describe alternatives you've considered

I've tried selecting stories using class chain and predicate string selectors but have found them to be inaccurate. https://webdriver.io/docs/selectors/#ios-uiautomation

Are you able to assist bring the feature to reality?

Yes, happy to make a PR.

henrymoulton commented 3 years ago

Actually just seen

https://github.com/storybookjs/react-native/blob/master/app/react-native/src/preview/components/StoryListView/index.tsx#L60

for the StoryListView

dannyhw commented 3 years ago

@henrymoulton hey, does the id in the story list view solve it for you or do you think it would be good to have more acessibilityIDs? I would be happy to accept these changes if you would like to make a PR just let me know if you need any help or direction :)

henrymoulton commented 3 years ago

Believe a few more a11yIds would help :)

I'll make the PR soon, thanks for replying!