はじめに
nuxtプロジェクトのE2Eテストを自動化したくてCypressを導入することになった。
Dockerを使って普段開発しているが、とりあえずCypressを試しながらテストを書くため、Dockerイメージを追加するのは後回しにしてローカルにCypressをインストールしようとした。
2022/08/17-23
OS : Windows
powershell
エラー内容
$ yarn add cypress -dev
..
(中略)
The Cypress App could not be downloaded.
Does your workplace require a proxy to be used to access the Internet? If so, you must configure the HTTP_PROXY environment variable before downloading Cypress. Read more: https://on.cypress.io/proxy-configuration
Otherwise, please check network connectivity and try again:
----------
URL: https://download.cypress.io/desktop/10.6.0?platform=linux&arch=x64
Error: unable to get local issuer certificate
----------
unable to get local issuer certificate
ローカル発行証明書が取得できなくてダメっぽい
回避策
Zscalerや企業VPNを通してダウンロードしている場合、以下の手順で解決する
参考 : https://dev.to/tugkankibar/using-cypress-behind-a-corporate-proxy-vpn-oh-no-39f4
Cypressのダイレクトダウンロード
エラーにあるURL or 公式のダウンロードURLからCypressのZipファイルをダウンロード
- 公式URLリスト
OSごとにURLが異なるので、適宜選ぶこと
私は以下のリンクを使用した。
https://download.cypress.io/desktop/10.6.0?platform=linux&arch=x64
Zipファイルを配置する場所はどこでもいい
環境変数としてCYPRESS_INSTALL_BINARYを設定する
$Env:CYPRESS_INSTALL_BINARY = '<zipファイルのパス>'
プロジェクトのディレクトリをワーキングディレクトリにして、yarn add
$ yarn add cypress --dev
devオプションはお好みで
ワーキングディレクトリはcypressを管理するフォルダなのでどこでもいい
アプリにまとめてもいいなら、--devを付けてアプリディレクトリでやればいいし
そうでないならプロジェクトフォルダの外でもいい
Cypressを開く
$ yarn cypress open
私の環境ではこれで解決した。
以下に原因や調査したときの参考記事を記述しておく。
再現性
環境
- Windows or WSL2 (Ubuntu)
- VScode
- Node.js v16.13.0
- yarn v1.22.19
- Cypress v10.6.0
ディレクトリ構成
root
|— nuxt app
|— package.json
|— DockerFile
…
作業は全てプロジェクトrootディレクトリで行った
Dockerで後で足すことを考えていたので、CypressはNuxtアプリのpackage.jsonで管理せず、外のプロジェクトルートディレクトリのpackage.jsonで管理
手順
$ cd root
$ yarn init
$ yarn add cypress --dev
原因
結論としては
企業VPN/proxyを通してダウンロードしようとして、ローカル発行証明書が取得できずにエラーになった
だと思われる。
もしZscalerを使っていたら疑っていい。
その結果、Cypressのバイナリがキャッシュにインストールされなかったようだ。
yarn addがDLエラーになった直後に
yarn cypress open
すると
Cypress executable not found at: <キャッシュフォルダ>
というエラーが出る。
公式ドキュメントを見ると、Cypressのバイナリがデフォルトのキャッシュフォルダにインストールされていないというエラーである。
-
MacOS:
~/Library/Caches/Cypress -
Linux:
~/.cache/Cypress -
Windows:
/AppData/Local/Cypress/Cache
確かに、フォルダを見に行くとバイナリファイルは入っていなかった。
正しくインストールされているなら以下の画像のようになる。
参考リンク
- 公式ドキュメント Cypress Advanced Installation
- 今回の回避策はほとんどここから理解した
-
先人の解答
- ただしCypress v10より前なので、ダイレクトダウンロードしてくるものが違うし、少しやり方が異なる
最後に
公式ドキュメントをしっかり読めということなのだが、Direct DownloadとBinaryInstallのオプションに気づくまで時間がかかった。
何ならZipファイルを普通に解凍して、Cypress.exeを直で起動したがcypress.config.jsの
const { defineConfig } = require("cypress");
を追加しようとするとcypressがないってエラーになって、yarnやnpmで正しくインストールしないとダメだとなった。
(yarnで入れて起動するとdefineConfigはデフォルトでcypress.config.jsに記載されるし、正しく動作する)
個人ネットワークの私用環境でCypressをインストールしたら、何一つ詰まらずにインストールできたので、企業VPN周りだと気づけたのが幸いだった。
このインストールの失敗は公式GithubのIssueとして立っていて未解決のままCloseされているものも多い。その中には解決策を提示しているものもあるので、もしこれで解決しなければ探してみるのも手だと思う。