I’m experiencing an issue when using Maestro to perform end-to-end tests on my React Native application, specifically with the RNPickerSelect component on iOS.

[joaolobao380]

Problem Description:

When running tests with Maestro on iOS, I can tap on the RNPickerSelect component, and it successfully opens the modal picker. However, I cannot interact with or select any of the options within the picker modal using Maestro. It seems that Maestro recognizes the modal as a whole but cannot access or interact with the child elements (the individual picker options) inside the modal.

Environment:

Maestro Version: [1.38.1] React Native Version: [0.74.5] Expo version: [51.0.28] RNPickerSelect Version: [9.3.1] Picker: [2.7.5] iOS Version: [16.4] Device/Simulator: [Iphone 11]

Steps to Reproduce:

1. Use the RNPickerSelect component in a React Native application.
2. Configure it with multiple options.
3. Write a Maestro test that attempts to tap on the picker and select an option.
4. Run the test on iOS.

Install and use

npm install @react-native-picker/picker
expo install @react-native-picker/picker

import RNPickerSelect from 'react-native-picker-select';
import React, { useState } from 'react';
import { View } from 'react-native';

const MyPickerComponent = () => {
  const [selectedValue, setSelectedValue] = useState(null);

  const items = [
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
  ];

  return (
    <View>
      <RNPickerSelect
        onValueChange={(value) => setSelectedValue(value)}
        items={items}
        value={selectedValue}
      />
    </View>
  );
};

Expected Behavior:

Maestro should be able to interact with the picker modal and select an option from the list.

Actual Behavior:

Maestro opens the picker modal but cannot access or interact with the options inside it. It seems unable to identify the child elements within the modal.