【unable to get local issuer certificate】yarn add cypressでダウンロードに失敗した時の回避策

# はじめに

nuxtプロジェクトのE2Eテストを自動化したくてCypressを導入することになった。
Dockerを使って普段開発しているが、とりあえずCypressを試しながらテストを書くため、Dockerイメージを追加するのは後回しにしてローカルにCypressをインストールしようとした。

2022/08/17-23

OS : Windows
powershell

# エラー内容

```bash
$ 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
----------
```

```bash
unable to get local issuer certificate
```

ローカル発行証明書が取得できなくてダメっぽい

# 回避策

Zscalerや企業VPNを通してダウンロードしている場合、以下の手順で解決する

参考 : [https://dev.to/tugkankibar/using-cypress-behind-a-corporate-proxy-vpn-oh-no-39f4](https://dev.to/tugkankibar/using-cypress-behind-a-corporate-proxy-vpn-oh-no-39f4)

## Cypressのダイレクトダウンロード

### エラーにあるURL or 公式のダウンロードURLからCypressのZipファイルをダウンロード

- [公式URL](https://docs.cypress.io/guides/references/advanced-installation#Download-URLs)リスト

OSごとにURLが異なるので、適宜選ぶこと

私は以下のリンクを使用した。

```txt
https://download.cypress.io/desktop/10.6.0?platform=linux&arch=x64
```

:::note info
Zipファイルを配置する場所はどこでもいい
:::

### 環境変数としてCYPRESS_INSTALL_BINARYを設定する

```powershell
$Env:CYPRESS_INSTALL_BINARY = '<zipファイルのパス>'
```

### プロジェクトのディレクトリをワーキングディレクトリにして、yarn add

```powershell
$  yarn add cypress --dev
```

devオプションはお好みで

:::note info
ワーキングディレクトリはcypressを管理するフォルダなのでどこでもいい
アプリにまとめてもいいなら、--devを付けてアプリディレクトリでやればいいし
そうでないならプロジェクトフォルダの外でもいい
:::

### Cypressを開く

```powershell
$ 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で管理

## 手順

```powershell
$ cd root
$ yarn init
$ yarn add cypress --dev
```

# 原因

結論としては

**企業VPN/proxyを通してダウンロードしようとして、ローカル発行証明書が取得できずにエラーになった**

だと思われる。

もしZscalerを使っていたら疑っていい。

その結果、Cypressのバイナリがキャッシュにインストールされなかったようだ。

 yarn addがDLエラーになった直後に

```powershell
yarn cypress open
```

すると

```powershell
Cypress executable not found at: <キャッシュフォルダ>
```

というエラーが出る。

公式ドキュメントを見ると、Cypressのバイナリがデフォルトのキャッシュフォルダにインストールされていないというエラーである。

[OSごとにキャッシュフォルダの位置は異なる](https://docs.cypress.io/guides/references/advanced-installation#Binary-cache)

- **MacOS**: `~/Library/Caches/Cypress`
- **Linux**: `~/.cache/Cypress`
- **Windows**: `/AppData/Local/Cypress/Cache`

確かに、フォルダを見に行くとバイナリファイルは入っていなかった。

正しくインストールされているなら以下の画像のようになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694714/42510888-18c2-c99b-9244-976f07ed0f4c.png)


# 参考リンク

- [公式ドキュメント Cypress Advanced Installation](https://docs.cypress.io/guides/references/advanced-installation)
- [今回の回避策はほとんどここから理解した](https://dev.to/tugkankibar/using-cypress-behind-a-corporate-proxy-vpn-oh-no-39f4)
- [先人の解答](https://qiita.com/sugasaki/items/87ff0db6390ce257df92)
    - ただしCypress v10より前なので、ダイレクトダウンロードしてくるものが違うし、少しやり方が異なる

# 最後に

公式ドキュメントをしっかり読めということなのだが、Direct DownloadとBinaryInstallのオプションに気づくまで時間がかかった。

何ならZipファイルを普通に解凍して、Cypress.exeを直で起動したがcypress.config.jsの

```powershell
const { defineConfig } = require("cypress");
```

を追加しようとするとcypressがないってエラーになって、yarnやnpmで正しくインストールしないとダメだとなった。

(yarnで入れて起動するとdefineConfigはデフォルトでcypress.config.jsに記載されるし、正しく動作する)

個人ネットワークの私用環境でCypressをインストールしたら、何一つ詰まらずにインストールできたので、企業VPN周りだと気づけたのが幸いだった。

このインストールの失敗は公式GithubのIssueとして立っていて未解決のままCloseされているものも多い。その中には解決策を提示しているものもあるので、もしこれで解決しなければ探してみるのも手だと思う。

https://github.com/cypress-io/cypress/issues