LEFログ:学習記録ノート

leflog: 学習の記録をどんどんアップしていきます

【WSL2, Debian, Ubuntu】システムテスト等でChromeを立ち上げた際にWSL2側の問題で文字化けしてしまう問題を解決する方法

文字化けしたChromeの例

結論

Debianの場合

sudo apt install task-japanese
sudo apt install fonts-ipafont
sudo apt install fonts-ipaexfont
fc-cache -fv

でOK

Ubuntuの場合は、

sudo apt install language-pack-ja
sudo apt install fonts-ipafont
sudo apt install fonts-ipaexfont
fc-cache -fv

でOK

Debianの場合は、task-japaneseにする必要があるので注意が必要です(ネット上にあまり情報がない)。

経緯

WSL2のたび重なるアップデートのおかげで、WSL2へとインストールしたChromeGUIとして操作できるようになりました。

そのおかげで、システムテストなどもheadless_chromeではなく、普通のchromeでも動くようになりました。

しかし、一つだけ問題が生じました。それは、WSL2のChromeを動かす際に、文字化けが生じるようになったのです。

具体的には、全角文字がぜんぶ文字化けしてしまう現象です。以前はheadless_chromeにしていれば文字化けしなかったのですが、最新のアップデートにより文字化けするようになりました。
(この影響で、headless_chrome使用時のスクリーンショットも文字化けするようになっていました)

この問題を解決するためには、WSL2側へと

  • 日本語パッケージを入れること
  • 日本語のフォントを入れること

の2つが必要です。それを実現するためには、上記の「結論」のコマンドを入力する必要があります。

もし、上記の方法でうまく行かない場合や、他に良い方法がある場合にはコメントなどで情報を頂けると嬉しいです。🙏

参考URL

自分はこの問題を解決するために、以下のブログ記事を参考にしました。

上記のコマンドについて詳しく知りたい方は、これらの記事を読んでみると腑に落ちると思います。

WSL2 + Ubuntu20.04 + Selenium4 + Python3 でスクリーンキャプチャする環境を構築 – ハコイリオヤジ

完全版 WSL2にTeraTermでアクセスし、かつX-Windowアプリを簡単に起動する方法 - Qiita

【 fc-cache 】コマンド――フォントキャッシュを更新する:Linux基本コマンドTips(266) - @IT

お気に入りのフォントを追加する | Linux Magazine

日本語フォント IPAフォントのインストール - Ubuntuサーバー構築入門 - Ubuntuサーバーでゼロから環境構築

chromium-chromedriverの文字化け?日本語のフォントを入れて解決! - ポンコツエンジニアのごじゃっぺ開発日記。

IPAexフォントおよびIPAフォントについて | 一般社団法人 文字情報技術促進協議会

docker の日本語設定 | naokilog.com

Debian -- sid の task-japanese パッケージに関する詳細

Debian/Ubuntuのロケールを日本語にする方法 - Qiita

追記(2023-08-11)

WSL2でシステムテストが動いている場合、このように表示されます。

【実行前】

システムテスト実行前

【実行中】

画像は静止画ですが、実際は目まぐるしく動きます。

システムテスト実行中(ChromeGUIが表示される)

【実行後】

システムテスト実行後

本当はGIF画像で貼りたかったのですが、GIFが貼れなかったので画面遷移を順番に貼りました。

GUIシステムテストができることで、Cypress Studioのような便利なテストツールもWSL2で使えるようになりました。

wsl --update

このコマンドをPowerShell上で動かして、WSL2を最新バージョンにアップデートする必要があります。