# KShare | Automating Flutter-based Web Apps with Web Recorder Plus **URL:** \ **Category:** Kshare\ **Tags:** bhavyansh, flutter, gatedknowledge, support, katalon-studio\ **Created:** [February 28, 2025, 6:00am UTC](https://forum.katalon.com/t/kshare-automating-flutter-based-web-apps-with-web-recorder-plus/166584 "2025-02-28T06:00:10Z")\ **Posts on this page:** 3\ **Page:** 1
**Author:** ![support.squad](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/support.squad/32/23139_2.png) [@support.squad](https://forum.katalon.com/u/support.squad)\ **Post date:** [February 28, 2025, 6:00am UTC](https://forum.katalon.com/t/kshare-automating-flutter-based-web-apps-with-web-recorder-plus/166584/1 "2025-02-28T06:00:10Z")
![Forum thumbnail](https://europe1.discourse-cdn.com/katalon/original/3X/f/f/ffdbbc76e3e07eabe8084d6fe302d1092c0cf3ed.jpeg) Hi everyone, 👋 Today, we’re back with another article on Katalon’s Web Recorder Plus. And, in this article, we’re going to demonstrate how you can automate Flutter-based web apps with this new feature. > ℹ Learn how to quickly get started with Katalon’s Web Recorder Plus at: [http://forum.katalon.com/t/kshare-katalon-web-recorder-plus-walkthrough-beta/166574?u=albert.vu](http://forum.katalon.com/t/kshare-katalon-web-recorder-plus-walkthrough-beta/166574?u=albert.vu) Flutter-based web applications, due to their unique architecture, require special handling for testing. With the improved **Katalon Web Recorder Plus** , automating these applications is now easier than ever. The recorder’s advanced capabilities include better interaction with complex UI components, dynamic content, and native Flutter elements. > ℹ \*\*Pre-requisites: > > - You’ll need to have Katalon Studio version 10.1.0 and above installed. > - You’ll need to enable the new Web Recorder plus. Follow the guide here for more information: [http://forum.katalon.com/t/kshare-katalon-web-recorder-plus-walkthrough-beta/166574#p-295591-how-to-enable-and-use-katalon-recorder-plus-for-your-projects-4](http://forum.katalon.com/t/kshare-katalon-web-recorder-plus-walkthrough-beta/166574#p-295591-how-to-enable-and-use-katalon-recorder-plus-for-your-projects-4) ### Video Walkthrough In the video below, we’ll demonstrate how you can: - Record the Flutter-based web application using the tool, and - Setup and use the Custom Keyword needed to execute the test #### Steps in detail - After you have enabled the Web Recorder **Plus** , then you can just normally try to record the web application by clicking on the Web Recorder Icon: ![image](https://europe1.discourse-cdn.com/katalon/original/3X/5/9/59fc6f10411c0e97cc8b5c7a68f42347fdd9dbe4.jpeg) - Then, save your test case. - Now **to run/execute a flutter-based test case from Katalon Studio** , we **need to setup the below Custom Keyword** once. > ℹ The below custom keyword ensures that the necessary elements are clickable and the UI is responsive in the context of automated testing. It interacts with the specific elements (`flutter-view` , `flt-semantics-placeholder` , etc.) that Flutter uses for rendering in a web environment, which might otherwise be difficult to automate due to Flutter’s custom rendering system. - - **Right-click on the “Keywords“ folder and create a new package and keyword**. - - Then **in the newly create keyword** file, **add the below custom keyword** : ```auto package flutterPackage import com.kms.katalon.core.annotation.Keyword import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI public class KatalonAutomatesFlutter { static String script = """ (function(){"use strict";function l(t){new MutationObserver(e=>{e.some(r=>!(r.type!=="childList"||r.addedNodes.length===0))&&t()}).observe(document,{childList:!0,subtree:!0})}function s(t=document){if(!t.querySelector("flutter-view"))return;t.querySelectorAll("flt-semantics-placeholder").forEach(i=>{i.click()});const e=t.querySelector("flt-glass-pane");if(!e||e.activated)return;e.activated=!0;const n=document.createElement("style");n.innerHTML=` flt-semantics { pointer-events: all !important; } flt-semantics-container { left: 0; top: 0; } `,n.id="flutter-override-styles",document.head.appendChild(n);const r=e.shadowRoot?.querySelector("flt-semantics-placeholder");r&&r.click()}function o(){navigator.webdriver&&(s(),l(()=>{s()}))}o()})(); """; @Keyword public static void activateFlutterBasedWebApp() { WebUI.executeJavaScript(script, null) } } ``` - After that in your saved test case, **call the custom keyword just after navigating to the website test step** : ```auto CustomKeywords.'..activateFlutterBasedWebApp'() ``` > ℹ Replace `` and `` with your package and keyword names, like below example: ```auto CustomKeywords.'flutterPackage.KatalonAutomatesFlutter.activateFlutterBasedWebApp'() ``` ### Example Test Case Snippet ```auto WebUI.openBrowser('') WebUI.navigateToUrl('https://flutter.github.io/samples/web/material_3_demo/') //Calling the Custom Keyword CustomKeywords.'flutterPackage.KatalonAutomatesFlutter.activateFlutterBasedWebApp'() WebUI.click(findTestObject('Object Repository/Page_Material 3/flt-semantics_node-43 (2)')) WebUI.click(findTestObject('Object Repository/Page_Material 3/flt-semantics_L (2)')) WebUI.closeBrowser() ``` ### Reference [https://docs.katalon.com/katalon-studio/record-and-spy/webui-record-and-spy-utilities/katalon-web-recorder-plus#activate-flutter-based-web-app-testing-with-a-custom-keyword](https://docs.katalon.com/katalon-studio/record-and-spy/webui-record-and-spy-utilities/katalon-web-recorder-plus#activate-flutter-based-web-app-testing-with-a-custom-keyword) * * * > 📌 If you find this article helpful, then don’t forget to leave us a like 👍 or a heart ❤ and share it with your colleagues or teammates. We greatly appreciate your support for the [KShare](http://forum.katalon.com/c/product-insights/73) series. 🤗 ---
**Author:** ![albert.vu](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/albert.vu/32/20595_2.png) [@albert.vu](https://forum.katalon.com/u/albert.vu)\ **Post date:** [February 28, 2025, 6:00am UTC](https://forum.katalon.com/t/kshare-automating-flutter-based-web-apps-with-web-recorder-plus/166584/2 "2025-02-28T06:00:10Z")
Thank you the Product Support team (@support.squad) and **Bhavyasnh Ameta** (@bhavyansh.ameta) for another helpful article on using the new Web Recorder Plus! đź‘Ź | ![Bhavyansh](https://europe1.discourse-cdn.com/katalon/original/3X/a/5/a5242aa31c8ce49d9b0971ae98869b8986980c88.png) | | --- | | **Bhavyansh Ameta** (@bhavyansh.ameta) - Junior Product Support Specialist | | Bhavyansh is a Junior Product Support Specialist at Katalon who utilizes his technical expertise to assist users with intelligent solutions. His passion for delivering exceptional support is not just about providing answers but fostering a positive and empowering user experience. | ---
**Author:** ![system](https://europe1.discourse-cdn.com/katalon/original/3X/d/5/d55596ab02785a255798e87ede769734747b30c4.svg) [@system](https://forum.katalon.com/u/system)\ **Post date:** [February 28, 2026, 6:00am UTC](https://forum.katalon.com/t/kshare-automating-flutter-based-web-apps-with-web-recorder-plus/166584/3 "2026-02-28T06:00:15Z")
Closed on February 28, 2026, 6:00am UTC This topic was automatically closed after 365 days. New replies are no longer allowed.