Cypressをdocker-composeで起動（Mac）

概要

CypressのTestRunnerとGUIをdockerでローカルに構築したときのメモ
公式サイトと他の方の記事に全て書いてあるが、自分の構築時の備忘録として残しておきます。

手順

• MacOS:10.15.7
• docker-compose
  • app -> テスト対象のwebサービス
• webアプリケーションはあらかじめたてておく

(approot)
 ├ cypress
 │  └ integration
 │    └ sample_spec.js
 ├ cypress.json -> 空でも置く
 ├ yml:docker-compose-cypress-open.yml -> GUI open用
 ├ yml:docker-compose-cypress.yml -> cypress起動
 └ docker-compose.yml -> app用

Test実行(CLI)

アプリケーションがRailsだったので以下をconfigに追加

config.hosts << 'app'

docker-compose-cypress.yml

version: '3.2'

services:
  e2e:
    container_name: e2e
    image: cypress/included:6.6.0
    depends_on:
      - app
    environment:
      - CYPRESS_baseUrl=http://app:3000
    working_dir: /e2e
    volumes:
      - ./:/e2e

docker-compose -f docker-compose.yml -f docker-compose-cypress.yml run --rm e2e

GUI open

XQuartzインストール

以下にしたがって、インストール・設定・起動
https://sourabhbajaj.com/blog/2017/02/07/gui-applications-docker-mac/

envをセット

fish

set IP (ipconfig getifaddr en0)
set DIDPLAY :0
xhost + $IP
set DISPLAY $IP:0

(参考) https://www.cypress.io/blog/2019/05/02/run-cypress-with-a-single-docker-command/#Docker-compose

docker-compose-cypress-open.yml

version: '3.2'

services:
  e2e:
    entrypoint: cypress open --project .
    environment:
      - DISPLAY
    volumes:
      - /tmp/.X11-unix:/tmp/.X11-unix

起動

docker-compose -f docker-compose.yml -f docker-compose-cypress.yml -f docker-compose-cypress-open.yml run --rm e2e

課題

cypressのバージョンによってうまく動作しないところがそれぞれある
テスト実行時の挙動
(画面にログインをして、ログアウトリンクをクリックするサンプルテスト)

• 3.2.0
  • CLI:「Uncaught TypeError: Illegal invocation」のエラーが出る
  • GUI:「Uncaught TypeError: Illegal invocation」のエラーが出る
  • GUI: 別途日本語化対応が必要
• 3.4.0
  • CLI:「Uncaught TypeError: Illegal invocation」のエラーが出る
  • GUI:途中で「he automation client disconnected. Cannot continue running tests.」となって切れる
• 3.8.1
  • CLI: 正常に実行してパスした
  • GUI: 実行はされていそう（リクエストはしている）が画面が白い
• 4.12.1
  • CLI: 正常
  • GUI: 画面にRESULT_CODE_BAD_PROCESS_TYPEがでて止まる
• 5.6.0
  • CLI: 正常
  • GUI: Error code:6とでて止まる
• 6.6.0
  • CLI: 無限ループのようになるので強制終了させた
  • GUI: 正常に実行された。日本語化されてる
• 6.8.0
  • CLI: 6.6.0と同様
  • GUI: 最初のvisitをくりかえす無限ループのような現象

入っているデフォルトのブラウザのバージョンの違いとかかな・・

参考

• https://www.cypress.io/blog/2019/05/02/run-cypress-with-a-single-docker-command/#Docker-compose
• https://sourabhbajaj.com/blog/2017/02/07/gui-applications-docker-mac/
• https://qiita.com/kodai_0122/items/67c6d390f18698950440