Maestro testing framework does not recognize InkWell in a Card in a Flutter app

Question

In my Flutter project, I'm currently testing Maestro for my end-to-end tests.

It works well, but I just came across a weird bug (as explained here).

Let's say I create a Card, with an InkWell in it, as detailed below:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Card(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text("Introduction text"),
            SizedBox(height: 24),
            Material(
              type: MaterialType.transparency,
              child: InkWell(
                onTap: () => print("PRESSED"),
                child: Text("PRESS"),
              ),
            ),
          ],
        ),
      ),
    );
  }

Now, if I test it with Maestro, it does not see the PRESS button (I even tried it with Maestro Studio). It only sees the whole card as a single component, as if everything was flattened.

But as soon as I add another clickable widget in the card, Maestro works as expected and sees every clickable element in the card.

So the first workaround I could obviously think of is to add an invisible clickable widget in every card in that situation, but:

• I would need to do that in multiple parts of my app
• it's very ugly

So my question is: is there a better/cleaner workaround that I could implement so Maestro works in my use case, without changing any design aspect of my page?

Thanks.

Answer 1

After a deep dive into the Flutter SDK, especially the TextButton source code, I finally found a clean way to solve my problem by using the Semantics widget with a specific argument as described below:

Semantics(
  container: true,
  child: Material(
    type: MaterialType.transparency,
    child: InkWell(
      onTap: () => print("PRESSED"),
      child: Text("PRESS"),
    ),
  ),
),

Now, Maestro recognizes the InkWell widget as expected.