Conquering Your First Mobile Test with WebdriverIO & Appium: A Beginner's Guide

Welcome, test automation enthusiasts! Whether you're a budding newbie or an SDET hungry for new tools, this guide will equip you to run your first mobile test using the powerful duo of WebdriverIO and Appium. Get ready to unlock the potential of automated testing on your favorite mobile apps!

Why the WebdriverIO & Appium Dream Team?

Imagine testing your mobile app tirelessly, 24/7, without lifting a finger. That's the magic of mobile test automation! WebdriverIO, one of the most popular robust testing framework, simplifies the process, while Appium, the mobile automation tool, bridges the gap between your tests and the app itself. Together, they form an unbeatable combo for conquering mobile testing challenges.

Let's Dive In: Your First Mobile Test Flight

Prerequisites:

• Node.js and npm (or yarn) installed
• A mobile device or emulator connected(Android or iOS)
• Your mobile app (.apk or .ipa file)
• USB Debugging enabled on connected device

1. Project Setup:

• Create a new project directory and initialize it.

npm init wdio@latest .

• Follow the installation steps according to options provided
• As we are going to test the mobile app, we will choose Mobile Automation and Android/iOS Real devices
• I have opted for mocha and UiAutomator2 for the purpose of this test
• We have also used allure reports for reporting purpose. Let's install it
  npm install --save-dev allure-commandline
• We will do another post for iOS with XCUITest in another post.

2. Configure Capabilities:

• Initialization of WebdriverIO will also create a configuration file named wdio.conf.js to define the test configuration.
• We will specify capabilities like app path, platform version, device name, etc. (Refer to Appium documentation for specific options).
• For best coding practices, we will define the above options in a separate .env file and use it accordingly.

// wdio.conf.js
export const config = {
  // ... other configurations
  capabilities: [{
        platformName: process.env.PLATFORM,
        'appium:app': process.env.APK_FILE,
        'appium:appPackage': process.env.APP_PACKAGE,
        'appium:appActivity': process.env.APP_ACTIVITY,
        'appium:deviceName': process.env.DEVICE_NAME,
        'appium:platformVersion': process.env.PLATFORM_VERSION,
        'appium:automationName': process.env.AUTOMATION_NAME
    }],
};

• This is how our .env file looks like:

# =============================
# Local Android Capabilities
# =============================
PLATFORM = 'Android'
DEVICE_NAME = "Bhavik's Android"
PLATFORM_VERSION = '14.0'
AUTOMATION_NAME = 'UiAutomator2'
APK_FILE = '.\\phantom\\src\\main\\resources\\app\\spotify.apk'
APP_PACKAGE = 'com.spotify.music'
APP_ACTIVITY = 'com.spotify.music.MainActivity'

3. Write Your First Test:

• Create a test file (e.g., test.e2e.js).
• Use WebdriverIO's intuitive syntax to interact with your app elements.
• We are creating a very simple test which is going to fail and as we have WDIO hook configured for afterTest which is going to take the screenshot after every failed test.

// test.e2e.js
describe('I want to fail the test', async () =>{
    it('failing test', async () =>{
        await expect(true).toBe(false)
    })
})

//wdio.conf.js
afterTest: async function (test, context, { error, result, duration, passed, retries }) {
    if (!passed) {
        await browser.takeScreenshot();
    }
},

4. Setup the automated report generation:

// wdio.conf.js
export const config = {
  // ... other configurations and capabilities
  onComplete: function (exitCode, config, capabilities, results) {
    const reportError = new Error('Could not generate Allure report')
    const generation = allure(['generate', 'allure-results', '--clean'])
    return new Promise((resolve, reject) => {
        const generationTimeout = setTimeout(
            () => reject(reportError),
            5000)

        generation.on('exit', function (exitCode) {
            clearTimeout(generationTimeout)

            if (exitCode !== 0) {
                return reject(reportError)
            }

            console.log('Allure report successfully generated')
            resolve()
        })
    })
},
};

5. Make sure device/emulator is connected:

adb devices

• If device is not connected, enable the USB Debugging to ON and connect the android device

adb connect 192.168.2.26:46551

6. Run the Test:

• Execute the test using npm run wdio.
• Sit back and watch your test run on your device!

Congratulations! You've successfully run your first mobile test using WebdriverIO and Appium. You can find the full code used for this example in the GitHub Repo here..

Ready to Soar Higher?

This is just the beginning! We will explore the vast possibilities of mobile automation in our next posts:

• Setup the debugging the Android and iOS Devices
• Common issues during setup of WebdriverIO and Appium
• Finding locators using Appium Inspector
• Run first test on iOS Device

Join the QA Club Community:

For an enriching journey in test automation, join the vibrant community at https://www.qaclub.io. Share your experiences, learn from experts, and collaborate on exciting projects. Remember, the power of collective learning can propel you to new heights!

Ready to take your mobile testing skills to the next level? Start your automation adventure today with WebdriverIO and Appium, and don't forget to join the QA Club community for an enriching experience!