t-wadaさんの開発生産性の観点から考える自動テストを聴講して悔い改めたこと - shoudaiの日記
t-wadaさんのセッションを聴講したこと 2024/6/29に開発生産性カンファレンスに参加してきました。 その中でなんでもかんでもE2Eテストでも実行してしまうことがあるけど、 悪ではないけどデメリットもあるよ。って話がありました。 speakerdeck.com スライドP47のアイスクリームコーンとピラミッドの図だけはご参照ください。 頭の中にその図が残っているため、前提になってます。 セッションの概要 アジェンダからざっくりお話は 信頼性の高い 誤検知（テストとして正常であるはずがエラーになってしまう）や見逃し（エラーがあっても正常にしてしまう）がないこと 実行結果 実行結果値だしたり、エラー原因が特定しやすいテストを書くこと 短い時間で到達 確認したい観点を確認できる最小のテストスコープ（単体テスト、結合テストなどの粒度）でテストできるようにすること 状態に保つ 短い時間で到達
こんにちは、JX通信社でシニアエンジニアをしているSirosuzumeです。 JX通信社の「FASTALERT」には、ユーザーが事前に設定した地域で発生した災害情報を、メールで受信する機能があります。 しかしテストする手順も複雑で、配信条件も多様化していったこともあって、手動でのテストを行うことに限界を感じていました。 設定画面の挙動確認など、ブラウザ上で完結するテストであればPlaywrightを使って自動化することもできていたのですが、実際にメールを受信するところのテストを自動化する方法についてのノウハウ不足が課題でした。 そこで、Amazon SESの機能を改めて確認していたところ、特定のメールアドレスで受信したメールをS3に保存する機能があることを知り、E2Eテスト内からS3にアクセスすることでメールの受信テストまで自動化でカバーできるのではないか、と考えたことが、今回のチャレンジ
この本の概要 E2Eテスト（End-to-End Testing）とは，システムの端から端（End-to-End）まで，全体を通して行うソフトウェアテストを指します。本書ではE2Eテストを「ユーザーの視点でWebシステムの動作を確認する自動テスト」として定義し，E2Eテストをこれからプロジェクトに導入しようとしている人，すでに導入しているがパフォーマンスや保守性で課題を感じている人を対象に，E2Eテストのフレームワークとして近年人気が急上昇しているPlaywrightをツールとして，その目的からモダンなノウハウまで，E2Eテスト初心者の方にもわかりやすくハンズオンを交えながら解説します。CIへ組み込む方法やユニットテストとの棲み分けなど，E2Eテストを実際の開発現場に投入するうえでの知見も数多く紹介します。 こんな方におすすめ E2Eテストをこれからプロジェクトに導入しようとしている人 す
メルカリ ハロ Webフロントエンドの開発スピードと品質両立の取り組み | メルカリエンジニアリング
こんにちは。メルカリのSoftware Engineerの@tanashoです。連載：Mercari Hallo, world! -メルカリ ハロ 開発の裏側-の6回目を担当させていただきます。 メルカリ ハロのWebアプリケーションは複数存在し、Webフロントエンドチームが横断的に開発をしています。本記事では、その前提を踏まえ、スピードと品質をどのように両立させて開発しているかを紹介します。 プロジェクトの概要とWebフロントエンドの担当領域 メルカリ ハロは「あたらしい出会いを繋ぎ、信頼と機会をひろげる」がミッションで、いますぐ働き手が欲しいパートナー (事業者) と、いますぐ働きたいクルー(働き手)を繋げるサービスです。クルーは自身のスキルや時間を活用して働くことができます。 メルカリ ハロは複数のアプリケーションが存在し、そのなかでWebフロントエンドが関わる領域として以下の3つが
「State of JavaScript 2023」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、2万3500人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者2万3540人が回答したアンケートの結果をまとめた「State of JavaScript 2023」が公開されました。 回答者の国別分布を見ると米国が16％、フランスが7％、ドイツも7％、イギリス（UK）が5％、ポーランドが4％、ロシアが3％、カナダが3％などで、日本は2％（回答者280人）でした。 ここでは発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンドフレームワークはReactが1位、2位にVue.js フロントエンドフレームワークの利用率ランキングはReactで、2位以下を引き離して8年連続1位、しかも利用率を伸ばしています。2位にはAngularを抜いてVue.jsが初めて入り、3位は昨年よりランクも利用率も落としたAngularとなりました
先日（2024年6月19日）、技術評論社さまから「［入門］Webフロントエンド E2E テスト ――PlaywrightによるWebアプリの自動テストから良いテストの書き方まで」をフューチャーの有志と共に出版いたしました。 本書はエンジニア選書と言われるシリーズの1つとなります。 既にご購入いただいた方、誠にありがとうございます。 購入を検討されている方、詳しくはこちらをご覧ください。 https://gihyo.jp/book/2024/978-4-297-14220-9 書籍の概要E2Eテストをこれから導入しようとしている方を主な対象とし、必要なノウハウを詰め込んだ書籍となっています。本書では、E2Eテストを学ぶ際の実装手段（ツール）として、近年人気が急上昇しているPlaywrightを中心に据えました。 章の構成は次のようになっています。 第1章 Playwrightハンズオン第2章
「rabbit r1」はカメラや音声入出力機能を搭載したAIデバイスで、「食事の配達依頼」「メールの送信」「音楽再生」など多様な操作をAI処理でこなせるとアピールされています。しかし、rabbit r1を実際に入手した詐欺撲滅系YouTuberのCoffeezilla氏は、rabbit r1が詐欺的商品であると非難しています。 $30,000,000 AI Is Hiding a Scam - YouTube rabbit r1の見た目はこんな感じ。ディスプレイと前方後方両対応カメラと操作ホイールを搭載したシンプルな外観が特徴です。 rabbit r1の発表時にはAIを用いて「会話しながらメニューを決めて食品配達サービスに注文」「好みの音楽を伝えて再生」といった操作が可能なことがアピールされていました。 しかし、rabbit r1を実際に入手したユーザーからは「AIの応答の品質が低い」「配
JSer.info #695 - Vitest v2.0.0-beta.5がリリースされました。 Release v2.0.0-beta.5 · vitest-dev/vitest --merge-reportsがカバレッジをサポート、Promiseベースのmockに対するAssertionの追加、ブラウザモードの改善などが含まれています。 VitestのBrowser Modeは、jsdomやhappy-domを置き換える形で、コンポーネントテストのための仕組みとして作られています。 開発中のVitest 2.0ではCommands APIとmodule mockingが追加されています。 次のIssueに、VitestのBrowser Modeの目的や方向性についての解説が書かれています。 Vitest Browser Mode · vitest-dev/vitest · Discus
真に効果的なテスト自動化を実現するために。 フレームワークに依存しない「普遍的なテクニック」を徹底解説！ 本書は、Webアプリケーションのテスト担当者や開発者が、自身のプロジェクトにスムーズに自動テストを導入し、自動テストに支えられた開発プロセスを実現できるようになる実践的なガイドブックです。主に下記に挙げるような内容を解説します。 ・自動テストに取り組むための心構えや考え方、マインドセット ・テスト全般や自動テストに関する基本的な知識 ・E2E自動テストの実践方法 ・自動テストや開発プロセスの改善方法 ・様々なトラブルシューティングの技術 「なぜ自動化が必要なのか？」という目的の理解に重きを置き、ただ自動化して終わりになるのではなく、自動テストを軸にしながらプロダクトを継続的に改善していくための考え方や技法を解説しています。 E2Eテストの実践方法の解説では、手を動かして学べるハンズオン
Vitest Browser Mode · vitest-dev/vitest · Discussion #5828
It's been some time since we gave any update on the Browser Mode, and Vitest 2.0 seems like a good time to explain how we feel about it. And we have a lot of plans! The initial purpose of Vitest was to allow running tests without a complex Jest setup but with the battle-tested Jest API everyone is already familiar with. This also meant faking the browser environment (with jsdom or happy-dom). With
JSer.info #698 - ECMAScript 2024が正式にリリースされました。 Release ES2024 Candidate February 28th 2024 · tc39/ecma262 ES2024では、Object.groupBy/Map.groupBy、Promise.withResolvers、ArrayBuffers.prototype.resize、Atomics.waitAsyncなどが追加されています。 次の記事でも詳しく解説されています。 Ecma International approves ECMAScript 2024: What’s new? Playwright v1.45.0がリリースされました。 Release v1.45.0 · microsoft/playwright 時間を操作できるClock APIの追加、--fail-on-
ユーザーインターフェース（UI）テストなどの自動化ツールを提供するAutifyは2024年6月20日、テストケースの自動生成ツール「Autify Genesis」のベータ版の提供を同日付で始めたと発表した。テストの自動化ツールに生成AI（人工知能）技術を取り込むことで、自動化の潮流をこれまで対象としていたテストの実施工程にとどまらず、上流工程にも「遡上」させたい考えだ。 仕様書や設計書からAIがテストケースを生成 「何をテストすればよいか、自動化すればよいか分かっていれば、Autify（の既存ツール）ですぐに自動化できる。だが、実際には何をテストしたらよいか、それをどう自動化すればよいか分からないなど、上流工程に根本の問題があるケースも多い。生成AIによる仕様書の解析でそこを解決しようというのが当社のアプローチだ」――。 Autifyの近澤良代表取締役CEO（最高経営責任者）はこう語る。A
iOSのSafari、AndroidのChromeはそれぞれPCと連携してウェブアプリケーションをデバッグできます。 PCのSafariのWeb Inspector、ChromeのDevToolsと連携すれば、コンソールログやネットワーク、デバッガーなども利用できます。 スマホと繋いでWebサイトをデバッグする方法をまとめたページが見つけられなかったので、メモです。 ネットワークで繋いでデバッグもできたりするので、結構便利です。 Mobile Safari on iOS iOSのSafariは、macOSのSafariと接続してログやネットワークの通信などを見るデバッグが可能です ドキュメント: Inspecting iOS and iPadOS | Apple Developer Documentation iOSのSafariとmacOSのSafariを接続する 初回は次の設定が必要で
Playwright でタイマーモックが使えるようになる
どうもこんにちは、@nzws です。（ちょうど気になったネタを見つけたので Zenn 初投稿です） 今回は記事執筆時点で次バージョンの Playwright v1.45 で追加される予定である Clock API についてお試ししたことを書いていきます。 背景 背景について簡単に説明すると、タイマーモックは自動テスト内で時間を操り、コード内で時間に依存するような機能を上手く短時間でテストさせるための機能です。 ユニットテストフレームワークの Jest[1] や Vitest[2] は標準機能としてタイマーモックが提供されていますが、E2E テストフレームワークの Playwright ではタイマーモックが今まで標準機能としては提供されていませんでした。[3] 余談ですが前述の Jest や Vitest だと setTimeout/setInterval みたいなものは標準機能でモックされ
JSer.info #696 - Storybook 8.1がリリースされました。 Storybook 8.1 Storyファイルを作成するUIの追加、Subpath importsを使ったモックの対応、Playwright Component Testの対応しています。 pacakge.jsonのimportsフィールドで特定のモジュールを条件分岐して読み分けるための仕組みであるSubpath importsについては、次の記事でも解説されています。 Type-safe module mocking in Storybook Mocking modules • Storybook docs その他には、React 19/Angular 18のサポートなども含まれています。 Turborepo 2.0がリリースされました。 Turborepo 2.0 Turborepoはmonorepo向
週刊Railsウォッチ: Ruby on Jets 6.0がRailsをサポートほか（20240620後編）｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やX.comでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Rails: 先週の改修（Rails公式ニュースより） 公式更新情報: Ruby on Rails — Better error message, opt-i
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Playwrightでメール配信のテスト自動化にチャレンジ！ - JX通信社エンジニアブログ
［入門］Webフロントエンド E2E テスト――PlaywrightによるWebアプリの自動テストから良いテストの書き方まで
［入門］Webフロントエンド E2E テスト を出版しました | フューチャー技術ブログ
AIデバイス「rabbit r1」を買ったら「その機能は準備中」を連発する詐欺的製品だっという報告
2024-06-03のJS: vitest v2.0.0-beta.5(browser mode)、Rspack v0.7、ESLint Migrator
テスト自動化実践ガイド 継続的にWebアプリケーションを改善するための知識と技法 | 翔泳社
2024-07-01のJS: ES2024、Playwright v1.45.0、e18e(Ecosystem Performance)
テスト自動化の潮流をケース作成に「遡上」、Autifyが作業半減うたう新ツール
モバイル端末でのウェブアプリのデバッグ方法、Safari on iOS/Chrome on Android
2024-06-13のJS: Storybook 8.1、Turborepo 2.0、Node v22.3.0(Snapshot Testing)