みーのぺーじ

みーが趣味でやっているPCやソフトウェアについて．Python, Javascript, Processing, Unityなど．

開発環境のTestCafeでSSLを利用する

JavaScript TestCafe

TestCafeは，JavaScriptでe2e testを作成すれば，たくさんの種類のブラウザーで実行できる便利なライブラリです．

Apple Payなど通信がhttpsでなければ実行できない機能があるため，開発環境のTestCafeでもhttpsを使うことにしました．そのためにTestCafeの--sslを利用します．

Command Line Interface | TestCafe

TestCafeは，Node.js HTTPS serverを利用してsslが利用可能なようにProxyを自動で設定してくれるようなので，開発者は，オレオレ証明書を作成し，ファイルのパスをNode.js HTTPS serverに指定するだけでよいみたいです．

環境

  • macOS 10.15.5
  • LibreSSL 2.8.3 (macOSにはデフォルトでLibreSSLがインストールされています．)
  • TestCafe 1.8.4

オレオレ証明書の作成

秘密鍵を作成します．

openssl genrsa 2048 > testcafe_private.key

証明書署名要求(CSR)を作成します．

openssl req -new -key testcafe_private.key > testcafe.csr

上記2つから証明書を作成します．

openssl x509 -days 1000 -req -signkey testcafe_private.key < testcafe.csr > testcafe.crt

これらをpfxファイルに結合します．pfxファイルは上記の情報を1つのファイルに集約できるので，便利です．

openssl pkcs12 -export -inkey testcafe_private.key -in testcafe.crt -out testcafe.pfx

TestCafeの設定

tls.createSecureContext([options])に渡す引数を指定するので，以下のドキュメントを参考にします．

TLS (SSL) | Node.js v14.4.0 Documentation

多くの場合はpfxファイルを指定するだけでよいので，TestCafeの起動コマンドは以下のようになります．

testcafe remote *.spec.js --qr-code --ssl pfx=/User/xxx/.ssh/testcafe.pfx;

Error: not enough data

このときにpfxのパスは絶対パスを指定した方がよさそうです．macOSで~/.ssh/testcafe.pfxと表現したところ，ユーザーホームディレクトリは展開されないようで，

ERROR Error: not enough data
    at Object.createSecureContext (_tls_common.js:276:19)
    at Server.setSecureContext (_tls_wrap.js:1155:27)
    at Server (_tls_wrap.js:1033:8)
    at new Server (https.js:65:14)
    at Object.createServer (https.js:89:10)
...

というエラーが表示されました．「データが足りない」とはどういうことなのか分からなかったので，node.jsのソースコードを見てみたところ，node.jsはパスを展開していないことに気づきました．

node/_tls_common.js at e405e82f74babb75600f8f1d94055885968d5701 · nodejs/node · GitHub

仕方がないので，絶対パスを指定して，問題を解決しました．

TestCafeでApplePayを実行

初回の場合は，Safariがオレオレ証明書を受け入れてよいのか厳重に質問してくるので，以下のように証明書を受け入れます．

f:id:atsuhiro-me:20200625154040p:plain

f:id:atsuhiro-me:20200625154112p:plain

f:id:atsuhiro-me:20200625154146p:plain

TestCafeでe2e testを実行します．

testcafe remote *.spec.js --qr-code --ssl pfx=/User/xxx/.ssh/testcafe.pfx;

 Running tests in:
 - Safari 13.1.1 / macOS 10.15.5

 payment
   ✓ ApplePay Checkout 
 1 passed (48s)

うまくe2eが動作しました．

まとめ

世の中ではSeleniumが優勢ですが，ブラウザー毎にバージョンが一致するドライバーが必要なため不便です．また，モバイルデバイスでe2e testを行うのが大変です．TestCafeは，testcafe-hammerheadという偉大なProxyを発明しているので，モバイルデバイス含めて多くのデバイスで動作するe2e testが簡単に作成でき，便利です．徐々にTestCafeが優勢になっていくのではないかと期待しています．