Testing Blocker: Overcoming FlutterFlow DOM Element Challenge

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.

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.

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.

# Find the host element
shadow_host1 = driver.find_element(By.CSS_SELECTOR, "body > flutter-view > flt-glass-pane")

# Get the shadow DOM tree
shadow_root1 = driver.execute_script('return arguments[0].shadowRoot', shadow_host1)

# Find the shadow element
shadow_content = shadow_root1.find_element(By.CSS_SELECTOR, 'flt-semantics-placeholder')

# Click on the shadow element
driver.execute_script("document.querySelector('flt-glass-pane').shadowRoot.querySelector('flt-semantics-placeholder').click({force: true});",shadow_content)

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.