grabToImage not working when using qmltestrunner.exe

Question

newbee here on QML. Apologies if the question is too basic but I am stuck.

I am trying something very simple, running a simple QML unit test, but it needs to grab the image of the window and saved to the file system.

So I was looking at this tutorial and the following docs:

https://www.youtube.com/watch?v=8EUjXQzFfoA

https://doc.qt.io/qt-6/qml-qttest-testcase.html

and tried to combine both as such:

Item {
    width: 800
    height: 600

    MyWindow
    {
        id: myWindowTest
    }

    TestCase{
        name: "TestButtonClick"
        when: windowShown

        function test_ClickButton()
        {
            var notSavedText = "Not saved"
            var savedText = "Saved!"

            myWindowTest.grabToImage(function(result) {
                                console.log(result)
                                    result.saveToFile("something.png");
                                });

            console.log("step 1")
            verify(myWindowTest.saveStatus === notSavedText, "Save status failed!")

            console.log("sending click")
            mouseClick(myWindowTest.saveButton)

            console.log("step 2")
            verify(myWindowTest.saveStatus === savedText, "Save status failed!")
        }

    }

}

yet the ".png" is never generated. See the output of "qmltestrunner.exe"

any clues what I don't get the image, notice that the logs are never called so it failed, but the ids look correct to me.

thank you very much!

Answer 1

In case you don't insist on using your call-method - the given method in docs works just fine for me:

var image = grabImage(rect);
try {
    compare(image.width, 100);
} catch (ex) {
    image.save("debug.png");
    throw ex;
}

Which would result in this for you:

Item {
    width: 800
    height: 600

    MyWindow
    {
        id: myWindowTest
    }

    TestCase{
        name: "TestButtonClick"
        when: windowShown

        function test_ClickButton()
        {
            var notSavedText = "Not saved"
            var savedText = "Saved!"

            var image = grabImage(myWindowTest);
            image.save("something.png");
                
            console.log("step 1")
            verify(myWindowTest.saveStatus === notSavedText, "Save status failed!")

            console.log("sending click")
            mouseClick(myWindowTest.saveButton)

            console.log("step 2")
            verify(myWindowTest.saveStatus === savedText, "Save status failed!")
        }

    }

}

Answer 2

thank you all for the leads, indeed the "waitForRendering" resolved the issue

    function test_ClickButton()
    {
        var notSavedText = "Not saved"
        var savedText = "Saved!"


        console.log("step 1")
        verify(myWindowTest.saveStatus === notSavedText, "Save status failed!")

        console.log("sending click")
        mouseClick(myWindowTest.saveButton)

        console.log("step 2")
        verify(myWindowTest.saveStatus === savedText, "Save status failed!")

        myWindowTest.grabToImage(function(result) {
                            console.log(result)
                                result.saveToFile("scrshot.png");
                            });

        **waitForRendering(myWindowTest, 100)**

    }