はじめに

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のバイナリがデフォルトのキャッシュフォルダにインストールされていないというエラーである。

OSごとにキャッシュフォルダの位置は異なる

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されているものも多い。その中には解決策を提示しているものもあるので、もしこれで解決しなければ探してみるのも手だと思う。