7
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Windows野郎がMacにseleniumとappiumを入れてMacのSafariとAndroid・iOSの実機Webブラウザテストを行うまで

Last updated at Posted at 2019-01-19

##はじめに

Windows野郎なのでMacのことがさっぱりわからない私が、わからないなりにMacにseleniumとappiumを導入してMacのSafariとモバイルの実機Webブラウザテストに至るまでの手順を記載します。
(※Selenium(Appium)クライアントはWindowsのC#で作成しており、Mac上にSeleniumおよびAppiumサーバーを立ててリモートで操作するための手順です。)

数々の先人の知恵があるにも関わらずハマりまくって何度か挫折しそうになりつつ何とか乗り越えたので、Mac素人がハマったポイントは赤字で記載します。(※Mac関係ないところもあります。)

なお、私の前提知識は
Mac:ほぼ経験なし。1回だけ他人様に作ってもらったiOSアプリをビルドして審査に出した程度の経験値。
   ターミナルを起動して何となくUnix系OSなのかなーぐらいのレベル。
Node.js:どんなものかは知ってるが使ったことない。
Linux(Unix):多少かじってる。
といった感じです。

##参考にさせて頂いた先人の知恵
https://stackoverflow.com/questions/18868743/how-to-install-selenium-webdriver-on-mac-os
https://qiita.com/sakaimo/items/88bbbf095d7fc4f41264
https://qiita.com/zprodev/items/3067a1e077d448827475
https://qiita.com/furusin_oriver/items/2d104ccdb7f68929ebfd
https://qiita.com/emurin/items/5cb9632514a74b056217
https://stackoverflow.com/questions/52602425/libusbmuxd-version-error-during-flutter-install
※本記事には上記記事からの転記、引用を多分に含みます。
 というかほぼ寄せ集めて合体させただけです。

##参考にした公式サイト
https://www.seleniumhq.org/
http://appium.io/docs/en/about-appium/getting-started/
http://appium.io/docs/en/drivers/ios-xcuitest-real-devices/
https://github.com/justadudewhohacks/opencv4nodejs#how-to-install

##本記事では説明しない内容
seleniumおよびappiumの構造と仕組み
seleniumおよびappiumのクライアント側の話
AppleDeveloperまわり

手順

前提:MacにはXcode10がインストール済み。
   AppleDeveloperアカウントを取得済み。
   実機テストで使用するiPhoneがAppleDeveloperに登録済み。
   実機テストで使用するiPhoneを含むプロビジョニングプロファイルを作成済み。

1.管理者権限のあるアカウントでMacにログインします。

sudoではうまくいかないので管理者権限アカウントが必要です。

2.Homebrewをインストール

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

3.Node.jsをインストール

3-1.Nodebrewをインストール

$ brew install nodebrew

3-2.作業フォルダを作成

$ mkdir -p ~/.nodebrew/src

3-3.Node.jsをインストール

※この作業をしたときはlatestはV11.6でした。
※このときnpmも同時にインストールされます。

$ nodebrew install-binary latest

3-4.パスを通します。

$ echo 'export PATH=$PATH:/Users/no136/.nodebrew/current/bin' >> ~/.bashrc

.bash_profileがない場合は下記コマンドでファイルを生成します。

$ touch .bash_profile

~/.bash_profileに下記を追記します。

if [ -f ~/.bashrc ]; then
    . ~/.bashrc
fi

反映させます。

$ source ~/.bash_profile

4.Seleniumスタンドアロンサーバーをインストール

$ brew install selenium-server-standalone

5.MacのSafariの設定

Safariを起動して環境設定>詳細 の「メニューバーに開発メニューを表示」にチェックを入れます。
開発メニューが表示されるので、リモートオートメーションを許可 にチェックを入れます。

6.Javaをインストール

公式サイトからダウンロードしてきてインストールします。
https://www.java.com/ja/download/help/mac_install.xml

7.JDKをインストール

公式サイトからダウンロードしてきてインストールします。
https://www.java.com/ja/download/faq/develop.xml

SeleniumでMac上のSafariをテストするだけならここで終了です。

8.Appiumをインストール

$ npm install -g appium

9.Appium-doctorをインストール

$ npm install -g appium-doctor

10.appium-doctor --ios を実行します。

$ appium-doctor --ios

エラー、ワーニングになった項目の対応を行います。
私が今回修正したのは下記の通りです。

10-1.Carthageのインストール

$ brew install carthage

10-2.opencv4nodejsのインストール

※ここで前提のCMakeが入っていなくてエラーになりました。opencv4nodejsの公式サイトを見て解決。

$ brew install cmake
$ npm install -g opencv4nodejs

無視したワーニング

・fbsimctl、applesimutilsについてはappium公式サイトによるとシミュレータで使うものらしいです。
今回は実機テストが目的なのでこの2つは何もせずに放置しました。

11.AndroidStudioをインストール

AndroidStudio公式サイトの手順に従ってインストールします。

12.Android用の環境変数を設定

12-1.Javaのパスを確認します。 ※AndroidStudio同梱のJAVAを使うならAndroidStudio上で確認できるパスにする

/usr/libexec/java_home

12-2.Android SDKのパスを確認します。

AndroidStudioを起動し、適当なプロジェクトを開きます。(なければ新規作成)
File→Other Settings→Default Project Structure…を開く
Android SDK Locationにパスがあります。

12-3..bashrcに確認したパスを記載します。

export JAVA_HOME='確認したパス'
export ANDROID_HOME='確認したパス'

さらにpathに$JAVA_HOME/binを追加します。
既存のPATHの記述に:で区切って追加します。。※JAVA_HOMEの定義はpathより先に書く

さらにpathにadbの実行フォルダのパスを追加します。。
PATHの最後に$ANDROID_HOME/platform-toolsを追加します。※ANDROID_HOMEの定義はpathより先に書く

12-4.設定を読み込む

$ srouce ~/.bash_profile

13.appium-doctor --android を実行します。

$ appium-doctor --android

※エラー、ワーニングが出たら修正します。
 私がやったときは出ませんでした。

14.iOS実機用環境設定を行います。

$ brew install libimobiledevice
$ brew install ios-deploy
$ brew install ios-webkit-debug-proxy

しかしながら、これだと手元のiPhoneX(iOS 12.1.1)では動きませんでした。
ググったところlibimobiledeviceはHEADをインストールする必要があるらしいのですが、何かの登録がおかしいらしく、依存関係を手動でいじって解決が必要なようでした。(そのうち修正されるとは思いますが。)

これにたどり着くまで3時間ぐらいかかりました(泣)
以下対応するコマンド。

$ brew uninstall --ignore-dependencies libimobiledevice
$ brew uninstall --ignore-dependencies usbmuxd
$ brew install --HEAD usbmuxd
$ brew unlink usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice

15.WebDriverAgentの設定

15-1.依存解消のscriptを実施します。

>cd  ~/.nodebrew/current/lib/node_modules/appium/node_modules/appium-xcuitest-driver/WebDriverAgent/
>bash Scripts/bootstrap.sh -d
>bash Scripts/bootstrap.sh
ここでreactとreact-dom 15.6.2がないよと警告が出てエラーになりました。 とりあえずreactとreact-domを入れてみます。
$ npm install  react@15.6.2 react-dom@15.6.2
しかしそれでもうまくいかないのでnpm uninstall reactでアンインストールしてもう1回react15.6.2を入れなおしたら行けました。謎。 reactをアンインストールした時に何故かビルドが走ってうまくいった気がします。これに関してはいまだによくわからないので正しい解決方法をご存知の方がいらっしゃったら教えて下さい。

ちなみにこのハマりでも3時間程度を浪費しました。

15-2.同じフォルダに入っているWebDriverAgent.xcodeprojをXcodeで起動してビルドする。

$ open .

でFinderが起動できます。

WebDriverAgentLib
WebDriverAgentRunner
にプロビジョニングプロファイルが必要なので、自動設定を有効にし、自分のチームを設定してビルドします。
※このあたりはちょっと怪しいです。

以上でMacの設定終了です。

実機テストを行うときの手順

MacのSafariをテストする場合

node.jsを起動します。 ※インストールしたバージョンを起動する。

$ nodebrew use v11.6.0

seleniumを起動します。※ポートはデフォルトポートなので指定いらないかも

$ selenium-server --port 4444

iOS実機テストする場合

node.jsを起動します。 ※インストールしたバージョンを起動する。

$ nodebrew use v11.6.0

appiumを起動します。 ※ポートはデフォルトポートなので指定いらないかも

$ appium --port 4723 &

iPhoneとUSBで接続します。

ios webkit debug proxyを起動します。
UDIDは接続しているiPhoneのUDIDを指定してください。

$ ios_webkit_debug_proxy -c $UDID:27753 -d &

iOS実機のSafari設定でWebインスペクタをONにします。

Android実機をテストする場合

node.jsを起動します。 ※インストールしたバージョンを起動する。

nodebrew use v11.6.0	

appiumを起動します。

appium --port 4723 &	

adbを起動します。

adb device	

対象の実機のSDKがインストールされていない場合はAndroidStudioでインストールします。

Androidの実機とUSB接続します。

Android実機の開発者オプションをONにし、USBデバッグモードをONにします。
(「設定」=>「端末情報」=>「ビルド番号」を7回タップすると「設定」に開発者向けオプションが表示されるので「USBデバッグ」をonにする)

参考:ハマった時の調査方法

ハマった時の調査手順をメモしておきます。

1.エラーメッセージで検索する。

2.インストールしようとしているパッケージの公式サイトのGetting StartかHow to Installかそれっぽいところを参照する。(最初に読んどけって話もありますが)

3.オープンソースの場合はGithubのReadmeあたりを見てみる。

4.インストールしようとしているパッケージ名 install とかパッケージ名とエラーログに含まれるキーワードとか、関連しそうなワードでひたすらググる。ここまで来たら基本的に英語で検索する。
経験的にはStackOverflowに解決策が落ちていることが多い気がする。

5.検索した情報とあわせて各ミドルウェア、パッケージなどの役割・基本構造を確認して原因を推測する。

7
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?