Vaah Docs
Mobile

Automation Setup for Flutter Application

Setup Flutter

Before working on the automation script. We have to configure the flutter application to allow automation script to perform steps within the application.

Step 1: Download and Install Flutter SDK

First step is to download flutter sdk. Follow the steps mentioned below:

  1. Download flutter SDK zip file based on your system configuration using this link. Choose according to your system's processor.
  2. Once the file is downloaded, unzip the file where you want to install the flutter sdk.
  3. Open the terminal and run the command mentioned below: 
    open ~/.zshrc
  4. In a file that opens, add the below command at the top of the file. 
    export PATH=$HOME/flutter/bin:$PATH
  5. Save the file and run command: source ~/.zshrc command.
  6. Now, check the flutter version using the command: flutter --version.
  7. For further details, run this command to verify if the installation is correct: 
    flutter doctor -v
  8. Now, open VSCode IDE and select Extensions tab from the left menu.
  9. Search 'flutter' and install the first flutter extenstion. With this, the installation of flutter SDK is complete.

Step 2: Create a Sample flutter App

To create a sample flutter application for testing. Follow the steps mentioned below:

  1. Open the terminal window in the directory you want to create your project.
  2. Enter the following command to create a sample project: 
    flutter create YOUR_PROJECT_NAME
  3. Once the project is created, open it on VSCode IDE.
  4. For Android: Start your android emulator through Android Studio.
  5. For iOS: Open the iOS simulator by clicking on the simulator icon form the Dock.
  6. Open the terminal on VSCode and run the command given below to start debugging your application. 
    flutter run
  7. When the command asks to select a device, choose the emulator/simulator which is running. If not, then continue.
  8. The application should be running in the emulator device after a while.

Configure Flutter Application

After setting up flutter and creating a sample application. We need to configure few files to allow webdriverio-appium to automate the app.

Follow the steps mentioned below to configure the flutter application:

Step 1: Update pubspec.yaml file

Navigate to the sample app project in VSCode and open file pubspec.yaml.

  • If the app is still running, close the app. Click on the terminal in which the app is running and press Ctrl+C on Keyboard. If asked for Terminate batch job (Y/N)?. Select Y.
  • Add the statements given below in the file.
    test: ^1.24.1
flutter_test:
    sdk: flutter
flutter_driver:
    sdk: flutter
  • After adding the above statements, run flutter pub get command in the terminal to update the changes.

Step 2: Update main.dart file

Open main.dart file and add the following statements.

  • Add the statement given below at the top of the file. 
    import 'package:flutter_driver/driver_extension.dart';
  • Also add the below statement inside main() method. 
    enableFlutterDriverExtension();
  • Refer to the screenshot given below:

Step 3: Add keys for automation testing

Open main.dart file and do the following changes:

  • Add the below statement in the file. Note: In addition, please note that you'll need to scroll down the code to find the text where you should insert this line. 
    key: const Key('counter'),
  • Similarly add the code given below in the location. 
    key: const Key('plus_btn'),
    Refer to the screenshot given below:

Step 4: Run the application

To get the apk/ios-app needed, open your Android Studio, and Launch the emulator or open your iOS simulator. Then run command flutter run in your flutter project terminal.

You can close the emulator/simulator for now.

With this, the configuration for the flutter application is now complete.

Setup WebdriverIO project

In this we are going to setup a WebdriverIO project for automating the mobile application we just created in the prior steps.

To setup the project, follow the steps mentioned in the documentation till Step 9 of Setup WebdriverIO project section. Now follow the steps given below:

  1. For "Which type of environment would you like?". Select Mobile.
  2. For "Which mobile environment would you like to automate?". Select Android for now. We will setup iOS automation as well.
  3. For "Which framework do you want to use?". Select Mocha.
  4. For "Do you want to use a compiler?". Select No.
  5. For "Do you want WebdriverIO to autogenerate some test files?". Type n and press Enter.
  6. Choose spec reporter for test case reporting.
  7. For "Do you want to add plugins to your test setup?". Select wait-for. Press Space and then Enter.
  8. For "Would you like to include Visual Testing to your setup?". Press Enter.
  9. For "Do you want to add a service to your test setup?". Select Appium.
  10. When "Do you want me install npm install is prompted. Press Enter.
  11. Wait for the command npm install to complete.
  12. After the setup is complete, it will ask you to "Continue with Appium setup using appium-installer". Press Enter.
  13. If it asks for 'Ok to proceed?'. Enter y and press Enter.
  14. After a while it will ask you to "Select an option (Use arrow keys)". Select option Install Appium Server. Then select Select latest Server version:.
  15. Wait till the appium server is installed.
  16. After the installation is complete, a success message will be visible. Refer to the screenshot below:
  17. Similarly, select Run Appium Doctor. Then select Android
  18. At last select Exit. (Press Space and then Enter.)
  19. If the terminal shows some error similar to below (For windows user), ignore and proceed with the documentation. 
    ⚠️  Ups, something went wrong: Error calling: npx wdio config!
npm ERR! code 1
npm ERR! path D:\FP
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c create-wdio

Configuration

Now, before running the test scripts we need to install several packages, configure the wdio.conf.js file. We also need to create env file so that the capabilities for different platforms can be added.

Install Dependencies

To install the required dependencies and configure package.json file, follow the steps given below:

  1. Run following commands in the terminal of the Code Editor (Make sure the path is set to your project directory).
    • First we will install appium in our project. 
      npm i appium --save-dev
    • After this, appium-flutter-driver is installed which performs actions on mobile app. To know more, refer npm.js
      npm i appium-flutter-driver --save-dev
    • Similarly, we will install appium-flutter-finder. This will be used to locate elements in flutter app. To know more, refer npm.js
      npm i appium-flutter-finder --save-dev
    • Next, we will install assert module to make assertions in out test script. 
      npm i assert --save-dev
    • Similarly, we will install chai to use various expect methods in it. 
      npm i chai --save-dev
    • Finally, run this command: 
      npm i chalk cli-color cross-env ts-node typescript --save-dev
  2. In package.json file, replace the code in script with the below code: 
    "scripts": {
    "wdio": "cross-env wdio run ./wdio.conf.js",
    "wdio debug": "cross-env NODE_WDIO_DEBUG=true wdio run ./wdio.conf.js",
    "wdio ios": "cross-env NODE_WDIO_OS=ios wdio run ./wdio.conf.js",
    "wdio android": "cross-env NODE_WDIO_OS=android wdio run ./wdio.conf.js"
}
  3. Also add "type":"module" inside package.json file. Refer to the code below: 
    ...
"type": "module",
"devDependencies": {
    ...
}

Configure ENV file

  1. Create a new file in the root folder of the project, where the file wdio.conf.js file is located.
  2. Name the file wdio.env.js.
  3. Add the code given below inside the file:
    class Env {

    constructor() {

        this.params = {
            debug: false,
            env: null,
            log_level: 'error',
            small_pause: 5000,
            medium_pause: 10000,
            long_pause: 25000,
            app_id: 'com.toolstation.mobile_app.dev',
            version: null,
            capabilities: [{
                    platformName: 'Android',
                    'appium:deviceName': 'P7A34',
                    'appium:platformVersion': '14',
                    'appium:automationName': 'Flutter',
                    'appium:app': 'path of the apk file',
                    'appium:fullReset': true,
                    'appium:noReset': false,
                    'appium:autoGrantPermissions': true,
            }]
        };
    } 
    //-------------------------------------------------
    setId(){
        const env = process.argv[4];

        if(env == 'ios')
            this.params.app_id = 'com.toolstation.mobile-app.dev'
        else
            this.params.app_id = 'com.toolstation.mobile_app.dev'
    }

    setCapabilities()
    {
        const env = process.argv[4];

        switch(env)
        {
            case 'android':
                this.params.capabilities = [{
                    platformName: 'Android',
                    'appium:deviceName': 'P7A34',
                    'appium:platformVersion': '14',
                    'appium:automationName': 'Flutter',
                    'appium:app': 'path of apk file',
                    'appium:fullReset': true,
                    'appium:noReset': false,
                    'appium:autoGrantPermissions': true,
                }]
                break;
            case 'ios':
                this.params.capabilities = [{
                    platformName: 'iOS',
                    'appium:deviceName': 'iPhone 15 Pro',
                    'appium:platformVersion': '17.2',
                    'appium:automationName': 'Flutter',
                    'appium:app':'path of the iOS runner file',
                    'appium:noReset': false,
                    'appium:autoLaunch': true,
                    'appium:autoAcceptAlerts': true
                }]
                break;
        }
    }
    //-------------------------------------------------
    getParams () {
        this.setId();
        this.setCapabilities();
        console.log('params-->', this.params);
        return this.params;
    }
}
export default Env;

Configure wdio.conf.js file

After this, we need to configure the wdio.conf.js file. Open the file and follow the steps mentioned below:

  1. Add the following code at the top of the file in order to import wdio.env.js file created in step 3 of Configure ENV File section. 
    import env from "./wdio.env.js";
const envObj = new env();
const params = envObj.getParams();
  2. Replace exports.config to export const config. Refer to the code snippet below: 
    export const config = {
    ...
}
  3. Enter this code: env: params, inside exports.config. Refer to the code below: 
    export const config = {
    env: params,
    //
    // ====================
    // Runner Configuration
    // ====================
    ...
}
  4. For the capabilities replace the code with capabilities: params.capabilities,. Refer to the code below: 
    export const config = {
    ...
    maxInstances: 10,
    ...
    capabilities: params.capabilities,   // Add this statement
    ...
}

Now, the configuration is completed. But we still need to do some changes with the test files before we can start running our script.

Configure test files.

Now, we will create and configure the test files before working on automation script.

  1. Create a directory named: tests in the project root directory.
  2. Create another directory named: spec inside tests directory created earlear.
  3. Create a file named: test.e2e.js inside spec directory.
  4. Configure test.e2e.js file Open the test.e2e.js file. Add the code snippet given below in the file: 
    import find from 'appium-flutter-finder'
import {expect} from 'chai'
describe('Flutter Automation Testing', () => {
    it('Verify if the counter button is functional or not', async () => {
        const plus_btn = find.byValueKey('plus_btn');
        const counter = find.byValueKey('counter');
        await driver.elementClick(plus_btn);
        await driver.elementClick(plus_btn);
        expect(await driver.getElementText(counter)).to.be.equal('2');
    })
})

Executing the test script

Before running the test script, add the path of the test script in the wdio.conf.js. Open the file and locate specs keyword. Add the below code for the specs.

specs: [
    './tests/spec/test.e2e.js'
],

Running Tests on Android Emulator

Before running the script, update the following data as suggested:

  1. Open wdio.env.js file and update the following in capabilities from both params and setcapabilities:
    • appium:deviceName: Add the name of your emulator.
    • appium:platformVersion': Add the android version running on the emulator.
    • appium:app: Add the path of the apk file that you want to test.
  2. Save and run the command given below:
    npm run wdio android

Running Tests on iOS Simulator

Before running the script, update the following data as suggested:

  1. Open wdio.env.js file and update the following in capabilities from setcapabilities() method:
    • appium:deviceName: Add the name of your iOS simulator.
    • appium:platformVersion': Add the version of the iOS running on the simulator.
    • appium:app: Add the path of the runner app for iOS device.
  2. Save and run the command given below:
    npm run wdio ios

Basics - Web Automation

Basics - Mobile Automation

Copyright © 2024