Automated Testing of Flutter Web Application
What if your development team developed an application which doesn’t have any html element rendered in the DOM and you can not see or identify any element in the page source which enable you to automate your test cases!
Well! Google’s Flutter is already here to create more pain in a testers life :D.
What is Flutter? (A brief)
Flutter is an open-source UI software development kit created by Google. It is used to develop cross platform applications for Android, iOS, Linux, Mac, Windows, Google Fuchsia, Web platform, and the web from a single codebase.
However, google made it easy for developers to create a web or mobile app but when it comes to testing specially automation testing of Flutter Web applications, it’s not that easy.
Flutter Web is very different from normal web frameworks such as React or Vue. Looking at the official doc, it renders either into HTML elements (but still not the usual elements you see every day), or directly draw onto a Canvas. As they say,
Not every web page makes sense in Flutter, but we think Flutter is particularly suited for app-centric experiences:
· Progressive Web Apps
· Single Page Apps
· Existing Flutter mobile apps
At this time, Flutter is not suitable for static websites with text-rich flow-based content. For example, blog articles benefit from the document-centric model that the web is built around, rather than the app-centric services that a UI framework like Flutter can deliver. However, you can use Flutter to embed interactive experiences into these websites.
For more information on how you can use Flutter on the web, see Web support for Flutter.
When a Flutter app is built for the web, the page is rendered in 2 ways:
· HTML renderer (on mobile browsers)
· CanvasKit renderer (on desktop browsers)
How to Automate Flutter Web Applications
DOM of a Flutter application looks like below, as you can see whole application is rendered on a canvas and there is no HTML rendered.
Now that we know Flutter applications are not as normal as usual web applications, we can treat the Flutter applications as a Picture instead of a DOM tree. A Picture means an Image and then best way to automate a Flutter application is Image-based automation.
When Image-based automation comes in mind then which tool is best to do that? I think it is SikuliX.
SikuliX for Image-based Automation
SikuliX automates anything you see on the screen of your desktop computer running Windows, Mac or some Linux/Unix. It uses image recognition powered by OpenCV to identify GUI components. This is handy in cases when there is no easy access to a GUI’s internals or the source code of the application or web page you want to act on.
Read more about SikuliX here.
It’s very simple yet very powerful automation tool which just take your application’s images in order to recognize your UI controls. You just need to provide Image along with the action you want to perform on that piece of image like below:
Screen screen = new Screen();
screen.click(“LoginEmail.png”);
Here screen is the class of SikuliX library which you can include in your Selenium project using Maven as a dependency like below:
<dependency> <groupId>com.sikulix</groupId> <artifactId>sikulixapi</artifactId> <version>2.0.5</version></dependency>
With SikuliX, you can integrate any framework be it Selenium, Robot or any other open-source library.
Some Thumb Rules:
1. Sikuli recognizes images only in 1920x1080 display resolution.
2. Size of text, app and other items should be 100% only.
3. And zoom level of browser should be 100%.
