Cypressを使ってみる
はじめに
E2Eツールをどんどん使ってみる月間なのでこちらを挑戦しました。
ボスに触ってみるならコレだと教わったので触ってみる。
下書きのまま放置されてたので公開。
インストール
$ mkdir cypress-test $ npm install cypress --save-dev $ ./node_module/.bin/cypress open
ウィンドウが立ち上がるとホームディレクトリにいろいろ追加してくれるので試しにexample_spec.js
を走らせるとテンションが上がる。
sampleにはいろいろ書いてあるので触り方を学ぶにはちょうどいいかも!
ディレクトリ構成
. ├── fixtures ├── integration //ココにテストを書く ├── plugins ├── screenshots └── support
テストを書こう!
$ cd integration $ touch simple_spec.js
simple_spec.js
describe('My First Test', function() { it("Search riririusei99", function() { cy.visit('http://teamspirit.hatenablog.com/') cy.get('input[type=text]').type('riririusei99') cy.get('input[type=submit]').click() // Waits for the title to be 'riririusei99'. cy.title().should('include', 'riririusei99') cy.title().should('eq', 'riririusei99 の検索結果 - TeamSpirit Developer Blog') }) })
画面
simple_spec.js
CLIで実行してみる
$ ./node_modules/.bin/cypress run (Tests Starting) My First Test ✓ clicking 'type' navigates to a new url (8625ms) 1 passing (10s) (Tests Finished) - Tests: 1 - Passes: 1 - Failures: 0 - Pending: 0 - Duration: 9 seconds - Screenshots: 0 - Video Recorded: true - Cypress Version: 1.4.1
CLIで実行するとvideos
ディレクトリが作られmp4ファイルを出力してくれる
さっくりまとめ
すぐにインストールできてすぐに動く、しかもCLIでも動くのは結構便利(自動化しやすい)
いろいろ拡張したくなる(ブラウザ変えたい、テストフレームワーク変えたい)のにはどう対応していくのかな
小さなコンテンツに対してChromeだけで保証するような場合とかにはものすごく便利だと思いました。
おわり
riririusei99
TestCafeを使ってみる
はじめに
使ったこと無いE2Eフレームワークを触ってみる月間第四弾
あきらかにテストしてくれそうなこちらです。
インストール
$ npm install --save-dev testcafe
ディレクトリ構成
$ tree -L 1 . ├── node_modules ├── package-lock.json ├── package.json └── simple_spec.js
テストを書く
simple_spec.js
import { Selector } from 'testcafe'; fixture `My First Test` .page `http://teamspirit.hatenablog.com/`; test('Search riririusei99', async t => { await t .typeText('input[type=text', 'riririusei99') .click('input[type=submit]'); const title = await t.eval(() => document.title); await t.expect(title).eql('riririusei99 の検索結果 - TeamSpirit Developer Blog'); });
テスト実行
$ ./node_modules/testcafe/bin/testcafe-with-v8-flag-filter.js chrome simple_spec.js Running tests in: My First Test ✓ Search riririusei99 1 passed (12s)
今回使ってみての感想
触ってみて5分もたたずに動きました。ほぼ設定いじってない状態で動いたので導入が簡単。
async/awaitを使ってテストコードをかけるようになりましたので、フロントのエンジニアは抵抗なく書けるのかな。
一通り触り終わったら使い込んでみたくなりました。
今回触ったもの
cinnamonjsを使ってみる
はじめに
触ったこと無いE2Eフレームワークを触ってみる月間第三弾。
今回はちょっと変わり種のコチラ
リーダーに紹介頂いたのですが、なかなかマニアックそうなのを教えてくれましたね…。
諦めず頑張ります。
インストール
$ npm install --save-dev cinnamonjs $ npm install --save-dev selenium-webdriver ## ダウンロードしてきたfirefoxドライバの配置(geckodriver) $ mv ~/Downloads/geckodriver-v0.19.1-macos.tar.gz ~/Repository/cinnamojs-test $ tar -zxvf geckodriver-v0.19.1-macos.tar.gz
テストを書く
simple_spec.js
module.exports = [ {action: "start"}, {action: "browser.set.size", width: 1024, height: 768}, {action: "browse", url: "http://teamspirit.hatenablog.com/"}, {action: "send.keys", locator: {css: "input[type=text]"}, keys: "riririusei99"}, {action: "click", locator: {css: "input[type=submit]"}}, {action: "wait.title", "page.title": "riririusei99 の検索結果 - TeamSpirit Developer Blog"} ];
ディレクトリ構成
. ├── geckodriver ├── node_modules ├── output ├── package-lock.json ├── package.json └── specs └── simple_spec.js
- outputのディレクトリにレポートファイルが入る
テスト実行
$ ./node_modules/cinnamonjs/cli.js ./specs/simple_spec.js
使ってみた感想
テストを実行するとレポートを出力し、テストにかかった時間や、アクション毎にスクリーンショットも撮って確認できる。
json形式でテストを書くのでひとつひとつの操作に意味を手動のテストケースと紐付けながらかけたりも出来るかも。
昔、聞いた自動テストコードの生成システムはExcelでテストケースを書いたらコードになるって言ってたので、こういう形式なら出来るかもしれないと思いました。
テストレポートのキャプチャ
今回触ったもの
おわり
riririusei99
nightmare.jsを使ってみる
はじめに
使ったことないE2Eフレームワークを使ってみる月間、第2弾。 nightmareという名前のため触らずにはいられなかった。
http://www.nightmarejs.org/www.nightmarejs.org
インストール
$ npm install --save-dev mocha $ npm install --save-dev nightmare $ npm install --save-dev power-assert $ mkdir test $ touch test/simpe_spec.js
テストを書く
test/simple_spec.js
const Nightmare = require('nightmare') const assert = require('power-assert') describe('Load a Page', function() { this.timeout('20s') let nightmare = null beforeEach(() => { nightmare = new Nightmare() }) describe('My First Test', () => { it('Search riririusei99', done => { nightmare.goto('http://teamspirit.hatenablog.com/') .type('input[type=text]', 'riririusei99') .click('input[type=submit]') .evaluate(() => { return document.title; }) .end() .then((title) => { assert.ok(title === 'riririusei99 の検索結果 - TeamSpirit Developer Blog'); done(); }) .catch(done) }) }) })
テストコマンドを追加
package.jsonに下記を追加
"scripts": { "test": "mocha" },
テスト実行
$ npm test > nightmare-test@1.0.0 test /Users/username/Repository/nightmare-test > mocha Load a Page My First Test ✓ Search riririusei99 (6500ms) 1 passing (7s)
使ってみた感想
- アサーションを複数入れようとしたらテストコードがいろいろ複雑になってしまったので断念
- specファイル一個で動いているので設定をいじるとさらにスッキリするかも
- Electronが裏で動いているので、Electronを使ったアプリのテストに採用されるのかも
- ヘッドレスブラウザが裏で動くので簡単なツールの自動化には良いのかも
- テストコードの書き方に前回と違いが出たので良かった
今回触ったもの
protractorを使ってみる
はじめに
使ったことないE2Eフレームワークを色々試すの巻。 Angularでないプロダクトでも使えるらしいの挑戦。
Protractor - end-to-end testing for AngularJS
触ってみたメモ
# Global Install $ npm install -g protractor $ protractor --version $ webdriver-manager version # ProtractorのSetupにはUpdateをしろって書いてあるので試しにやってみる $ webdriver-manager update # SleniumServerの起動しておく $ webdriver-manager start
conf.js
exports.config = { // こう書いておくとangular以外でも使用できる onPrepare: function () { browser.ignoreSynchronization = true; }, seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['specs/*'] };
spec.js
describe('My First Test', function() { it('Search riririusei99', function() { browser.get('http://teamspirit.hatenablog.com/'); element(by.css('input[type=text')).sendKeys('riririusei99'); element(by.css('input[type=submit]')).click(); // Waits for the title to be 'riririusei99'. var EC = protractor.ExpectedConditions; browser.wait(EC.titleContains('riririusei99'), 5000); expect(browser.getTitle()).toEqual('riririusei99 の検索結果 - TeamSpirit Developer Blog'); }); });
テスト実行
protractor conf.js
使ってみた感想
- webdrive-managerが入っているのでドライバの管理が簡単そうに見える
- 設定が色々できるので拡張性高そう(ブラウザ変えたり、テストフレームワーク変えたり…)
今回触ったもの
nodebrewの使い方メモ
リポジトリ毎にnode.jsのバージョンを使い分ける必要が出てきたので個人的な備忘録
# localにインストールされてるリストを確認 $ nodebrew ls # リモートにあるバージョンの一覧を取得(LTSが何かまでは見れないので別途確認) $ nodebrew ls-remote # Installしてバージョン確認(2018/01/10ではv8.9.4) $ nodebrew install-binary v8.9.4 $ nodebrew use v8.9.4 use v8.9.4 $ node -v v8.9.4 # デフォルトで使われる設定 $ nodebrew alias default {version}