ちびでべろっぱぁ〜ず #11

## Cypress for CircleCI 俺の話を聞け！！LT大会 #11 清家史郎(@seike460)

###### Who? Fusic Co., Ltd.  清家史郎  @seike460    

### tech - Program Language - PHP - Go - Elixir - infrastructure - Server - infrastructure as code - Network - Serverless(AWS)

### products ##### Go - s3ry (s3 prompt cli) - https://github.com/seike460/s3ry - utakata (Serverless Slack Notificatier) - https://github.com/seike460/utakata

### Community - PHP - fukuoka.php - Go - fukuoka.go - Elixir - fukuoka.ex

### Organizer - Serverless Meetup Fukuoka

### Agenda - Cypress? <!-- .element: class="fragment" --> - Install <!-- .element: class="fragment" --> - CircleCI <!-- .element: class="fragment" --> - まとめ <!-- .element: class="fragment" -->

### VEGA_TECHにて… [jest-puppeteerで e2eテストをやったら こうなった](https://speakerdeck.com/tyankatsu/jest-puppeteerde-e2etesutowoyatutara-kounatuta)  <!-- .element: class="fragment" --> - Cypressええよ！ <!-- .element: class="fragment" -->  <!-- .element: class="fragment" --> - Cypressええやん！ <!-- .element: class="fragment" -->

### Cypress? - node製のE2Eテストモジュール <!-- .element: class="fragment" --> - 基本無料 <!-- .element: class="fragment" --> - 動画が撮れたり多機能 <!-- .element: class="fragment" -->

### Install ``` $ yarn add cypress --dev ``` ### open ``` $ ./node_modules/.bin/cypress open ```

### 環境できちゃった 

### Test 清家史郎がFusicのスタッフ紹介から削除されてないかテスト `cypress/integration/fusic/seike460_fusic.co.jp.js` ``` describe('清家史郎削除されてない？', function() { it('Visit Fusic', function() { cy.visit('https://fusic.co.jp/') cy.get('.staff_box') ┆ .click() cy.contains("清家 史郎") }) }) ```

./node_modules/.bin/cypress run -s cypress/integration/fusic/seike460_fusic.co.jp.js ``` seike460% ./node_modules/.bin/cypress run -s cypress/integration/fusic/seike460_fusic.co.jp.js ==================================================================================================== (Run Starting) ┌────────────────────────────────────────────────────────────────────────────────────────────────┐ │ Cypress: 3.1.0 │ │ Browser: Electron 59 (headless) │ │ Specs: 1 found (fusic/seike460_fusic.co.jp.js) │ │ Searched: cypress/integration/fusic/seike460_fusic.co.jp.js │ └────────────────────────────────────────────────────────────────────────────────────────────────┘ ──────────────────────────────────────────────────────────────────────────────────────────────────── Running: fusic/seike460_fusic.co.jp.js... (1 of 1) ```

``` 清家史郎削除されてない？ ✓ Visit Fusic (2573ms) 1 passing (5s) (Results) ┌─────────────────────────────────────────────┐ │ Tests: 1 │ │ Passing: 1 │ │ Failing: 0 │ │ Pending: 0 │ │ Skipped: 0 │ │ Screenshots: 0 │ │ Video: true │ │ Duration: 4 seconds │ │ Spec Ran: fusic/seike460_fusic.co.jp.js │ └─────────────────────────────────────────────┘ (Video) - Started processing: Compressing to 32 CRF - Finished processing: /Users/seike460/src/github.com/seike460/Cypress-demo/cypress/videos/fusic/seike460_fusic.co.jp.js.mp4 (0 seconds) ==================================================================================================== (Run Finished) Spec Tests Passing Failing Pending Skipped ┌────────────────────────────────────────────────────────────────────────────────────────────────┐ │ ✔ fusic/seike460_fusic.co.jp.js 00:04 1 1 - - - │ └────────────────────────────────────────────────────────────────────────────────────────────────┘ All specs passed! 00:04 1 1 - - - ```

いつひっそり削除されるかわからない… CIでチェックしたい

### CircleCI

### Demo https://github.com/seike460/Cypress-demo

``` .circleci/config.yml ``` ``` version: 2 jobs: build: docker: - image: cypress/base:8 environment: TERM: xterm working_directory: ~/app parallelism: 1 steps: - checkout - run: yarn install - run: ./node_modules/.bin/cypress run -s cypress/integration/fusic/seike460_fusic.co.jp.js ```


#### 纏め - Cypress 環境作るの楽だし機能も多い！(チャンカツさんありがとう！) - CircleCIの設定も簡単なので、気軽にCI導入出来る - E2Eテストをやってみたい！って人にオススメ

Thank you! Fusicは技術が大好きなエンジニアを募集しています  https://fusic.github.io/