I starting to test a React Native app, initially on iOS, with Appium and Weddriver.io. I've got the framework installed and running, and set up an initial test - in which I want to click a T&C checkbox and then a submit button on the initial welcome screen of my app. However neither the "click" nor the "touchAction" do anything - they don't trigger the onPress action callback.
The selectors are working OK, as I can query the "label" of the elements selected and they are correct (and if I purposefully break the accessubility id I get errors). I can also write to an field which I added and I can change the text value to another string from the test, so I know I've got it all set up and communicating with my app in the simulator OK.
So why might the click or touch actions not be working?
I am using React Native Base, but I have replaced the UI components with ones straight from React Native to simplify that (I wondered if RNB components had some sub-components which might receive the clicks).
I have debug logging in the onPress callback, so if I click the button manually I see the logs. But the running the Mocha tests doesn't log the attempt.
Relevant Package JSON:
deps:
"native-base": "~3.4",
"react": "17.0.2",
"react-native": "0.67.4",
Dev
"@babel/core": "^7.17.10",
"@babel/preset-env": "^7.17.10",
"@babel/register": "^7.17.10",
"@babel/runtime": "^7.17.10",
"chai": "^4.1.2",
"mocha": "^8.0.1",
"webdriverio": "^7.20.9"
I've installed Appium 8.5.5 globally and am running that in a terminal.
Node: v16.15.0
Npm: 8.5.5
I have tried many things, like waitForDisplayed, clicking the button before/ and or after the successful input field entry, adding a and clicking or touching it.
e.g. in my component (the checkbox and button a real, the input and link were just for testing)
async function onClickAgree() {
console.log('HelpScreen.onClickAgree')
}
...
<Checkbox accessibilityLabel={ 'help_agree_checkbox' }
accessible={true}
isChecked={agree}
onChange={onChangeAgreeCheckbox}
value="agree"
label="Accept terms and conditions"
marginX="30"/>
<Button accessibilityLabel={ 'help_agree_submit_button' }
accessible={true}
width={300}
onPress={() => onClickAgree()}
title="Get Started"
>
Get Started
</Button>
<Link
accessibilityLabel="help_agree_test_link"
accessible={true}
onPress={onClickAgree}>
Test link
</Link>
<Input accessibilityLabel={ 'help_agree_test_input' }
accessible={true}
value={testInputContent} onChangeText={setTestInputContent} minWidth={200}></Input>
and in the test:
describe('Initial test...', function (){
let client;
beforeEach(async function () {
client = await remote(opts);
});
after(async function () {
await client.deleteSession()
})
it('should do a test', async function () {
const button = await client.$("~help_agree_submit_button")
// await button.click()
await button.touchAction('tap')// doesn't work!
await client.$("~help_agree_submit_button").click()// doesn't work!
//
// TODO: why don't any of the Tap/Clicks work??
const link = await client.$("~help_agree_test_link")
await link.click()// doesn't work!
await link.touchAction('tap')// doesn't work!
//
const input = await client.$("~help_agree_test_input")
await input.setValue('QA testing injection content') // works
//
await link.click()// doesn't work!
await link.touchAction('tap')// doesn't work!
//
await input.setValue('QA2 testing injection content') // works!
//
await button.click() // doesn't work!
await button.touchAction('tap')// doesn't work!
//
const field = await client.$("~help_agree_checkbox")
// await field.waitForClickable({ timeout: 3000 }) // no such method, webdriverio docs: not supported in native!
await field.waitForDisplayed({ timeout: 3000 })
// const field = await client.$("Checkbox");
// const field = await client.$("ForwardRef(Checkbox)") // invalid but this is the name from the inspector
await field.click()
await field.touchAction('tap')
I'm guessing that there might be some kind of permission or security issue.
