[v1.34.1] Component with position: 'absolute' is not recognised

[wonderlul]

Describe the bug
Component with position: 'absolute' is not recognised.

To Reproduce
Set one to position: 'absolute'

Screenshots
The component with position set to 'absolute' is this dropdown with three options.

Environment information (please complete the following information):

• Maestro version [1.34.1]
• Platform: [Android Simulator API 33 ]
• Framework: [React Native 0.72.6]
• Host [Mac M1]

Additional context
I don't know if this is considered a bug or is it completely understandable behaviour. If so, please forgive me and close the ticket :)

Best regards

[grsoares-zoe]

I wonder if you found any workaround for this @wonderlul? I have the exact same issue on iOS.

[idrakimuhamad]

This only happened for me on Android. On iOS, studio able to find the element. Also, from what I observe, this only happened to element that have absolute positioned, and also positioned outside of the parent layout. eg negative position.

[jariwalabhavesh]

I am also facing this issue with component having absolute styling. I am facing issue in IOS only. In android it is working fine for me.

[yakupdurmus]

I upgraded to v1.35.0 same issue continued

[ChrisBindy]

Is there any update for this, as I have just run into this situation myself. It occurs on both android emulator and iOS simulator and only for components that have absolute positioning.

Maestro version [1.36.0]
Platform: [Android Simulator API 34 and iPhone 15 Pro Max 17.4 Simulator]
Framework: [React Native 0.72.5]
Host [Mac Intel]

[friedolinfoerder]

I have the exact same error for iOS and Android.

Label	Value
Maestro version	1.36.0
Platform	Android Emulator API 32, iPhone 14 16.2 Simulator
Framework	React Native 0.71.14
Host	Mac Silicon M1

[Antho2407]

If it can help anyone, one workaround was to make sure the parent Touchable element had accessibility prop set to false to enable visibility of all its children, and the nested Touchable element had to hold the absolute positioning (not its child).
I still hope this could be improved on the Maestro side 👍

[Laecherlich]

I just started implementing maestro in our app and now ran into this issue on ios.

Is there any update to this?

[friedolinfoerder]

Is anyone actively working on a fix for this issue or has more information what is the root cause for this?

The bug is stopping us from a wider adoption of maestro e2e testing, because we are using absolute positioned elements for navigation and using workarounds is quite complicated and not robust to changes.

[Saphirah]

So the issue is, that with the accessibility property set to true, and position is absolute, react native will merge the children into a single accessible element. .
For any Pressable, Touchable etc... the default value of "accessible" is true.
So if you have a "Pressable" around multiple components, your components will be merged into one, resulting in something like this:

As you can see, my text components got merged, and i can only select by text, if i write both lines. I am unable to tap the individual child elements of the Pressable. This is confusing, if you don't know it.

What i can do is, give the Pressable a testID and tell Maestro to tap that id. That works perfectly fine.
At least on my side it is possible to find and tap absolute positioned elements as long as the parents are not accessible.

I don't think this is something Maestro can fix.

[Saphirah]

Here is a workaround. Keep in mind, this might break accessibility tests, if you do so.
But it allows you to run your other tests normally.

- launchApp:
    appId: "com.example.app"
    arguments: 
       isTesting: "true"

Put this in any JS file and import it

import {LaunchArguments} from "react-native-launch-arguments";

let launchArgs = LaunchArguments.value();
function isTesting(){
    return launchArgs.isTesting;
}

[
    TouchableWithoutFeedback,
    TouchableOpacity,
    TouchableNativeFeedback,
    TouchableHighlight,
    Pressable
].forEach(component => {
    component.defaultProps ??= {};
    component.defaultProps.accessible = !isTesting();
});

In newer versions of RN, defaultProps is deprecated. While it still works right now, i recommend you to create your own components. This may or may not be a bigger refactoring task.

import {Pressable as NativePressable, PressableProps as NativePressableProps} from "react-native";

export type PressableProps = NativePressableProps;
export default function Pressable(props: PressableProps){
    return(
        <NativePressable accessible={!isTesting()} {...props}/>
    );
}