調べるブログ

Apple製品(Mac/iPhone/iPad)、IT、仮想通貨など自分が調べた様々なことを記事にしています。

Web UIの自動テストツール「Cypress」をWindows10で動かす

当ブログへのご来訪、誠にありがとうございます。



Cypressを使う

Web UI 自動テストツール「Cypress」に関心を持ったので使ってみることにした。

www.cypress.io

 

Cypressの特徴

主に以下の特徴がある。

  • オープンソースで無料(一部機能は有料らしい)
  • Google Chromeのみ対応
  • JavaScriptでテストケースを記述する
  • テスト目的に特化

同種のテストツールとしては「Selenium」があるが、環境構築とメンテが大変なようだ。(SeleniumはWebドライバを介して複数種のWebブラウザを使えるとはいえ、メンテに手間がかかるようだと面倒)

 

環境構築

以下はWindows10にGitをインストールし、Node.jsを使えるようにした上でCypressを起動するところまで持っていった環境構築メモである。

 

Node.jsおよびnpmのインストールは以下の書籍を参考にした。

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

 

なお、コマンドライン操作はGitBash上で行っている。

 

Cypressをインストールする 

Cドライブ直下に"Cypress"ディレクトリを作成してディレクトリを移動する(ディレクトリ名は任意)

c:\Cypressで以下のコマンドを実行する
$ npm install --save-dev cypress

$ cd  ./node_modules/.bin

$./cypress open

しかし起動後、以下のエラーメッセージが表示されてしまう

Can't start server
EEXIST: file already exists, mkdir 'C:\Cypress\node_modules\.bin\cypress'


Cypressをインストールしたディレクトリに"package.json"があるのでファイルの内容をすべて削除して以下を記述する

{
	"scripts":{
		"cypress:open": "cypress open"
	}
}

セーブして以下c:\Cypressディレクトリで以下のコマンドを実行する
$ npm run cypress:open
(または$ ./node_modules/.bin/cypress open)
これでCypressが起動した。

 

試しに動かしてみる

起動してOKボタンを押すと「examples」が表示されているので試しにリスト中のどれか一つをクリックする。すると記述してあるテストコードの内容に従い、Chromeが起動してテストが自動実行される。

f:id:Loxley:20180725115838j:plain

 

設定すれば実行結果の記録もできるようだ。

f:id:Loxley:20180725115442j:plain

 

テストケースはJavaScriptで記述

CypressのテストケースはJavaScriptで記述するようだ。筆者はProgateでJavaScriptを勉強したので試しにテストケースを書いてみることにする。何事も本を読んでいるだけでは身につかない。実践することが重要だ。

loxley-tips.hatenablog.jp

 

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

  • 作者: Ethan Brown,武舎広幸,武舎るみ
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2017/01/20
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
 

 


  • 当ブログは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
  • 当ブログ記事の2ch系まとめサイトへの無断転載を禁じます。
  • 投稿した記事内容は私的なものであり、所属する組織・団体に関連性はありません。
  • 投資にはリスクが伴います。利益を得る反面、損失もありえます。投資活動は自己責任で。

(C)LOXLEY-TIPS