How to pick image using photo library in maestro with test which works both for ios and android?

[akshithere]

How to pick image using photo library in maestro with test which works both for ios and android?
Currently I am using something like this, But i am unsure why isnt it working. I would be really helpful if someone could guide me to the right direction.

        - runFlow:
          when:
            platform: 'ios'
          commands:
            - tapOn:
                id: 'PXGGridLayout-Info'
                index: 0
            - tapOn: 'add'
      - runFlow:
          when:
            platform: 'android'
          commands:
            - tapOn:
                point: "49%,39%"
            - tapOn: 'done'
      - waitForAnimationToEnd```

[akshithere]

so now i am doing something like,

- runFlow:
    when:
      platform: 'android'
    commands:
      - tapOn: 'Take Photo'
      - tapOn:
          id: com.android.camera2:id/shutter_button
      - tapOn:
          id: com.android.camera2:id/done_button
- runFlow:
    when:
      platform: 'ios'
    commands:
      - tapOn: 'Photo Library'
      - tapOn:
          id: 'PXGGridLayout-Info'
          index: 0
      - tapOn: 'add'

however this does not work as expected, it seems like maybe we cant take photos in the pipeline. Is there a way to preload the images? Am i missing something obvious? any guidance would be really appreciated 🙏

[Fishbowler]

I think you need to account for OS version too - iOS 16/17/18 and Android 12/13/14 are going to have different stuff for this

[Fishbowler]

The one you've given looks like it takes a photo on Android and tries to pick from the gallery on iOS? Makes some sense since the iOS sim doesn't have a camera...

[Fishbowler]

I think this is what you want:

appId: ${APP_ID}
jsEngine: graaljs
# Picks the image from an already open media library picker
---
# Platform-specific media selection
- runFlow:
    when:
      platform: android
    commands:
      # Try SDK 33/34 selector first, then fall back to SDK 30 selector
      - tapOn:
          id: 'com.google.android.providers.media.module:id/icon_thumbnail'
          optional: true
      - tapOn:
          id: 'com.google.android.documentsui:id/thumbnail'
          optional: true

- runFlow:
    when:
      platform: ios
    commands:
      # Try iOS 18 selector first, then fall back to iOS 17 selector
      - tapOn:
          id: 'PXGGridLayout-Info'
          index: 0
          optional: true
      - tapOn:
          text: 'Photo, .*'
          index: 0
          optional: true

Assumes you've already hit an "attach from media library" button or similar, and the OS-specific gallery is now on screen.

[akshithere]

Hey @Fishbowler Thanks a lot for your time. I tried this approach and it seems like on android when i am opening the photo library, by default there is no image there. So it is not selecting any image. I was able to add an image using the addMedia command locally, but in the eas pipeline where we are running our tests, it is unable to "resolve its path" even though it works locally. I am not sure what I am missing.

Here is our workflow file:

on:
  pull_request:
    branches: ["*"]
jobs:
  build_android_for_e2e:
    type: build
    params:
      platform: android
      profile: e2e-ch-dev

  maestro_test_android:
    needs: [build_android_for_e2e]
    type: maestro
    params:
      build_id: ${{ needs.build_android_for_e2e.outputs.build_id }}
      flow_path:
        - maestro/auth
        - maestro/towingFlow
        - maestro/reports/admin
        - maestro/reports/driver
        - maestro/reports/user

[Fishbowler]

You'd need to ask the EAS folks about how to use EAS - that's well outside of my knowledge area.

You are however spot on in that you'll need to do addMedia first.

Could it be directory structure? I'd expect to point Maestro at a folder that contains a config.yaml that tells it which things are tests. The folder would also contain things that aren't tests, like any JS you're running, and any media files that you pass to addMedia commands.

[akshithere]

Yeah you are right, I believe it might be due to when we run the pipeline, then it does a simulator build. Maybe in this build process either our assets is not included or the path changes. Not sure how everyone else is able test media picking in ci pipeline for testing.

[Fishbowler]

They do it with this kind of folder structure:

/
├── app
│   └── <boring source code>
└── e2e
    ├── scripts
    │   └── <javascript test helpers>
    ├── tests
    │   └── <lots of yaml>
    ├── resources
    │   └── <images, etc>
    ├── subflows
    │   └── <utility yaml flows for login, etc>
    └── config.yaml

Pipeline:

• Build app
• Launch Simulator
• Install app
• maestro test ./e2e

One of the tests in ./e2e/tests will include something like:

- addMedia:
    - ../resources/potato.jpeg

before moving on to use the gallery picker