Search Results for ""

ブラウザー テスト

以下のセクションに沿って、CircleCI 設定ファイルでブラウザー テストの実行とデバッグを構成する一般的な方法について説明します。

前提条件

CircleCI のビルド済み Docker イメージ」を参照し、Java 8、geckodriver、Firefox、Chrome などのバリアントのイメージ名に -browsers: を付加してください。 PhantomJS などの バリアントのイメージ名には -browsers-legacy を付加してください。

概要

コードをコミットしてプッシュするたびに、選択したブラウザーに対するすべてのテストが、CircleCI によって自動的に実行されます。 ブラウザー ベースのテストは、変更が行われるたび、各デプロイの前、または特定のブランチで実行されるように構成できます。

Selenium

ブラウザー テストに使用される多くの自動化ツールには、広く採用されているブラウザー ドライバー標準である Selenium WebDriver が使用されています。

Selenium WebDriver には、Java、Python、Ruby などの一般的な言語で実装されたブラウザーをプログラムによって操作するための共通 API が用意されています。 Selenium WebDriver からこれらのブラウザー用の統合インターフェイスが提供されるため、開発者が何度もブラウザー テストを作成する必要はありません。 これらのテストは、すべてのブラウザーとプラットフォームで機能します。 セットアップの詳細については、Selenium のドキュメントを参照してください。 仮想フレームバッファ X サーバーのドキュメントについては、Xvfb のマニュアル ページを参照してください。

WebDriver には、ローカルとリモートの 2 種類の動作モードがあります。 テストをローカルで実行する場合は、Selenium WebDriver ライブラリを使用して、同じマシン上のブラウザーを直接操作します。 テストをリモートで実行する場合は、Selenium Server と通信し、サーバーからブラウザーを操作します。

プライマリ Docker イメージに Selenium が含まれていない場合は、以下のように Selenium をインストールして実行します。

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:jessie-browsers
    steps:
      - checkout
      - run: mkdir test-reports
      - run:
          name: Selenium のダウンロード
          command: curl -O http://selenium-release.storage.googleapis.com/3.5/selenium-server-standalone-3.5.3.jar
      - run:
          name: Selenium の起動
          command: java -jar selenium-server-standalone-3.5.3.jar -log test-reports/selenium.log
          background: true

サンプル アプリケーションについては、「2.0 プロジェクトのチュートリアル」の「Selenium のインストール・実行によるブラウザー テストの自動化」セクションを参照してください。 Ruby on Rails 用の Capybara/Selenium/Chrome ヘッドレス CircleCI 2.0 設定ファイルの例については、Knapsack Pro のドキュメントを参照してください。

ヘッドレス Chrome の使用方法については、CircleCI のブログ記事「Headless Chrome for More Reliable, Efficient Browser Testing (ヘッドレス Chrome を使用した高効率かつ高信頼性のブラウザー テスト)」や、関連するディスカッション スレッドを参照してください。

Selenium 用の環境を設定する代わりに、LambdaTest、Sauce Labs、BrowserStack などのクラウドベースのプラットフォームに移行することも可能です。 クロスブラウザー テストを実行するこれらのクラウドは、クラウド上に既製のインフラストラクチャを提供しているため、開発者が Selenium 環境の構成に時間をかける必要はありません。

LambdaTest

すばやい市場投入をご支援するべく、LambdaTest を CircleCI に統合しました。 自動化されたクロスブラウザー テストを LambdaTest で実行して、複数のマシンから実行される 2,000 以上の実ブラウザーを提供するオンライン Selenium Grid を通して、開発コードがクラウド上でシームレスに実行されていることを確認できます。 自動化テストを LambdaTest の Selenium Grid と並列に実行して、テスト サイクルを大幅に短縮できます。

ネットワーク ログ、コマンド ログ、Selenium ログ、各コマンドのステップバイステップ スクリーンショット、テスト実行全体のビデオ、メタデータなど、自動化スクリプトの詳細なテスト レポートを分析できます。

CircleCI と LambdaTest を統合するには、CircleCI インスタンスの設定ファイルである .circleci/config.yml を微調整する必要があります。 変更が必要なのは、アクセス キー、ユーザー名、Grid 構成などの環境変数に関連する部分です。

以下に、CircleCI と LambdaTest を統合するための設定ファイルの例を示します。

JavaScript Node CircleCI 2.0 設定ファイル

# 詳細は https://circleci.com/ja/docs/2.0/language-javascript/ を参照
version: 2
jobs:
  build:
    docker:
      # ここで必要なバージョンを指定します

      - image: circleci/node:7.10
      # 必要に応じて、ここでサービスの依存関係を指定します
      # CircleCI は https://circleci.com/ja/docs/2.0/circleci-images/ に
      # 記載されたビルド済みイメージのライブラリを提供しています
      # オーナーになるためにフォークする必要がある github リポジトリが作業ディレクトリとなります
    working_directory: ~/nightwatch-sample-for-circleci
    steps:
      - checkout

      - run:
          name: "カスタム環境変数のセットアップ // ワークフロー ステップ"
          command: |
            echo 'export LT_USERNAME="{your_lambdatest_username}"' >> $BASH_ENV
      - run:
          name: "カスタム環境変数のセットアップ"
          command: |
            echo 'export LT_ACCESS_KEY="{your_lambda_access_key}"' >> $BASH_ENV
      - run: # 上記の環境変数のバリデーションを行います
          name: "LT_Username: "
          command: echo ${LT_USERNAME}      
      # 依存関係をダウンロードしてキャッシュします
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "package-lock.json" }}
        #正確な一致が見つからない場合は、最新のキャッシュの使用にフォールバックします
      - run: npm をインストール
      # テストを実行します!
      - run: node_modules/.bin/nightwatch -e chrome // bash でテストを実行

ローカルまたはプライベートにホスティングされたプロジェクトのテスト

LambdaTest は、ローカルに保存された Web ページのクロスブラウザー テストを実行できるように、Lambda Tunnel という名前の SSH (Secure Shell) トンネル接続を提供しています。 Lambda Tunnel を使用して、CircleCI ビルド コンテナ内でテスト サーバーを実行し、LambdaTest の Selenium Grid から提供されるブラウザー上で、自動化されたクロスブラウザー テストを実行することができます。 このように、Web サイトを公開する前に、訪問者に対してどのように表示されるのか確認することができます。

以下の config.yml ファイルの例では、LambdaTest の Selenium Grid を活用する方法を具体的に示します。ここでは、CircleCI ビルドに含まれるテスト サーバーを通してブラウザー テストを実行しています。

# JavaScript Node CircleCI 2.0 設定ファイル

詳細は https://circleci.com/ja/docs/2.0/language-javascript/ を参照

version: 2
jobs:
  build: docker: # ここで必要なバージョンを指定します
    - image: circleci/node:7.10
    # 必要に応じて、ここでサービスの依存関係を指定します
    working_directory: ~/Nightwatch-circleci-selenium

    steps:

      - checkout
      - run:
        name: "トンネル バイナリのダウンロード"
          command: |
          wget http://downloads.lambdatest.com/tunnel/linux/64bit/LT_Linux.zip
      - run:
        name: "トンネル バイナリの抽出"
          command: |
          sudo apt-get install unzip
          unzip LT_Linux.zip
      - run:
        name: "トンネル バイナリの実行"
          background: true
          command: |
            ./LT -user ${LAMBDATEST_EMAIL} -key ${LAMBDATEST_KEY}
            sleep 40
      - run:
        name: "カスタム環境変数のセットアップ"
          command: |
            echo 'export LT_USERNAME="${LAMBDATEST_USERNAME}"' >> $BASH_ENV
      - run:
          name: "カスタム環境変数のセットアップ"
          command: |
            echo 'export LT_ACCESS_KEY="${LAMBDATEST_ACCESS_KEY}"' >> $BASH_ENV
      - run: # 現在のブランチをテストします
          name: "LT_Username: "
          command: echo ${LT_USERNAME}      

      # 依存関係をダウンロードしてキャッシュします
      - restore_cache:
        keys:
          - v1-dependencies-{{ checksum "package-lock.json" }}
      # 正確な一致が見つからない場合は、最新のキャッシュの使用にフォールバックします

      - run: npm をインストール

      - save_cache:
          paths:
            - node_modules
                key: v1-dependencies-{{ checksum "package-lock.json" }}

        # テストを実行します!

      - run: node_modules/.bin/nightwatch -e chrome

LambdaTest ブラウザー テスト Orb の例

LambdaTest は、ブラウザー互換性テストのために CircleCI Orb を開発しました。これを使用して、ブラウザー テストを実行する前に Lambda Tunnel を開くことができます。 また、LambdaTest と CircleCI のインテグレーション プロセスも簡単になります。 この Orb (ワークフローで使用できる構成パッケージ) が開発され、使用が承認されたことで、構成ワークフローを単純化することができます。 Orb の例を以下に示します。

# このコードは、MIT ライセンスに基づいて CircleCI からユーザーに使用許諾されています。 詳細については、

# https://circleci.com/orbs/registry/licensing をご覧ください。

version: 2.1 description: > Lambda Tunnel とのインタラクションをカプセル化します

commands: install: steps:

      - run: 
          name: "トンネル バイナリのダウンロード"
          command: |
            wget http://downloads.lambdatest.com/tunnel/linux/64bit/LT_Linux.zip
    
      - run: 
          name: "トンネル バイナリの抽出"
          description: "依存関係 (unzip、wget、ucommon-utils) をインストールします"
          command: |
            sudo apt-get update && sudo apt-get install -y wget unzip ucommon-utils
            if [ "$(md5sum LT_Linux.zip | awk '{print $1}')" == "0279d9a29b2346e90ba237fc5b12d254" ]; then  echo "match";  else echo "Lambda tunnel binary has corrupted. Please rerun this workflow."; exit 1; fi 
            unzip LT_Linux.zip
    

open_tunnel: parameters: tunnel_name: description: この機能によって、選択したヘッド アカウントで利用可能なトンネルを使用できます。ヘッド アカウントは並行トンネル テストを実行するためのメイン アカウントです。 この機能を使用するには、トンネル名とヘッド トンネルの両方を選択する必要があります。 type: string default: "" steps:

      - run: 
          name: "トンネル バイナリの実行"
          background: true
          command: |
            : ${LAMBDATEST_EMAIL:?"Required Env Variable - LAMBDATEST_EMAIL not found!"}
            : ${LAMBDATEST_USERNAME:?"Required Env Variable - LAMBDATEST_USERNAME not found!"}
            : ${LAMBDATEST_KEY:?"Required Env Variable - LAMBDATEST_KEY not found!"}
            ./LT -user ${LAMBDATEST_EMAIL} -key ${LAMBDATEST_KEY} <<# parameters.tunnel_name >> -tunnelName <<parameters.tunnel_name>> <</ parameters.tunnel_name>>
            # Lambda Tunnel の起動を待機します
            sleep 40
    

close_tunnel: steps:

      - run:
          name: Lambda Tunnel を閉じる
          command: killall LT
    

jobs: with_tunnel: description: Lambda Tunnel を使用します parameters: docker: type: string default: "circleci/node:8.9.4" tunnel_name: description: 使用する Lambda Tunnel を指定し、この tunnel_name の目的の機能をテストで使用します type: string default: "" steps: type: steps description: Lambda Tunnel が使用可能になるとこのステップが実行されます docker:

      - image: <<parameters.docker>>
    steps:
      - checkout
      - install
      - open_tunnel:
          tunnel_name: <<parameters.tunnel_name>>
      - steps: << parameters.steps >>
      - close_tunnel

Sauce Labs

Sauce Labs は、CircleCI ビルド コンテナから独立したネットワーク上にあるブラウザーを操作します。 ブラウザーからテスト対象の Web アプリケーションにアクセスするには、Sauce Labs のセキュア トンネル Sauce Connect を使用して、CircleCI 上の Sauce Labs で Selenium WebDriver テストを実行します。

Sauce Connect を使用すると、CircleCI ビルド コンテナ内でテスト サーバーを実行でき、(localhost:8080 などの URL を使用して) それを Sauce Labs のブラウザーに公開することができます。 パブリックにアクセス可能なステージング環境にデプロイした後にブラウザー テストを実行する場合は、Sauce Connect には関係なく通常の方法で Sauce Labs を使用できます。

この例の config.yml ファイルは、CircleCI ビルド コンテナ内で実行されているテスト サーバーに対して、Sauce Labs を通してブラウザー テストを実行する方法を示しています。

version: 2
jobs:
  build:
    docker:
      - image: circleci/python:jessie-node-browsers
    steps:
      - checkout
      - run:
          name: Sauce Labs のインストールとトンネルのセットアップ
          background: true
          command: |
            curl https://saucelabs.com/downloads/sc-4.4.12-linux.tar.gz -o saucelabs.tar.gz
            tar -xzf saucelabs.tar.gz
            cd sc-*
            bin/sc -u ${SAUCELABS_USER} -k ${SAUCELABS_KEY}
        wget --retry-connrefused --no-check-certificate -T 60 localhost:4445  # アプリが準備できるまで待機します
      - run: # 基本イメージは python のため、`unittest` の拡張版である `nosetests` を実行します
          command: nosetests
      - run:
          name: Sauce Connect のトンネルのシャットダウン
          command: |
            kill -9 `cat /tmp/sc_client.pid`

Sauce Labs ブラウザー テスト Orb の例

CircleCI は、ブラウザー テストを実行する前に Sauce Labs トンネルを開くことができる Sauce Labs ブラウザー テスト Orb を開発しました。 この Orb (ワークフローで使用できる構成パッケージ) が開発され、使用が承認されたことで、構成ワークフローを単純化することができます。 Orb の例を以下に示します。

version: 2.1
orbs:
  sauce-connect: saucelabs/sauce-connect@1.0.1
workflows:
  browser_tests:
    jobs:
      - sauce-connect/with_proxy:
          name: Chrome テスト
          steps:
            - run: mvn verify -B -Dsauce.browser=chrome  -Dsauce.tunnel="chrome"
          tunnel_identifier: chrome
      - sauce-connect/with_proxy:
          name: Safari テスト
          steps:
            - run: mvn verify -B -Dsauce.browser=safari  -Dsauce.tunnel="safari"
          tunnel_identifier: safari

Sauce Labs Orb の詳細と、この Orb をワークフローに使用する方法については、CircleCI Orb レジストリにある Sauce Labs Orb のページを参照してください。

BrowserStack と Appium

上の Sauce Labs の例の Sauce Labs のインストールを、BrowserStack などの別のクロスブラウザー テスト プラットフォームのインストールに置き換えることができます。 次に、USERNAME および ACCESS_KEY 環境変数を自分の BrowserStack アカウントに関連付けられた値に設定します。

モバイル アプリケーションの場合は、Appium、または WebDriver プロトコルを使用する同等のプラットフォームを使用できます。それには、ジョブに Appium をインストールし、USERNAME と ACCESS_KEY に CircleCI の環境変数を使用します。

Cypress

JavaScript エンドツーエンド テストに使用できるブラウザー テスト ソリューションとして、他にも Cypress があります。 Selenium アーキテクチャを利用するブラウザー テスト ソリューションとは異なり、Cypress を使用する場合は、アプリケーションと同じ実行ループでテストを実行できます。 このプロセスを簡素化するために、CircleCI 承認済み Orb を使用して、結果を Cypress ダッシュボードにポストせずにすべての Cypress テストを実行するなどのさまざまなテストを実行することができます。 以下に例示する CircleCI 承認済み Orb では、結果がダッシュボードにパブリッシュされずに、すべての Cypress テストが実行されます。

version: 2.1
orbs:
  cypress: cypress-io/cypress@1.1.0
workflows:
  build:
    jobs:
      - cypress/run

設定ファイルのワークフローに使用できる Cypress Orb の例は他にもあります。 これらの Orb の詳細については、CircleCI Orbs レジストリにあるCypress Orbs のページを参照してください。

ブラウザー テストのデバッグ

インテグレーション テストのデバッグは一筋縄では行きません。特に、リモート マシンで実行されている場合はなおさらです。 このセクションでは、CircleCI 上でブラウザー テストをデバッグする方法の例をいくつか示します。

スクリーンショットとアーティファクトの使用

ビルド アーティファクトを収集してビルドから使用できるように CircleCI を構成できます。 たとえば、アーティファクトを使用し、ジョブの一部としてスクリーンショットを保存して、ジョブの終了時に表示することができます。 store_artifacts ステップでそれらのファイルを明示的に収集し、pathdestination を指定する必要があります。 例については、「CircleCI を設定する」の store_artifacts セクションを参照してください。

スクリーンショットの保存は簡単です。WebKit と Selenium では組み込み機能として提供されており、大半のテスト スイートでサポートされています。

ローカル ブラウザーを使用して CircleCI 上の HTTP サーバーにアクセス

CircleCI 上で HTTP サーバーを実行するテストを行う場合、ローカル マシンで動作するブラウザーを使用して障害テストのデバッグを行うと便利な場合があります。 これは、SSH を有効にした実行によって簡単にセットアップできます。

  1. CircleCI アプリの[Job (ジョブ)] ページの [Rerun Job with SSH (SSH でジョブを再実行)] ボタンを使用して SSH ビルドを実行します。次のように、SSH からコンテナにログインするコマンドが表示されます。

    ssh -p 64625 ubuntu@54.221.135.43

  2. コマンドにポート転送を追加するには、-L フラグを使用します。 次の例では、ブラウザーでの http://localhost:3000 へのリクエストを CircleCI コンテナ上のポート 8080 に転送します。 これは、ジョブで Ruby on Rails デバッグ アプリを実行し、それがポート 8080 をリスンする場合などに使用できます。 これを実行した後、ブラウザーに移動して http://localhost:3000 をリクエストすると、コンテナのポート 8080 の処理の内容が表示されます。

    ssh -p 64625 ubuntu@54.221.135.43 -L 3000:localhost:8080

  3. 次に、ローカル マシンでブラウザーを開き、http://localhost:8080 に移動すると、CircleCI コンテナ上のポート 3000 で実行されているサーバーに直接リクエストが送信されます。 CircleCI コンテナでテスト サーバーを手動で起動し (まだ実行されていない場合)、開発マシン上のブラウザーから実行中のテスト サーバーにアクセスすることもできます。

この方法では、たとえば Selenium テストをセットアップするとき、非常に簡単にデバッグを行えます。

VNC からのブラウザー操作

VNC を使用して、テストを実行しているブラウザーを表示し、操作することができます。 これは、実ブラウザーを実行するドライバーを使用している場合にのみ機能します。 Selenium が制御するブラウザーを操作できますが、PhantomJS はヘッドレスなので、操作する対象がありません。

  1. VNC ビューアをインストールします。 macOS を使用している場合は、Chicken of the VNC の使用を検討してください。 RealVNC もほとんどのプラットフォームで使用できます。

  2. ターミナル ウィンドウを開き、CircleCI コンテナへの SSH 実行を開始し、リモート ポート 5901 をローカル ポート 5902 に転送します。

ssh -p PORT ubuntu@IP_ADDRESS -L 5902:localhost:5901
  1. vnc4server パッケージと metacity パッケージをインストールします。 metacity を使用して、ブラウザーを操作し、ターミナル ウィンドウに戻ります。
sudo apt install vnc4server metacity
  1. CircleCI コンテナに接続したら、VNC サーバーを起動します。
ubuntu@box159:~$ vncserver -geometry 1280x1024 -depth 24
  1. SSH の接続はセキュリティ保護されているため、強力なパスワードは必要ありません。 しかし、パスワードが 1 つ必要なので、プロンプトに password を入力します。

  2. VNC ビューアを起動し、localhost:5902 に接続します。 プロンプトに password を入力します。

  3. ターミナル ウィンドウが含まれるディスプレイが表示されます。 SSH トンネルを通して接続はセキュリティ保護されているため、安全ではない接続または暗号化されていない接続に関する警告は無視してください。

  4. VNC サーバーでウィンドウを開くために、DISPLAY 変数を設定します。 このコマンドを実行しないと、ウィンドウはデフォルトの (ヘッドレス) X サーバーで開きます。

ubuntu@box159:~$ export DISPLAY=:1.0
  1. metacity をバックグラウンドで起動します。
ubuntu@box159:~$ metacity &
  1. firefox をバックグラウンドで起動します。
ubuntu@box159:~$ firefox &

これで、コマンド ラインからインテグレーション テストを実行し、ブラウザーで予期しない動作がないかどうかを監視できます。 ローカル マシンでテストを実行しているかのように、ブラウザーを操作することができます。

CircleCI の X サーバーの共有

VNC サーバーを頻繁にセットアップしているなら、そのプロセスを自動化した方が効率的でしょう。 x11vnc を使用して、VNC サーバーを X にアタッチできます。

  1. x11vnc をダウンロードして、テストの前に起動します。

    steps:

    • run: name: X のダウンロードと起動 command: | sudo apt-get install -y x11vnc x11vnc -forever -nopw background: true
  2. これで、SSH ビルドを開始すると、デフォルトのテスト ステップの実行中に VNC サーバーに接続できます。 SSH トンネルの機能を持つ VNC ビューアを使用するか、独自のトンネルをセットアップできます。

    $ ssh -p PORT ubuntu@IP_ADDRESS -L 5900:localhost:5900

SSH からの X11 転送

CircleCI は、SSH からの X11 転送もサポートしています。 X11 転送は VNC と同様、CircleCI 上で動作するブラウザーとローカル マシンからやり取りすることができます。

  1. コンピューターに X Window System をインストールします。 macOS を使用している場合は、[XQuartz] (http://xquartz.macosforge.org/landing/) の使用を検討してください。

  2. システムで X をセットアップしたら、CircleCI VM に対して SSH ビルドを開始します。-X フラグを使用して転送をセットアップします。

    daniel@mymac$ ssh -X -p PORT ubuntu@IP_ADDRESS

これで SSH セッションが開始し、X11 転送が有効化されます。

  1. お使いのマシンに VM のディスプレイを接続するには、ディスプレイ環境変数を localhost:10.0 に設定します。

    ubuntu@box10$ export DISPLAY=localhost:10.0

  2. xclock を起動して、すべて正しく動作していることを確認します。

    ubuntu@box10$ xclock

xclock がデスクトップに表示された後は、Ctrl+c で強制終了することができます。

これで、コマンド ラインからインテグレーション テストを実行し、ブラウザーで予期しない動作がないかどうかを監視できます。 ローカル マシンでテストを実行しているかのように、ブラウザーを操作することができます。

関連項目

2.0 プロジェクトのチュートリアル