AWS Device Farm で Android の Webブラウザテストを行ってみた

いわさ

2021.07.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

いわさです

前回は Appium環境で Android+Chrome での自動テスト環境を構築し実施しました。

本日は、DeviceFarm上で上記テストを実行できるようにコードを修正し、またテスト結果から一部うまく動作しない点を修正します。

Device Farms でのWebブラウザテスト

Choose your application にて、Droid君とリンゴのマークではなく、 HTML5のマークを選択します。

テストフレームワークは作成したテストコードに合わせて選択します。

ここでは前回作成したテストにスクリーンショット機能を付与したものをテストコードとして利用します。

また、Device Farms上ではCapabilitiesは空で指定する必要があります。
よってテストコードは以下のようになりました。

const wdio = require("webdriverio");
const assert = require("assert");

const opts = {
  path: '/wd/hub',
  port: 4723,
  capabilities: {
    // platformName: "Android",
    // platformVersion: "9",
    // deviceName: "Android Emulator",
    // browserName: "Chrome",
    // automationName: "UiAutomator2"
  }
};

const DEFAULT_TIMEOUT = 15000;
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));
async function main () {
  const client = await wdio.remote(opts);

  await client.url("https://classmethod.jp/");
  await client.saveScreenshot(process.env.SCREENSHOT_PATH + "/1.png");

  const menuButton = await client.$(".header__menu");
  await menuButton.waitForDisplayed({timeout: DEFAULT_TIMEOUT});
  await menuButton.click();
  await sleep(5000);
  await client.saveScreenshot(process.env.SCREENSHOT_PATH + "/2.png");

  await sleep(2000);
  await client.touchScroll(0, 500);
  await sleep(1000);

  const siryoButton = await client.$('a[href="/download/company-overview/"]');
  await siryoButton.waitForDisplayed({timeout: DEFAULT_TIMEOUT});
  await siryoButton.click();
  await client.saveScreenshot(process.env.SCREENSHOT_PATH + "/3.png");

  await client.deleteSession();
}

main();

次に、テストデバイスを選択します。　　今回は、PixelとGalaxyを選択しました。

iOSについては実はこのままだとうまく動作しません。
iOS対策は別途調査し、記事にしたいと思います。

テストが開始されます。
ブラウザテストの場合、ネイティブアプリテストのようなデバイスの状態（GPSダミーなど）のテストオプションを選択することは出来ません。

テストが終了し、レポートが表示されました。
2枚目の画像は右上のハンバーガーメニューをクリックした後にスライドメニューが展開されていることを期待していましたが、アイコンが少し動いている状態でキャプチャが取得されてしまっています。

5秒のスリープを入れましたがうまく動作していません。

秒数指定のWaitでテストを組んでいたり、不適切な位置でスクリーンショット取得処理が実行されるとこのようになります。
ここでは、waitForDisplayedメソッドを使い、操作後の要素が画面へ表示された後にスクリーンショットを取得するようテストコードを変更しました。

const DEFAULT_TIMEOUT = 15000;
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));
async function main () {
  const client = await wdio.remote(opts);

  await client.url("https://classmethod.jp/");

  const menuButton = await client.$(".header__menu");
  await menuButton.waitForDisplayed({timeout: DEFAULT_TIMEOUT});
  await client.saveScreenshot(process.env.SCREENSHOT_PATH + "/1.png");

  await menuButton.click();

  await sleep(2000);
  await client.touchScroll(0, 500);
  await sleep(1000);

  const siryoButton = await client.$('a[href="/download/company-overview/"]');
  await siryoButton.waitForDisplayed({timeout: DEFAULT_TIMEOUT});
  await client.saveScreenshot(process.env.SCREENSHOT_PATH + "/2.png");

  await siryoButton.click();
  await sleep(5000);
  await client.saveScreenshot(process.env.SCREENSHOT_PATH + "/3.png");

  await client.deleteSession();
}