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]

trafficstars

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.

[linear[bot]]

MA-2334 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.

[Fishbowler]

Have you taken a look at this bit of the docs? https://docs.maestro.dev/platform-support/react-native#interacting-with-nested-components-on-ios

[joaolobao380]

I solved it, I was able to navigate through the component using the arrows. Thanks!

[keyuls]

Having the same issue in the iOS app. @joaolobao380 what's the solution you found?

[joaolobao380]

@keyuls Instead of using the component's scroll for testing, use the arrows in the upper left corner to navigate.

[yolpsoftware]

If you have an iOS picker somewhere on your UI, without these arrow buttons, it still is quite cumbersome to test them.

I'm using swipe commands to test the pickers. And because of #2149, I need to define a separate swipe command for each device resolution.

If anyone has a better solution, thanks for sharing!