[Flutter Web] - Question about support flutter web application

[vannt1991]

Hi @KazuCocoa @truongsinh ,

Firstly, thank you so much for the great library, but we want to use automation based on this lib for the flutter web app, could u give us some suggestions or examples to implement this task.

Thanks and Regards

[KazuCocoa]

i haven't used the flutter web, but if it is a web server via dom that can be accessible in mobile browsers, simply you can use UIA2/XCUITest driver's web testing. https://appium.io/docs/en/writing-running-appium/web/mobile-web/

if they are running on Dart VM in browser, maybe this driver will need to add a new feature

[vannt1991]

if they are running on Dart VM in browser, maybe this driver will need to add a new feature
@KazuCocoa yep, thanks for your info, it's exactly what I looking for, we need running automation in Chrome desktop web browser, but now we don't find any way to do this task. Do u have any idea or any way to make it work? in this time, I can spend the effort to investigate more.

[KazuCocoa]

This driver finds a WebSocket to the Dart VM in https://github.com/appium-userland/appium-flutter-driver/blob/main/driver/lib/sessions/observatory.ts#L142-L145 , so if you know the way to get the observatory URL in the desktop app, the code can follow it. https://github.com/appium-userland/appium-flutter-driver/blob/main/driver/lib/sessions/session.ts#L13 is the place to handle Android/iOS.

I guess this driver will need to have the ability to start a chrome browser, and manage it. https://github.com/appium-userland/appium-flutter-driver/blob/main/driver/lib/sessions/session.ts#L13 is where this driver should switch the app under test.

[vannt1991]

hum, thanks, I see it's a big feature, and takes a long time to make it work well. Step to implement this feature as I know, please correct me if I am wrong.

1, write /sessions/chrome.ts to handle chrome driver session, as u said

so if you know the way to get the observatory URL in the desktop app, the code can follow it

I need to find ways to get the observatory URL and create a session with it. that is hard technical for a newbie, and sadly now I have no idea to resolve it.

2, add more logic to handle the chrome driver session at https://github.com/appium-userland/appium-flutter-driver/blob/main/driver/lib/sessions/session.ts#L28
=> it's maybe easy, we need to resolve step 1

3, ...

[vannt1991]

@KazuCocoa do u have any idea and plan to implement this feature? In my view, Appium driver and Chrome driver can't work together in this project?

[vannt1991]

ohh, supprised, I see u comment in appium-chromedriver, I guess u have strong experience with Chrome driver. That sounds good :)

[KazuCocoa]

I need to find ways to get the observatory URL and create a session with it. that is hard technical for a newbie, and sadly now I have no idea to resolve it.

We should read/know of Flutter's implementation. In Android, the URL is available in the logcat. In iOS, it is in the system log.
I guess in console.log in the browser.

do u have any idea and plan to implement this feature?

No plan for now. I've maintained this project voluntarily, but I have no much time to focus on this project as appium development in my most of private time development for OSS.

By reading this thread, I guess once you find a way to attach to the Dart VM, it is not so difficult to implement some features.
e.g. start a browser, attach to the Dart VM, sending flutter commands to the Dart VM

If it needs a new capability like observatoryUrl instead of finding it automatically, this driver will be able to get the capability as a new one.

[KazuCocoa]

btw, does the flutter web require desktop chromium browsers for testing? Or Firefox/Safari, or mobile chrome also work...?

[vannt1991]

@KazuCocoa at the moment, we only need to run test flutter web on desktop chromium browsers, but for the long term, we also need to check in other browsers as u said.

[vannt1991]

@KazuCocoa yep, a lot of useful info here, but I have some confusion:
1, start a browser, => but for our codebase structure, we need to use the chrome driver to make the browser session in java code, because we using <groupId>io.appium</groupId><artifactId>java-client</artifactId> for android/ios flutter app testing via appium-flutter-driver. and now we need do the same way with chrome desktop browsers.
2, attach to the Dart VM, sending flutter commands to the Dart VM at driver js code.

If it needs a new capability like observatoryUrl instead of finding it automatically, this driver will be able to get the capability as a new one.

I read the implementation code for android it seen hard for me to convert it to the chrome session. Pls help me, I really appreciate your time development for the OSS project.

No plan for now. I've maintained this project voluntarily, but I have no much time to focus on this project as appium development in my most of private time development for OSS.

that is bad news for us at this time.

[KazuCocoa]

we need do the same way with chrome desktop browsers.

Do you mean you'd like to handle the chrome via chromedriver as well? So, like other android and ios, in the case also can switch contexts with flutter and webview (chromedriver)? Both are not difficult.

More important thing is how to attach to a Dart VM socket over websocket. Managing a browser (launch/stop the process) is the next step.

https://github.com/appium-userland/appium-flutter-driver/blob/main/driver/lib/sessions/android.ts#L24 starts a UIA2 driver session to manage the app. So UIA2 starts the app under test, and allow the session to manage non-flutter layer as NATIVE and WebView contexts.

https://github.com/appium-userland/appium-flutter-driver/blob/main/driver/lib/sessions/android.ts#L27 gets the observatory URL from the device logcat.
You can hardcode the Dart VM websocket URL for browser here as a prototype or try to add a finding method from somewhere. Then, https://github.com/appium-userland/appium-flutter-driver/blob/main/driver/lib/sessions/android.ts#L34 will attempt to establish a websocket session.

Once the socket connection succeeds, you can send flutter commands via the session.

[vannt1991]

Do you mean you'd like to handle the chrome via chromedriver as well? So, like other android and ios, in the case also can switch contexts with flutter and webview (chromedriver)?

Yep, it's like appium for android/ios already doing well, it can switch contexts with flutter and native, webview ...

in detail, Java code, I start testing web using chrome driver.

WebDriverManager.chromedriver().clearCache();
WebDriverManager.chromedriver().setup();

ChromeOptions chromeOptions = new ChromeOptions();
chromeOptions.addArguments("disable-infobars");
chromeOptions.addArguments("window-size=" + 1280 + "," + 720);
RemoteWebDriver driver = new ChromeDriver(chromeOptions);

//Deleting all the cookies
driver.manage().deleteAllCookies();

//Specifiying pageLoadTimeout and Implicit wait
driver.manage().timeouts().pageLoadTimeout(40, TimeUnit.SECONDS);
driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);

driver.get("http://localhost:58018/");

It starts chrome desktop web browser, But, How can we manage chrome driver with appium driver?? or any other way to start testing desktop web browsers via appium driver?

After that, in driver, we need to update logic for the chrome session
1,
https://github.com/appium-userland/appium-flutter-driver/blob/main/driver/lib/sessions/android.ts#L16
https://github.com/appium-userland/appium-flutter-driver/blob/main/driver/lib/sessions/android.ts#L17
to
https://github.com/appium/appium-chromedriver/blob/master/test/chromedriver-e2e-specs.js#L88
https://github.com/appium/appium-chromedriver/blob/master/test/chromedriver-e2e-specs.js#L93

2, attach to a Dart VM socket over websocket
https://github.com/appium-userland/appium-flutter-driver/blob/main/driver/lib/sessions/android.ts#L40
to ?? can hardcode the Dart VM websocket URL for browser here as a prototype or try to add a finding method from somewhere

3, remove
https://github.com/appium-userland/appium-flutter-driver/blob/main/driver/lib/sessions/android.ts#L41
https://github.com/appium-userland/appium-flutter-driver/blob/main/driver/lib/sessions/android.ts#L47

Honestly, it's easy for u, but many info we need to understand, and hard to know how to make it work :)

[vannt1991]

For fast-moving, could u write a scaffold code to implement this feature? I know at this time u do not have much time, but I got stuck with implementing this feature, :)

[KazuCocoa]

the appum-chromedriver hasn't tested against web browser one, so I'm not sure how it works as-is. So far, appium is not for desktop browsers.

2, attach to a Dart VM socket over websocket

For this point, how can we know of the WebSocket URL that this flutter-driver need to attach to in the flutter web?
I don't know how we can get it for the web.

Like https://github.com/appium-userland/appium-flutter-driver/pull/264/files#diff-2d098b30480f3d2c04ff2e94d5b06d801d2df603df05e8d5ac7fb4d798621bb8R29 , if we have a way to get the url somehow, this flutter context can attach to the url with existing methods. (then, a new method for non-android and ios will need, but can add similar way)

Theoritically, this flutter driver only needs the WebSocket URL, but still not clear how we can get it in the flutter for Web case.

So,

1. create a chromedriver session via chromedriver as you addressed the above (kind of selenium)
   • For except for flutter context
2. create a flutter session via appium (it needs some code changes in this driver)
   • For only flutter context

Then, you have 2 driver instances in your java code. You may can send flutter command to the 2).

Btw, have you attach to the Flutter for Web's Dart VM over websocket somehow? (this is not this driver specific thing)

[vannt1991]

Btw, have you attach to the Flutter for Web's Dart VM over websocket somehow? (this is not this driver specific thing)

yep. i try to copy ws://127.0.0.1:60992/eAQ1ePrVBuQ=/ws from browser console log/debug console log and make connection to websocket via Extension chrome: Simple Web Socket client it working fine.

[howard-fandemand]

Just adding a note that this is a desired feature. (would be better than writing Flutter Integration test code)

[CharlVS]

@vannt1991 Any progress? Perhaps you can share your latest code so that I can take a crack at it?