LoginSignup
1
0

More than 1 year has passed since last update.

Appiumデスクトップのインストールとテストコードの作成

Posted at

本記事はこちらの記事の続きとなっています。

Appiumデスクトップを起動する

以下の公式からインストールする(READMEの記載をよく読んで行なってください)

起動する
image.png

Edit Configurationsを開いて各自の環境に合わせて入力を行い、Save and Restartを押す

image.png

Start Serverを押すとAppiumサーバーが起動するので右上の虫眼鏡を押してDesired Capabilitiesの設定を行います。
image.png

先程wdio.conf.tsに記載したようにCapabilitiesを入力し、右下のStart Sessionを押す。
image.png

するとエミュレーター上でAPI Demosのアプリが起動する。
image.png

Appiumではアプリの画面上で各要素を見つけ出しその要素に対して何らかの操作をさせることが可能です。
例えば、最初に開いているこのページをホーム画面だとして、ホーム画面内の「Veiws」の項目をタップするとします。
その場合、

  • 「Views」の要素を探す
  • 「Views」の要素をタップする
    というようにテストコードによって操作を行わせることが出来ます。

要素を見つけるための手段については、公式に記載の[セレクターストラテジー]をご覧ください。(https://appium.io/docs/en/commands/element/find-elements/)

Appiumのデモアプリでは全ての要素にcontent-descやresource-idが定義されているため、これを使用してテストコードを書いていこうと思います。

テスト手順としては以下です。

  • アプリ起動
  • 「Views」をタップ
  • スクロールダウンする
  • 「TextFields」をタップする
  • テキストボックスに「Hello World!」を入力する

この時に必要な要素は、「Views」、「TextFields」、テキストボックスになるので事前に各要素のIDを取得しておきます。

「Views」のcontent-descは「Views」
image.png

「TextFields」のcontent-descは「TextFields」
image.png

テキストフィールドのresource-idは「io.appium.android.apis:id/edit2」
image.png

ページの種類としては、以下の3つとなる。

  • アプリ起動時に表示されるHome画面
  • Viewsをタップしたときに表示されるViews画面
  • TextFieldsをタップしたときに表示されるTextFields画面

テストコードの作成

上記までの手順では、Appium(サーバー)とWebdriverIO(クライアント)の環境構築 + CucumberとPageObjectデザインパターンの基盤作りを行なってきましたが、実際にテストコードを書いてテストを実行していきます。

npx wdio configのコマンドでWebdriverIOの構成ファイルを作成した際の以下の質問で、既にCucumberとPageObjectデザインパターンの導入が完了しています。

? Which framework do you want to use? cucumber
? Do you want to use page objects (https://martinfowler.com/bliki/PageObject.html)? Yes

appium-testプロジェクト内にはすでにfeaturesフォルダが作成されており、
その中にはいくつかのファイルがあり、それぞれの用途は以下になります。

  • login.feature     ・・・Gherkin記法でテストシナリオを記載する
  • pageobjects/~.page.ts ・・・アプリケーションのページの要素や処理を定義する
  • step-definitions/steps.ts ・・・テストシナリオに基づいた処理を実装する

各Pageを定義する

各ページに存在する要素をGetterで定義する。(返す値は使用するセレクターによって変える必要がある)

page.ts ・・・各ページの親クラス
image.png

Home.page.ts ・・・ホーム画面(ApiDemosアプリの最初の画面)
image.png
Views.page.ts ・・・Views画面(ホーム画面で「Views」をタップした時に表示される画面)
image.png
TextFields.page.ts
image.png

Featureファイルにテストシナリオを書く

InputText.featureファイルを作成し以下を記述する
image.png

Stepsを実装する

image.png

構成
image.png

テストを走らせる

~/WorkSpace/appium-test $ npx wdio test/wdio.conf.ts

全て成功すればこのようなログが表示される
image.png

ApiDemos(8-5).gif

1
0
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
1
0