はじめに Playwright を使うことで比較的簡単に E2E テストを実装することができます。しかし、通常テストコードは実装したら終わりということではなく、継続的にメンテナンス（保守）が必要になります。その際に保守しやすいように実装するため、Playwright の公式ドキュメントに記載されているベストプラクティスの中で参考になりそうな部分を確認しておこうと思います。 テストの独立性を高める 可能な限りテスト間の依存が無いようにして、テストを分離すると良いというプラクティスです。各テストが独立していることで、 １つのテストが失敗しても他のテストに影響しない テストの順序を考慮する必要がない テストをシンプルに保つことができる あたりのメリットがあるかと思います。また、特定の処理（例えば特定の URL に遷移する処理）の繰り返し実装するのを避けるために before and after
t-wadaさんの開発生産性の観点から考える自動テストを聴講して悔い改めたこと - shoudaiの日記
t-wadaさんのセッションを聴講したこと 2024/6/29に開発生産性カンファレンスに参加してきました。 その中でなんでもかんでもE2Eテストでも実行してしまうことがあるけど、 悪ではないけどデメリットもあるよ。って話がありました。 speakerdeck.com スライドP47のアイスクリームコーンとピラミッドの図だけはご参照ください。 頭の中にその図が残っているため、前提になってます。 セッションの概要 アジェンダからざっくりお話は 信頼性の高い 誤検知（テストとして正常であるはずがエラーになってしまう）や見逃し（エラーがあっても正常にしてしまう）がないこと 実行結果 実行結果値だしたり、エラー原因が特定しやすいテストを書くこと 短い時間で到達 確認したい観点を確認できる最小のテストスコープ（単体テスト、結合テストなどの粒度）でテストできるようにすること 状態に保つ 短い時間で到達
こんにちは、JX通信社でシニアエンジニアをしているSirosuzumeです。 JX通信社の「FASTALERT」には、ユーザーが事前に設定した地域で発生した災害情報を、メールで受信する機能があります。 しかしテストする手順も複雑で、配信条件も多様化していったこともあって、手動でのテストを行うことに限界を感じていました。 設定画面の挙動確認など、ブラウザ上で完結するテストであればPlaywrightを使って自動化することもできていたのですが、実際にメールを受信するところのテストを自動化する方法についてのノウハウ不足が課題でした。 そこで、Amazon SESの機能を改めて確認していたところ、特定のメールアドレスで受信したメールをS3に保存する機能があることを知り、E2Eテスト内からS3にアクセスすることでメールの受信テストまで自動化でカバーできるのではないか、と考えたことが、今回のチャレンジ
Vitest Browser Modeがアツい
Background これまでVitestでコンポーネントのテストを行う時は、jsdom や happy-dom を使ってブラウザ環境を偽装していました。しかし、偽のブラウザ環境を使うことは多くの問題があり、また開発者はテスト以外でどこにも存在しない環境を作り上げるという不毛な作業が必要でした。 この問題を解決するために、Playwright や Cypress などのテストフレームワークは Component Test をサポートしています。しかし、UnitテストでPlaywrightやCypressを使うのは少々Fatであり、Reactのhooksなどのテストをすることができません。 Vitest Browser Modeを使用することで、Vitest上でComponent Testが可能となり、これらの問題を解決できます。 Installation Browser ModeのSetu
こんにちはChoimirai Companyのサンミンです。 0 はじめにDifyがLangChainと決別し、独自の「Model Runtime」を採用したのが2024年の1月。 LangFlowやFlowiseなど複合AIシステムではLangChainに依存した設計が多い。DifyもLangChainベースの設計だったけど今年の1月に独自の「Model Runtime」を発表👏↓。当時は難しい判断だったと思う。が、変化のスピードとDifyが描いてる世界観を考えると正解だった。Difyを勧めるもう一つの理由、です。 https://t.co/AybwXRXkJ9 pic.twitter.com/n7d9aae76N — sangmin.eth | Dify Ambassador (@gijigae) April 24, 2024 LangChainの導入を慎重に考えるべきだとする声は
はじめに こんにちは。カナリーでソフトウェアエンジニアをしている @yoshi-jr です。 私たちは 【もっといい「当たり前」をつくる】 をミッションに掲げている不動産テックカンパニーです。弊社では、現在下記のプロダクトを運用しています。 「Canary」: BtoC の部屋探しポータル（アプリ/Web） 「Canary Cloud」: BtoB SaaS（不動産の仲介会社様向けの顧客管理システム） この記事では、 CANARY のウェブ版（以降 CANARY Web）で利用している技術スタックをまとめています。 この記事を読んでわかること CANARY Web について技術スタックの全体像・概要が理解できる 話すこと CANARY Web のアーキテクチャ CANARY Web で利用しているモジュールとその歴史 話さないこと CANARY Web 視点以外でのアーキテクチャ 各モジュ
go-smtp-mockをSMTPのモックサーバにして単体テストする | フューチャー技術ブログ
はじめにTIG真野です。 バックエンドのアプリケーションの上で、メール送信するコードがある場合の単体テストをどう実現するか悩みました。 メールには、タイトル・本文・From・TO・CC・BCCなど複数の設定値がありますし、SMTPサーバの接続情報もあります。これらを表現する構造体のモデルだけに絞った検証に留めることは、気が進みませんでした。時代はインフラレベルでダミーサーバを動かしモックする方向で動いています。SMTPでメール送信し、その送信結果をテストコード上で取得＆検証する一連の流れを行って動作を確かめたいと思いました。 方法として、澁川さんのMailSlurperを使って6桁のコードの送信コードのテストをするで紹介されたMailSlurperを使うか迷いましたが、以下の点で牛刀だなと感じました。 メール送信するのはごく一部の機能（私の場合は1機能。今後増える見込みは現時点で見えなかっ
先日（2024年6月19日）、技術評論社さまから「［入門］Webフロントエンド E2E テスト ――PlaywrightによるWebアプリの自動テストから良いテストの書き方まで」をフューチャーの有志と共に出版いたしました。 本書はエンジニア選書と言われるシリーズの1つとなります。 既にご購入いただいた方、誠にありがとうございます。 購入を検討されている方、詳しくはこちらをご覧ください。 https://gihyo.jp/book/2024/978-4-297-14220-9 書籍の概要E2Eテストをこれから導入しようとしている方を主な対象とし、必要なノウハウを詰め込んだ書籍となっています。本書では、E2Eテストを学ぶ際の実装手段（ツール）として、近年人気が急上昇しているPlaywrightを中心に据えました。 章の構成は次のようになっています。 第1章 Playwrightハンズオン第2章
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を接続する 初回は次の設定が必要で
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-
PlaywrightのレポートをCloudflare PagesにデプロイしてGitHub IdPでアクセス制限する - *iroi*
導入 PlaywrightやReg SuitなどのVRT（Visual Regression Testing）の結果は、HTMLで出力されます。Playwright のヘルプ1 でもレポートをダウンロードして確認する方法が記載されていますが毎回行うのは面倒です。また、レポートをGitHub Pagesにデプロイする方法もありますが、アクセス制限にはEnterpriseプランが必要だったり、Pull Requestごとの結果を保存するのに手間がかかるなどの問題があります 2 3。Amazon S3にレポートを置く方法もアクセス制限が面倒なことが知られています。 そこでこのエントリでは、レポートをCloudflare Pagesにデプロイする方法を紹介します。Cloudflare PagesにはPreview deployments4があるため、Pull Requestごとのレポートをデプロイ
はてなブログ独自の集計による人気記事のランキング。6月23日（日）から6月29日（土）〔2024年6月第5週〕のトップ30です*1。 # タイトル／著者とブックマーク 1 グローバル企業で生き抜くための英会話フレーズ集 - fu3ak1's tech days by id:fu3ak1 2 早川書房の3000作品以上が最大50％割引の電子書籍セールがきたので、新作SF・ノンフィクションを中心にオススメを紹介する - 基本読書 by id:huyukiitoichi 3 パキスタンで、こんなアニメ映画がつくられたらしい…「THE GLASSWORKER」（広島の映画祭で８月上映？） - INVISIBLE Dojo. ーQUIET & COLORFUL PLACE- by id:gryphon 4 厳選80本！『Steamサマーセール』からベテランゲームブロガーが選ぶオススメはこれだ！ -
ちょっとしたウェブアクセスクライアントのコードを書いていて、サーバー側に正しくリクエストが送られているかの確認をする場合、モックサーバーを建てることが多いと思います。ウェブフロントエンド開発とかだとMock Service Workerが便利ですし、Playwrightのネットワークフック機能も便利です。GETだけならPythonでいつもやってしまうのですが、今回はPowerShellで作ったちょっとした自動化ツールかつエラーレスポンスを返したい、という状況だったので、Goあたりで適当なサーバーでも書くかな、と思っていたところ、ふと思い立ってぐぐってみたところでMockoonという良さげなツールを見つけて、使ってみたら便利だったので紹介します。 Mockoonとは僕は知らなかったのですが、2017年ごろからあるモックを作成するツールのようです。 GUIが提供されており、APIの定義やログ閲
Vitest 2.0 is here! This release page lists all changes made to the project during the beta. For the migration guide, please refer to the documentation. 🚨 Breaking Changes Simplify mock function generic types and align with jest - by @hi-ogawa in #4784 (a0c1d37) Remove --segfault-retry - by @sheremet-va in #5514 (ed60e) This flag was introduced to combat threads segfaults. Our current recommendat
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Playwright を使いこなすためのベストプラクティス - Qiita
Playwrightでメール配信のテスト自動化にチャレンジ！ - JX通信社エンジニアブログ
Octomind社がLangChainをやめた理由｜Sangmin Ahn
2024年｜CANARY Web の技術スタック
［入門］Webフロントエンド E2E テスト を出版しました | フューチャー技術ブログ
モバイル端末でのウェブアプリのデバッグ方法、Safari on iOS/Chrome on Android
2024-07-01のJS: ES2024、Playwright v1.45.0、e18e(Ecosystem Performance)
今週のはてなブログランキング〔2024年6月第5週〕 - 週刊はてなブログ
Mockoonで簡単モックサーバー | フューチャー技術ブログ
Release v2.0.0 · vitest-dev/vitest