モバイルアプリテストのインストール | 開発者ガイド

概要

Nightwatch でモバイルアプリテストを実行するには、いくつかのものをインストールする必要があります。

Appium
コマンドラインツール
それぞれのプラットフォームのSDK
仮想デバイス

しかし、Nightwatch は Mobile Helper ツールを使用してこれらすべての設定を簡素化します。

新規プロジェクトの設定

実行すると

npm init nightwatch <directory-name>

最初の質問は

? Select testing type to setup for your project (Press <space> 
to select,<a> to toggle all,<i> to invert selection,and 
<enter> to proceed)
❯◯ End-to-End testing
 ◯ Component testing
 ◉ Mobile app testing

モバイルアプリテストが選択されていることを確認してください。残りは一連の質問/手順になり、Nightwatch は必要なもののすべてをインストールするか、必要な指示を提供することで、複雑な作業を担います。

モバイルアプリテストのみを行う予定の場合は、次のコマンドを使用してアプリモードで Nightwatch のインストールを開始することもできます。

npm init nightwatch@latest <foldername> -- --app

Android を選択した場合、1 つ重要な点に注意してください。SDK がインストールされていない場合は、SDK ダウンロードの重複を避けるために、デフォルトオプションのみを選択してください。SDK がインストールされている場合は、この質問が表示されたときにパスを指定してください。

? Where do you want the Android SDK setup? Please give the path 
to your existing setup (if any): 
(/Users/vishal/Library/Android/sdk)

以上です。モバイルアプリテストの Nightwatch セットアップは完了です！

既存のプロジェクトにモバイルアプリテストを追加する

Android

ステップ 1
Nightwatch プロジェクトディレクトリに移動し、次のコマンドを実行します。

npx @nightwatch/mobile-helper android --appium

ステップ 2
要件に基づいて質問に答えます。

Android を選択した場合、1 つ重要な点に注意してください。SDK がインストールされていない場合は、SDK ダウンロードの重複を避けるために、デフォルトオプションのみを選択してください。SDK がインストールされている場合は、この質問が表示されたときにパスを指定してください。

? Where do you want the Android SDK setup? Please give the path 
to your existing setup (if any): 
(/Users/vishal/Library/Android/sdk)

s

ステップ 3
すべての要件が満たされていない場合、またはエラーが発生した場合は、指示に従って解決します。

ステップ 4
次に、次のコマンドを使用してプロジェクトに Appium 2 を設定します。

npm i appium@next --save-dev

ステップ 5
Android 用 Appium UiAutomator2 ドライバをインストールします。

npx appium driver install uiautomator2

ステップ 6
サンプルの Wikipedia アプリ wikipedia app をダウンロードし、プロジェクトのルートディレクトリ（nightwatch.conf.js ファイルの隣）に保存します。

ステップ 7 Android エミュレータと実デバイス用の Nightwatch 環境を追加します。

nightwatch.conf.json

{
    ...
    'test_settings':{
        app: {
            selenium: {
                start_process: true,
                use_appium: true,
                host: 'localhost',
                port: 4723,
                server_path: '',
                // args to pass when starting the Appium server
                cli_args: [
                // automatically download the required chromedriver
                // '--allow-insecure=chromedriver_autodownload'
                ],
                // Remove below line if using Appium v1
                default_path_prefix: ''
            },
            webdriver: {
                timeout_options: {
                timeout: 150000,
                retry_attempts: 3
                },
                keep_alive: false,
                start_process: false
            }
        },
        'app.android.emulator': {
            extends: 'app',
            'desiredCapabilities': {
                // More capabilities can be found at https://github.com/appium/appium-uiautomator2-driver#capabilities
                browserName: null,
                platformName: 'android',
                // `appium:options` is not natively supported in Appium v1,but works with Nightwatch.
                // If copying these capabilities elsewhere while using Appium v1,make sure to remove `appium:options`
                // and add `appium:` prefix to each one of its capabilities,e.g. change 'app' to 'appium:app'.
                'appium:options': {
                automationName: 'UiAutomator2',
                // Android Virtual Device to run tests on
                avd: 'nightwatch-android-11',
                // While Appium v1 supports relative paths,it's more safe to use absolute paths instead.
                // Appium v2 does not support relative paths.
                app: `${__dirname}/wikipedia.apk`,
                appPackage: 'org.wikipedia',
                appActivity: 'org.wikipedia.main.MainActivity',
                appWaitActivity: 'org.wikipedia.onboarding.InitialOnboardingActivity',
                // chromedriver executable to use for testing web-views in hybrid apps.
                // add '.exe' at the end below (making it 'chromedriver.exe') if testing on windows.
                chromedriverExecutable: `${__dirname}/chromedriver-mobile/chromedriver`,
                newCommandTimeout: 0
                }
            }
        },
        'app.android.real': {
            extends: 'app',
            'desiredCapabilities': {
                // More capabilities can be found at https://github.com/appium/appium-uiautomator2-driver#capabilities
                browserName: null,
                platformName: 'android',
                // `appium:options` is not natively supported in Appium v1,but works with Nightwatch.
                // If copying these capabilities elsewhere while using Appium v1,make sure to remove `appium:options`
                // and add `appium:` prefix to each one of its capabilities,e.g. change 'app' to 'appium:app'.
                'appium:options': {
                    automationName: 'UiAutomator2',
                    // While Appium v1 supports relative paths,it's more safe to use absolute paths instead.
                    // Appium v2 does not support relative paths.
                    app: `${__dirname}/nightwatch/sample-apps/wikipedia.apk`,
                    appPackage: 'org.wikipedia',
                    appActivity: 'org.wikipedia.main.MainActivity',
                    appWaitActivity: 'org.wikipedia.onboarding.InitialOnboardingActivity',
                    // 'chromedriver' binary is required while testing hybrid mobile apps.
                    // 
                    // Set `chromedriverExecutable` to '' to use binary from `chromedriver` NPM package (if installed).
                    // Or,put '--allow-insecure=chromedriver_autodownload' in `cli_args` property of `selenium`
                    // config (see 'app' env above) to automatically download the required version of chromedriver
                    // (delete `chromedriverExecutable` capability below in that case).
                    chromedriverExecutable: '',
                    newCommandTimeout: 0,
                    // add device id of the device to run tests on,if multiple devices are online
                    // Run command: `$ANDROID_HOME/platform-tools/adb devices` to get all connected devices
                    // udid: '',
                }
            }
        },
    }
}

ステップ 8 nightwatch/examples/mobile-app-tests/wikipedia-android.js ファイルの下に次のサンプルテストファイルを追加します。

nightwatch/examples/mobile-app-tests/wikipedia-android.js


describe('Wikipedia Android app test',function(){
    before(function(app) {
        app.click('id','org.wikipedia:id/fragment_onboarding_skip_button');
    });
    it('Search for BrowserStack',async function(app) {
        app
            .click('id','org.wikipedia:id/search_container')
            .sendKeys('id','org.wikipedia:id/search_src_text','browserstack')
            .click({selector: 'org.wikipedia:id/page_list_item_title',locateStrategy: 'id',index: 0})
            .waitUntil(async function() {
                // wait for webview context to be available
                const contexts = await this.appium.getContexts();
                

                return contexts.includes('WEBVIEW_org.wikipedia');
            })
            .appium.setContext('WEBVIEW_org.wikipedia')
            .assert.textEquals('.pcs-edit-section-title','BrowserStack');  // command run in webview context
    });
});

完了！🎉 Android の設定が完了しました。

iOS

ステップ 1
Nightwatch プロジェクトディレクトリに移動し、次のコマンドを実行します。

npx @nightwatch/mobile-helper ios --setups

ステップ 2
要件に基づいて質問に答えます。

ステップ 3
すべての要件が満たされていない場合、またはエラーが発生した場合は、指示に従って解決します。

ステップ 4
その後、次を使用してプロジェクトに Appium 2 を設定します。

npm i appium@next --save-dev

ステップ 5
次を使用して iOS 用 Appium XCUITest ドライバをインストールします。

npx appium driver install xcuitest

ステップ 6
サンプルの Wikipedia アプリ wikipedia app をダウンロードし、プロジェクトのルートディレクトリ（nightwatch.conf.js ファイルの隣）に保存します。

ステップ 7 iOS シミュレータと実デバイス用の Nightwatch 環境を追加します。

nightwatch.conf.json

{
    ...
    'test_settings':{
        // other envs above this line
        app: {
            selenium: {
                start_process: true,
                use_appium: true,
                host: 'localhost',
                port: 4723,
                server_path: '',
                // args to pass when starting the Appium server
                cli_args: [
                // automatically download the required chromedriver
                // '--allow-insecure=chromedriver_autodownload'
                ],
                // Remove below line if using Appium v1
                default_path_prefix: ''
            },
            webdriver: {
                timeout_options: {
                timeout: 150000,
                retry_attempts: 3
                },
                keep_alive: false,
                start_process: false
            }
        },
        

        'app.ios.simulator': {
            extends: 'app',
            'desiredCapabilities': {
                // More capabilities can be found at https://github.com/appium/appium-xcuitest-driver#capabilities
                browserName: null,
                platformName: 'ios',
                // `appium:options` is not natively supported in Appium v1,but works with Nightwatch.
                // If copying these capabilities elsewhere while using Appium v1,make sure to remove `appium:options`
                // and add `appium:` prefix to each one of its capabilities,e.g. change 'app' to 'appium:app'.
                'appium:options': {
                automationName: 'XCUITest',
                // platformVersion: '15.5',
                deviceName: 'iPhone 13',
                // While Appium v1 supports relative paths,it's more safe to use absolute paths instead.
                // Appium v2 does not support relative paths.
                app: `${__dirname}/wikipedia.zip`,
                bundleId: 'org.wikimedia.wikipedia',
                newCommandTimeout: 0
                }
            }
        },
        

        'app.ios.real': {
            extends: 'app',
            'desiredCapabilities': {
                // More capabilities can be found at https://github.com/appium/appium-xcuitest-driver#capabilities
                browserName: null,
                platformName: 'ios',
                // `appium:options` is not natively supported in Appium v1,but works with Nightwatch.
                // If copying these capabilities elsewhere while using Appium v1,make sure to remove `appium:options`
                // and add `appium:` prefix to each one of its capabilities,e.g. change 'app' to 'appium:app'.
                'appium:options': {
                    automationName: 'XCUITest',
                    // While Appium v1 supports relative paths,it's more safe to use absolute paths instead.
                    // Appium v2 does not support relative paths.
                    app: `${__dirname}/wikipedia.zip`,
                    bundleId: 'org.wikimedia.wikipedia',
                    newCommandTimeout: 0,
                    // add udid of the device to run tests on. Or,pass the id to `--deviceId` flag when running tests.
                    // device id could be retrieved from Xcode > Window > 'Devices and Simulators' window.
                    // udid: '00008030-00024C2C3453402E'
                }
            }
        },
    }
}

ステップ 8 nightwatch/examples/mobile-app-tests/wikipedia-ios.js ファイルの下に次のサンプルテストファイルを追加します。

nightwatch/examples/mobile-app-tests/wikipedia-ios.js

describe('Wikipedia iOS app test',function() {
    before(function(app) {
        app.click('xpath','//XCUIElementTypeButton[@name="Skip"]');
    });
    it('Search for BrowserStack',async function(app) {
        app
            .useXpath()
            .click('//XCUIElementTypeSearchField[@name="Search Wikipedia"]')
            .sendKeys('//XCUIElementTypeSearchField[@name="Search Wikipedia"]','browserstack')
            .click('//XCUIElementTypeStaticText[@name="BrowserStack"]')
            .waitUntil(async function() {
            // wait for webview context to be available
            const contexts = await this.appium.getContexts();
            

            return contexts.length > 1;
            },5000)
            .perform(async function() {
            // switch to webview context
            const contexts = await this.appium.getContexts();
            

            await this.appium.setContext(contexts[1]);
            })
            .useCss()
            .assert.textEquals('.pcs-edit-section-title','BrowserStack');  // command run in webview context
    });
});

おめでとうございます、iOS の設定が完了しました。

設定の検証

インストールが完了したら、次のコマンドを使用して Android エミュレータでサンプルテストを実行して設定を検証します。

npx nightwatch nightwatch/examples/mobile-app-tests/wikipedia-android.js --env app.android.emulator

または、iOS シミュレータで次を使用して実行します。

npx nightwatch./nightwatch/examples/mobile-app-tests/wikipedia-ios.js --env app.ios.simulator

Appium Inspector のインストール

Appium Inspector は、セレクタの特定とテストのデバッグに非常に役立ちます。Appium Inspector をインストールするには、Appium Inspector releases に移動して最新バージョンをダウンロードします。インストール後、Appium Inspector を開くだけで準備完了です。Mac でのアプリケーションの外観を以下に示します。

Appium Inspector