Get Started

Welcome to the appium-flutter-integration-driver Wiki! Here, you'll find all the information you need to get started with our open-source project. Whether you're using WDIO or the Appium Java-client, this guide will help you set up and use the driver for Flutter contexts.

Table of Contents 📖

1. Installing WDIO Flutter By Service 🛠️
2. Adding Appium Java-client Dependency 📦
3. Examples 💡
   • WDIO Examples 🌐
   • Java-client Examples ☕

---

Installing WDIO Flutter By Service 🛠️

To integrate the wdio-flutter-by-service into your WebdriverIO setup, run the following command from your project root directory:

npm i wdio-flutter-by-service

This package provides support for locating elements in Flutter contexts using WebdriverIO.

---

Adding Appium Java-client Dependency 📦

If you're using the Appium Java-client, you need to add the appropriate dependency to your gradle or pom.xml file.

For Gradle (build.gradle)

Add the following implementation line to your build.gradle file:

// https://mvnrepository.com/artifact/com.github.saikrishna321/flutter
implementation group: 'com.github.saikrishna321', name: 'flutter', version: '1.0'

For Maven (pom.xml)

Add the following dependency to your pom.xml file:

<!-- https://mvnrepository.com/artifact/com.github.saikrishna321/flutter -->
<dependency>
    <groupId>com.github.saikrishna321</groupId>
    <artifactId>flutter</artifactId>
    <version>1.0</version>
</dependency>

---

Finding Elements in Flutter Context 🔍

The driver supports finding elements in a Flutter context using the following locators:

• text
• semantics label
• type
• key

---

Examples 💡

WDIO Examples 🌐

Example 1: Locate Element by Key 🗝️

const loginButton = await browser.flutterByValueKey$('login_button');
await loginButton.click();

Example 2: Locate Element by Text 📝

const loginButton = await browser.flutterByText$('Login');
await loginButton.click();

Example 3: Locate Element by Semantics Label 🔍

const loginButton = await browser.flutterBySemanticsLabel$('login_button');
await loginButton.click();

Example 4: Locate Multiple Elements by Semantics Label 🔄

const toggleButton = await browser.flutterBySemanticsLabel$('toggle_button');
await toggleButton.click();

const messageFields = await browser.flutterBySemanticsLabel$$('message_field');
console.log(messageFields.length); // Outputs the number of elements found

Example 5: Wait for Element Visibility ⏳

const message = await browser.flutterBySemanticsLabel$('message_field');

// Wait for the element to be absent
await browser.flutterWaitForAbsent({ element: message, timeout: 10 });

// Wait for the element to be visible
await browser.flutterWaitForVisible({ element: message, timeout: 10 });

Example 6: Scroll Till Element is Visible 🔄

await browser.flutterScrollTillVisible({
    finder: await browser.flutterByText('Java'),
    scrollDirection: 'up',
});

Example 7: Long Press 🖱️

const longPressElement = await browser.flutterBySemanticsLabel$('long_press_button');
await browser.flutterLongPress({ element: longPressElement });

Example 8: Double Click 🖱️🖱️

const doubleTapElement = await browser.flutterBySemanticsLabel$('double_tap_button');
await browser.flutterDoubleClick({ element: doubleTapElement });

Example 9: Drag and Drop 🖱️➡️

const dragElement = await browser.flutterBySemanticsLabel$('drag_me');
const dropElement = await browser.flutterBySemanticsLabel$('drop_zone');
await browser.flutterDragAndDrop({
    source: dragElement,
    target: dropElement,
});

Example 10: Retrieve Element Properties 📝

const switchButton = await browser.flutterBySemanticsLabel$('switch_button');
const allAttributes = await switchButton.getAttribute('all'); // Will return all attributes attached to the element
console.log(allAttributes);

Java-client Examples ☕

Example 1: Locate Element by Key 🗝️

WebElement loginButton = driver.findElement(FlutterBy.key("login_button"));
loginButton.click();

Example 2: Locate Element by Text 📝

WebElement loginButton = driver.findElement(FlutterBy.text("Login"));
loginButton.click();

Example 3: Locate Element by Semantics Label 🔍

WebElement loginButton = driver.findElement(FlutterBy.semanticsLabel("login_button"));
loginButton.click();

Example 4: Locate Multiple Elements by Semantics Label 🔄

WebElement toggleButton = driver.findElement(FlutterBy.semanticsLabel("toggle_button"));
toggleButton.click();

List<WebElement> messageFields = driver.findElements(FlutterBy.semanticsLabel("message_field"));
System.out.println(messageFields.size()); // Outputs the number of elements found

Example 5: Wait for Element Visibility ⏳

WebElement messageField = driver.findElement(FlutterBy.semanticsLabel("message_field"));
WebElement toggleButton = driver.findElement(FlutterBy.semanticsLabel("toggle_button"));

WaitForOptions waitOption = new WaitForOptions()
        .setElement(messageField)
        .setTimeout(Duration.ofSeconds(10));
Assertions.assertEquals(messageField.getText(), "Hello world");

toggleButton.click();
FlutterCommands.waitForInVisible(driver, waitOption);
Assertions.assertEquals(driver.findElements(FlutterBy.semanticsLabel("message_field")).size(), 0);

toggleButton.click();
FlutterCommands.waitForVisible(driver, waitOption);

Example 6: Scroll Till Element is Visible 🔄

ScrollOptions scrollOptions = new ScrollOptions(FlutterBy.text("Java"), ScrollOptions.ScrollDirection.UP);
WebElement element = FlutterCommands.scrollTillVisible(driver, scrollOptions);
element.click();

Example 7: Long Press 🖱️

WebElement longPressButton = driver.findElement(FlutterBy.semanticsLabel("long_press_button"));
FlutterCommands.performLongPress(driver, new LongPressOptions().setElement(longPressButton));

Example 8: Double Click 🖱️🖱️

WebElement doubleTap = driver.findElement(FlutterBy.semanticsLabel("double_tap_button"))
                             .findElement(FlutterBy.text("Double Tap"));
FlutterCommands.performDoubleClick(driver, new DoubleClickOptions()
        .setElement(doubleTap)
        .setPoint(new Point(10, 0))
);

Example 9: Drag and Drop 🖱️➡️

WebElement dragElement = driver.findElement(FlutterBy.semanticsLabel("drag_me"));
WebElement dropElement = driver.findElement(FlutterBy.semanticsLabel("drop_zone"));
FlutterCommands.performDragAndDrop(driver, new DragAndDropOptions(dragElement, dropElement));

Example 10: Retrieve Element Properties 📝

WebElement switchButton = driver.findElement(FlutterBy.semanticsLabel("switch_button"));
String allAttributes = switchButton.getAttribute("all"); // Will return all attributes attached to the element
System.out.println(allAttributes);

How to use barcode scanning or mock image?

const firstImageToMock = path.resolve('test/qr.png');
const secondImageToMock = path.resolve('test/SecondImage.png');

const firstInjectedImage = await browser.flutterInjectImage(firstImageToMock);
//Click on the camera button or image picker. This will pick the mocked imaged.
const secondInjectedImage = await browser.flutterInjectImage(secondInjectedImage);
//Click on the camera button or image picker. This will pick the secondInjectedImage.
// Now if you need to again mock the first image 
await browser.flutterActivateInjectedImage({ imageId: firstInjectedImage });
//Click on the camera button or image picker. This will pick the firstInjectedImage.

Feel free to explore and contribute to our project. If you have any questions or suggestions, don't hesitate to reach out!