Blog Details Shape

Testing Blocker: Overcoming FlutterFlow DOM Element Challenge

Pravin Gamit
By
Pravin Gamit
  • Feb 24, 2024
  • Clock
    7 min read
Testing Blocker: Overcoming FlutterFlow DOM Element Challenge
Contents
Join 1,241 readers who are obsessed with testing.
Consult the author or an expert on this topic.

Testing a web app built with FlutterFlow can be problematic due to the shadow DOM technique it uses to render the UI. This makes it hard to locate and interact with the element. In this blog post, we will reveal how we overcame this challenge and tested our FlutterFlow web app.

What is Flutter Flow?

FlutterFlow is a visual development platform that helps you build mobile applications using Google’s Flutter framework.

It provides a no-code or low-code environment, allowing you to create and design Flutter apps without writing extensive amounts of code. With FlutterFlow, you can customize UIs, connect data, and even add advanced functionality through custom code.

Trusted by leading companies and users worldwide, it accelerates app development, enabling you to deploy beautiful apps faster than traditional methods.

What was the issue?

Flutter Flow is a powerful tool that allows you to create beautiful and functional apps without writing any code. However, as testers, our FlutterFlow challenge was when we were trying to find the DOM elements on the web pages generated by Flutter Flow.

This is because Flutter Flow uses either the “canvaskit” or the “html” web renderer to create the UI, which means that the elements are either drawn on a single canvas or composed of custom HTML tags.

This makes FlutterFlow DOM element difficult to locate and interact with the elements using standard testing tools and frameworks.

LockedLocator

The Approach We Took

To overcome this challenge, we decided to use a combination of different techniques. Here are the two steps we followed:

1. Identifying shadow elements for interaction

We manually revealed the shadow elements by first increasing the width and height of that element and then clicking on them and gathered their locators using the browser's developer tools. We identified the host elements and the CSS selectors for the shadow elements that we wanted to interact with.

Manual_Locator_1
Manual_Locator_2

2. Shadow element identification for interaction with Selenium

We added a custom script to our Flutterflow Automation script of Python Selenium that used the `execute_script` method to access the shadow DOM elements. We used the `shadowRoot` property of the host elements to get the shadow DOM tree and then used the `querySelector` method to find the shadow elements within it. We then performed the desired actions on the shadow elements using the `click` method.

Copied!

The Result We Got

This approach allowed us to successfully automate the testing of the web app created with Flutter Flow and verify its functionality and performance. We learned a lot from this Flutterflow DOM issue and we hope that our solution can help other testers or developers who face similar issues with shadow DOM elements.

Conclusion

In this blog, we shared how we tackled the DOM automation challenges in FlutterFlow and how we tested the web app created by Flutter Flow. We hope that this blog will serve as an ultimate guide for people who are facing the same challenge and looking for a solution. We also hope that this blog will inspire more people to explore and use Flutter Flow to create amazing apps without coding.

If you are interested in learning more about our QA services and how we can help you test your Flutter Flow apps, please feel free to contact us.

Read the next chapter

Frequently Asked Questions

What are the prerequisites for testing a FlutterFlow-made app on mobile devices?
FAQ Arrow

To test on mobile devices, you need to be on a paid FlutterFlow plan to download the code. For iOS, you’ll need a Mac with Xcode, and for Android, any machine (Windows, Mac, or Linux) with the appropriate SDKs installed.

How can I test my FlutterFlow app on a real device?
FAQ Arrow

You can test your app on a real device using the Local Run feature in the FlutterFlow Desktop app, which tracks changes in your project and allows you to see updates instantly on a device. Alternatively, you can manually download the code and run it in your preferred IDE.

Are there automated tests available for FlutterFlow apps, and how do they work?
FAQ Arrow

FlutterFlow supports creating automated tests for your projects, which are crucial for ensuring that the app’s features work as expected without human intervention. These tests are based on the Flutter integration testing framework and can be run locally or through services like Firebase Test Lab. However, running tests directly on the FlutterFlow platform is not yet supported.

How do I handle testing for native functionalities that can’t be tested in a browser?
FAQ Arrow

Native functionalities like camera access or push notifications should be tested on actual devices or emulators. This ensures that these features work as intended in real-world scenarios, which is crucial before deploying your app into production.

About the author

Pravin Gamit

Pravin Gamit

Pravin Gamit, as a Sr.QA Automation Engineer at Alphabin, I specialize in APIs and user interfaces to create strong testing systems that make sure software works great. I'm all about making things better with automated testing.

More about the author
Join 1,241 readers who are obsessed with testing.
Consult the author or an expert on this topic.
Join 1,241 readers who are obsessed with testing.
Consult the author or an expert on this topic.
No items found.