Flutter widget test Finder fails because the widget is outside the bounds of the render tree

user_610587 0
Viewed 6192

Question: What controls the bounds of the "render tree" when running widget tests (flutter_test)?

I ask because I am getting an error on very basic button where it can't find the widget because of its vertical offset being outside the bounds of the "render tree" which seems fixed at 800x600.

I get the message:

Warning: A call to tap() with finder "exactly one widget with text "More Info" (ignoring offstage widgets): Text("More Info", dependencies: [MediaQuery, DefaultTextStyle])" derived an Offset (Offset(400.0, 641.8)) that would not hit test on the specified widget. Maybe the widget is actually off-screen, or another widget is obscuring it, or the widget cannot receive pointer events. Indeed, Offset(400.0, 641.8) is outside the bounds of the root of the render tree, Size(800.0, 600.0). The finder corresponds to this RenderBox: RenderParagraph#1b6b1 relayoutBoundary=up27 The hit test result at that offset is: HitTestResult(HitTestEntry#b18dd(RenderView#408c3), HitTestEntry#a2393()) #0 WidgetController._getElementPoint (package:flutter_test/src/controller.dart:953:25) #1 WidgetController.getCenter (package:flutter_test/src/controller.dart:836:12) #2 WidgetController.tap (package:flutter_test/src/controller.dart:271:18) #3 main. (file:///Users/tommy/Repos/surveyapp/survey/test/widget_test.dart:99:18)

The size of the render tree in that error message is 800 x 600. (Not sure how that is set or why. It is curious to me that it is exactly 800x600? So, it is being set somewhere. Is it because I have a web project and it defaults to that size for some reason when running a test?). Any widget that is past 600 on the offset height can't be found in the test. The screen runs fine on iOS emulator and on Chrome under flutter web. When you use devtools, widget inspector, there are not any layout issues. It is just a button with ancestors column, padding, center, safearea and scaffold as part of a simple stateful widget page.

(I have had this happening on Fluter version 2.12 or higher.)

flutter-test
4 Answers

I had the same problem when tapping a button during my tests.

I don't know how to change the 800x600 size but I manage to find a way to scroll to the button, thanks to this answer https://stackoverflow.com/a/67990754/992201

Here's the final code :

final Finder buttonToTap = find.byKey(const Key('keyOfTheButton'));

await tester.dragUntilVisible(
  buttonToTap, // what you want to find
  find.byType(SingleChildScrollView), // widget you want to scroll
  const Offset(0, 50), // delta to move
);
await tester.tap(buttonToTap);
await tester.pump();
user_9922010

This issue was resolved for me by using following snippet

await tester.ensureVisible(find.byKey(Key(key)));
await tester.pumpAndSettle();
user_160273810

Note: This answer does not answer the question about the reason for the 800x600 but rather addresses the problem for fellow googlers.

I don't know why this happens (my best guess is some startup animation that is also simulated in the test), however adding await tester.pumpAndSettle() seems to fix the issue (hardening the assumption that this is caused by some animation).

I could not find any issues on the topic in the Flutter GitHub repository unfortunately.

So in summary, I believe the problem isn't caused by the 800x600 constraints but something else.

user_67079850

I had the same problem today. The problem comes from the margin:

The following code was the button before fixing the problem:

Container(
   color: Colors.green,
   child: GestureDetector(
       key: Key("resetPsw_back_arrow"),
       child: Container(
          margin: EdgeInsets.only(
              top: myPercent(10, screenHeight),
              right: (screenWidth - (myPercent(4.27, screenWidth) +
                       myPercent(13.1, screenWidth)) >
                          0
                      ? (screenWidth -
                          (myPercent(4.27, screenWidth) +
                              myPercent(13.1, screenWidth))
                      : 0,
              ),
              width: myPercent(4.27, screenWidth),
              height: myPercent(4.27, screenWidth),
              decoration: BoxDecoration(
                  color: Colors.red,
                  image: DecorationImage(
                      image: AssetImage("lib/media/img/forwardArrowMain.png"),
                        fit: BoxFit.contain)),
              ),
              onTap: () {
                if (Navigator.of(context).canPop()) {
                  Navigator.of(context).pop();
                }
              },
            ),
          ),

If you look carefully at the animation during the test, you can see that the tester is not taking into account the margin (it not tap on the button but next to it). So I wrapped the GestureDetector in a container and the problem was solved.

This was the code after the fix:

Container(
    margin: EdgeInsets.only(
    top: myPercent(6, screenHeight),
    right: (screenWidth - (myPercent(4.27, screenWidth) + myPercent(13.1, screenWidth))) > 0
        ? (screenWidth - (myPercent(4.27, screenWidth) + myPercent(13.1, screenWidth)))
        : 0,
    ),
    child: GestureDetector(
        key: Key("resetPsw_back_arrow"),
        child: Container(
            width: myPercent(4.27, screenWidth),
            height: myPercent(4.27, screenWidth),
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage("lib/media/img/forwardArrowMain.png"),
                    fit: BoxFit.contain)),
            ),
            onTap: () {
                if (Navigator.of(context).canPop()) {
                    Navigator.of(context).pop();
                }
              },
            ),
          ),
user_130081140
Related