Upgrade to Pro — share decks privately, control downloads, hide ads and more …

E2E テスト入門

E2E テスト入門

Demo動画は後日追加します!

#Zli_DMM_LT

Tajima Sachiko

July 18, 2020
Tweet

More Decks by Tajima Sachiko

Other Decks in Programming

Transcript

  1. 1.自己紹介 ﹡ Sachiko Tajima ◦ twitter @schktjm ◦ github @schktjm

    ﹡ 会津大学 B4 DB研(AOJ) ﹡ フロントエンド / デザイン ﹡ AtCoder 緑 2
  2. Webフロントエンドにおける種類 ﹡ WebDriver 系 ◦ Selenium (Geb, Selenium WebDriver with

    Concordion), WebdriverIO, Nightwatch.js, Testium, Protractor ﹡ (ヘッドレス) ブラウザ自動化系 ◦ Puppeteer, jsdom, Nightmare ﹡ (ヘッドレス) ブラウザ自動化 + テスト系 ◦ Cypress.io, TestCafe, Intern ﹡ Chrome 拡張 ◦ Ghost Inspector 10 E2E テスト自動化ツールをざっと調べたまとめ-Qiita ﹡ 調べたところ一番有名 ﹡ フロントエンドの非同期 処理やSPAには不向き
  3. Webフロントエンドにおける種類 ﹡ WebDriver 系 ◦ Selenium (Geb, Selenium WebDriver with

    Concordion), WebdriverIO, Nightwatch.js, Testium, Protractor ﹡ (ヘッドレス) ブラウザ自動化系 ◦ Puppeteer, jsdom, Nightmare ﹡ (ヘッドレス) ブラウザ自動化 + テスト系 ◦ Cypress.io, TestCafe, Intern ﹡ Chrome 拡張 ◦ Ghost Inspector 11 E2E テスト自動化ツールをざっと調べたまとめ-Qiita ﹡ ヘッドレスでChromeや Chromiumを操作できる ﹡ SPAのe2eのテストツー ルとして有名 ﹡ テストをするならテスト ツールを導入する必要が ある
  4. Webフロントエンドにおける種類 ﹡ WebDriver 系 ◦ Selenium (Geb, Selenium WebDriver with

    Concordion), WebdriverIO, Nightwatch.js, Testium, Protractor ﹡ (ヘッドレス) ブラウザ自動化系 ◦ Puppeteer, jsdom, Nightmare ﹡ (ヘッドレス) ブラウザ自動化 + テスト系 ◦ Cypress.io, TestCafe, Intern ﹡ Chrome 拡張 ◦ Ghost Inspector 12 E2E テスト自動化ツールをざっと調べたまとめ-Qiita ﹡ テストツールを導入す る必要がない ﹡ 最近ブームっぽい ﹡ ドキュメントが親切で 良かった
  5.  todos_spec.ts 16 describe(“The todos”, function(){ it("Assertion Text", () => {

    const typeText = "texttexttext" cy.visit("/todos") .get("#text-field") .type(typeText) .should("have.value", typeText) }) ... })
  6. cypress.json 17 { “baseUrl”: “http://localhost:3000” } baseUrl を設定しない場合テスト実行時に localhost+ランダムなポート番号でブラウザを開 き、テスト内部の

    cy.visit() に当たってから指定されたURLに切り替えるため、テスト開 始時にフラッシュやリロードが入る。
  7. ﹡ Canary ﹡ Chrome ﹡ Chromium ﹡ Edge ﹡ Edge

    Beta ﹡ Edge Canary 22 Browsers対応すごい ﹡ Edge Dev ﹡ Electron ﹡ Firefox (Beta support) ﹡ Firefox Developer Edition (Beta support) ﹡ Firefox Nightly (Beta support) https://docs.cypress.io/guides/guides/launching-browsers.html#Browsers