e2e - kocya-dev/note GitHub Wiki

• Playwrightのレポート機能を調べてみた
• Cypress vs Selenium vs Playwright vs Puppeteer speed comparison
• テストツールトレンド2022
• E2E 自動テストの布教に立ち塞がる5つの壁と打ち込んだ楔
• E2Eテスト自動化変遷 〜ノーコードからCypress、そしてPlaywrightへ〜
• SafeTest

Playright

• data-testidはいつ使うべきか？そもそも使うべきなのか？
• Playwright を使用した E2E テスト (feat. Cypress)
• E2E テストの決定版！ テスト開発の効率が爆上がりする Playwright (TypeScript版)
• PlaywrightによるHTML要素の指定
• idやclassを使ってテストを書くのは、もはやアンチパターンである

Cypress

• CypressからPlaywrightに移行しました
• CypressはPlaywrightに負けてない
• Cypressまとめてみた～概要&推しポイント・導入方法・デメリットまで! 特盛版～
• Cypress で Vue 3 コンポーネントを楽々テストしちゃおう
• Cypressのカスタムコマンドを用いたVue.jsの効率的なE2Eテスト実装
• Cypress で html テストレポート (mochawesome) を出力する
• Cypressテストレポート出力でハマった件
• Cypressを使ったE2EテストをGithubActionsで回して結果をHTMLレポートでまとめる

reporter

setup

npm i mochawesome -D
npm i mochawesome-merge -D

cypress.config.js

{
  "reporter": "mochawesome",
  "reporterOptions": {
    "overwrite": false,
    "html": false,
    "json": true
  }
}

run

npx cypress run # mochawesome-report以下に生成
npx mochawesome-merge | Out-File -Encoding Default mochawesome.json # winで実行する場合UTF16になるのでエンコードをUTF-8にする
npx mochawesome-report-generator mochawesome.json