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
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.
- 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
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:
- 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.
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:
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:
CustomKeywords.'<YourPackageNameHere>.<YourKeywordNameHere>.activateFlutterBasedWebApp'()
<YourPackageNameHere>and<YourKeywordNameHere>with your package and keyword names, like below example:
CustomKeywords.'flutterPackage.KatalonAutomatesFlutter.activateFlutterBasedWebApp'()
Example Test Case Snippet
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
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 series.
