ブラウザ拡張のE2Eテストを検討してみた（Playwright、Puppeteer、Cypress） - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー 8 日目の記事です。 フロントエンドエンジニアの taka です。Amazon Black Friday でフットウォーマーを買ったのですが、冷え性の自分には最高でした。冷え性の方には是非使ってみてもらいたいです。 今回は、モダンなツールである Playwright と Puppeteer、Cypress を実際に触ってみたので、そこから得られた知見を紹介したいと思います。 要件の整理 一般的な要件 テックタッチ特有の要件 機能ごとの比較 テストツールの有無 複数タブ / ウィンドウ ShadowDOM ブラウザ拡張 要素の特定 スクリーンショット 動画 実行速度 まとめ 要件の整理 テックタッチはブラウザ拡張であるため、一般的な Web アプリケーションとは少し要件が異なってきます。以下に、一般的な要件とテックタッチ特有の要件を書き出しました。
https://www.oreilly.co.jp/books/9784814400669/ ひとえに読者の皆さんが買ってくれたおかげで、Real World HTTPを改訂し、このたび3版を上梓しました。ありがとうございます。2016年ごろから書き始めて、2017年に初版を出版したので、執筆段階からすると8年ほど経過しているのですが、これだけ長くこの本に関わり続けられるというのは、本書を買ってくださるみなさまのおかげです。 今回は、ひさびさに無料のミニ版も更新しました。本日、このブログと同時にリリースしました。よりミニ版が学習コンテンツとして使いやすくなるように、そもそもブラウザってどんな動きをするの？というイントロの章をミニ版とオリジナル版に追加しました。 また、オリジナル版だけになりますが、HTTPが単なるブラウザとの通信を超えてプラットフォーム API化していっている流れに合わせて
第17回Quesにて「Agile Testingを夢見たテスト自動化」というタイトルで登壇、テスト自動化のしくじりについて話しました - BASEプロダクトチームブログ
こんにちは。BASE BANK 株式会社 Dev Division にて、Engineering Manager をしている東口（@hgsgtk）です。 TL;DR 第 17 回 Ques にて「CI のためのテスト自動化」というテーマでの登壇依頼をいただき「Agile Testing を夢見たテスト自動化 〜ATDD への挑戦から始まる 1 年間の試行錯誤〜」というタイトルで発表しました 実際にうまく行かなかったことも含めてテスト自動化のしくじりを話しました Agile Testing・ATDD/BDD/SBE に興味がある方に参考になる資料を公開しました 第17回Quesとは Ques とは Software 品質保証に関わる QA エンジニアの活性化を目的とした QA 専門イベントです。 ques.connpass.com Software品質保証に関わるQAエンジニアの活性化を目的
こんにちは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の導入を慎重に考えるべきだとする声は
GitHub - microsoft/playwright-test: Build a cross-browser end-to-end test suite with Playwright.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
差分指向テスト（DOT: Difference Oriented Testing）という考え方 - MNTSQ Techブログ
はじめに MNTSQ(モンテスキュー)株式会社 フロントエンド担当の安積です。 入社して4ヶ月とちょっと。 コードに取り組もうと入社して、まさに日々格闘しております。 私の後ろの席にはこんなバズ記事書く人や、こんなイカつい記事書く人が座ってまして、そんなプレッシャー期待の中からお送りいたします。 tech.mntsq.co.jp tech.mntsq.co.jp 昨日はこんな記事も公開されています。 tech.mntsq.co.jp はじめに 現在のステータス またはMNTSQ考古学 リファクタリングやるぜっっ！ 仕様書大事だよね 差分指向テストとは テスト環境の概要 テストデータ ブラウザ操作自動化 スクリーンショット比較 Playwriteの操作 ちょっとコードのサンプル 最後に この記事を書いた人 現在のステータス またはMNTSQ考古学 コードベースから見たMNTSQのフロントエン
A simple yet powerful testing framework for Node.js Japa comes with everything you need to test your backend applications. Be it writing JSON API tests using an Open API schema or writing browser tests using Playwright. Unlike other testing frameworks born out of the frontend ecosystem, Japa focuses only on testing backend applications and libraries. Therefore, Japa is simpler, faster, and bloatwa
GitHub - microsoft/playwright-cli: CLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
CloudflareのDeveloper Week 2023の気になった発表のまとめ - console.lealog();
今年も祭りの季節がやってきましたね。 Developer Week 2023 | Cloudflare というわけで、今年も個人的に気になったものを。 （発表されるのがだいたいJST深夜かつ最後が金曜日なので、どうやっても公開するの週明けになるんよな・・） Introducing Constellation, bringing AI to the Cloudflare stack https://blog.cloudflare.com/introducing-constellation/ Workersで機械学習のモデルが動かせるようになったとのこと プライベートβ サポートされているランタイムで動作するモデルであれば、自作のものでも、用意されてるものでもOK 現状はONNX形式のみ対応 https://github.com/onnx/models https://github.com/d
ビジュアルリグレッションテストにChromaticを導入したらデザインレビューが捗った話 - Money Forward Developers Blog
マネーフォワード関西開発拠点エンジニアの @uenoY4 です。 現在、私のチームではフロントエンドに Next.js を使用したプロダクトの開発をしています。 その中でリファクタリングなど既存実装に修正を加えた際に、意図しないUIの崩れが起きることを防ぎたいという思いから、ビジュアルリグレッションテストを行うようにしました。今回はビジュアルリグレッションテストを行うために導入したChromaticについてお話しします。 目次 ビジュアルリグレッションテストとは Chromaticとは Chromatic導入のきっかけ 実際導入してみて まとめ ビジュアルリグレッションテストとは ビジュアルリグレッションテストとは、ページの見た目をテストする仕組みで、変更前のページやコンポーネントの画像と変更後の画像を比較して検証を行います。要素のサイズや配置などのピクセルレベルの変更やテキスト色、背景色
Puppeteer, Selenium, Playwright, Cypress - how to choose? - AI-driven E2E automation with code-like flexibility for your most resilient tests
Puppeteer, Selenium, Playwright, Cypress – how to choose? At Testim, a lot of what we do is build AI-based features on top of automation frameworks to add stability,… At Testim, a lot of what we do is build AI-based features on top of automation frameworks to add stability, accelerate test creation, and improve root-cause analysis. We evaluate a number of test automation frameworks to understand
Serenity/JS | Serenity/JS
Enable collaborative test automation at any scale!Serenity/JS is an innovative test automation framework designed to help you create high-quality, business-focused test scenarios that interact with any interface of your system and produce comprehensive test reports that build trust between delivery teams and the business. Make your tests speak your languageSerenity/JS Screenplay Pattern helps you
「フロントエンド開発のためのテスト入門」の感想
同じ時期に Jest 本（Jest ではじめるテスト入門）を書いていたので、他の方はどのようにテストについて書くのか気になったので読んでみました。 Jest 本との比較 Jest 本と比較し、「フロントエンド開発のためのテスト入門（歯車本と呼ぶそうです）」は Jest の説明など重複している部分はありましたが、特徴が全く違うと感じました。 Jest 本では、CircleCI で働いていたのが大きいのですが「テストを機能させるにはどうすればいいのか？」というのを強く意識して書いていました。そのため、Jest でテストを書くために必要な情報以外に、ブランチモデルや CI、プロジェクトへのテストを導入する際のアプローチなどを紹介しています。そして、寄り道が多いです。JavaScript の仕様や Jest の歴史、CircleCI での体験談などのコラムが充実しています。全然意識していたわけでは
Service WorkerとCache APIによるWebサーバーの負荷軽減とテスト実装について-後編 - dwango on GitHub
2023-03-06 Mon Service WorkerとCache APIによるWebサーバーの負荷軽減とテスト実装について-後編 ニコニコQセクションのHajime-san(GitHub)です。 本記事は、Service WorkerとCache APIによるWebサーバーの負荷軽減とテスト実装について-前編の続きとなります。 テストについて さて、前編のService Workerスクリプトの実装はローカル開発環境および検証環境での確認を経て本番環境にデプロイされているのですが、このままでは「なんとなくキャッシュが動いている」という状態がブラウザ上に構築されていることになるので、Service Workerの振る舞いの仕様書となるテストコードが欲しいというのが本稿のもう1つの主題になります。 Service Workerのテストについては筆者が知る範囲ではインターネットにはあまり知
Fast and reliable cross-browser testing with Playwright 🎭
Web developers today are shipping faster. Web apps are becoming increasingly sophisticated and run across all devices — our phones, tablets and desktops — each running a different browser engine. This increase in velocity and targets puts immense pressure on the testing process: automated cross-browser testing has become more important than ever. Automated end-to-end tests can be incredibly powerf
プロダクトエンジニアリング部の海老澤です。 普段は LIFULL HOME'S の賃貸部門のフロントエンド開発をしています。 近年、LIFULL の開発部門では「開発生産性」という言葉が取り沙汰されるようになりました。 LIFULL HOME'Sの主要リポジトリは10年以上運用され続け、今も多くの開発者によって日々改修され続けています。 長い年月の中で小さな設計ミスも積み重なって大きくなり、ちょっとした実装でも入念な調査が必要となり開発生産低下の要因となっていました。 また10年以上前に採用したフレームワークで稼働しているため、今ではドキュメントを探すのも一苦労という具合です。 そこで主要開発部門では「自部門の機能はマイクロサービスへと切り離し、各々で面倒を見る」という方針になりました。 賃貸部門も同様に機能の切り離しを始め、先日「物件詳細ページ」のマイクロサービス化を行いました。 今回は
mablからPlaywrightに移行しました - LegalOn Technologies Engineering Blog
こんにちは！ 株式会社LegalOn TechnologiesのLegalForceキャビネ開発部SET（Software Engineer in Test）のひきもち（@rmochioo）です。 昨年8月に入社し、LegalForceキャビネのAPIテスト、自動E2Eテストなどの自動テストの導入、QA業務まで幅広く携わっております。 APIテストに関しては先日、記事出ていますのでご興味があれば見ていただければと思います。 tech.legalforce.co.jp LegalForceキャビネではE2Eテストの自動化ツールとしてmablを利用していましたが、この度Playwrightへの移行を行いました。 現在LegalForceキャビネで運用しているE2Eテストは全てPlaywrightで実行されており、リリース可否判断やQA環境でのマニュアルテストのサポートとして利用されています。
【株式会社ラクス】SaaSプロダクト別の技術スタックを一挙公開！ - RAKUS Developers Blog | ラクス エンジニアブログ
（本記事は2023/10/2時点の情報にアップデートしております） こんにちは、技術広報のyayawowoです。 突然ですが、株式会社ラクスと聞いて何を思い浮かべますでしょうか？ 弊社ラクスでは、様々なプロダクトを展開していますが正直認知度は低いと思っております。 そこで今回、弊社についてもっともっと知っていただくため・・・ ラクスが展開している全10プロダクト 全10プロダクトの技術スタック インフラ/SRE/デザイナーの技術スタック について、ご紹介させていただきます！ SaaS開発に携わる方、弊社に少しでも興味を持っている方の一助となれば幸いです！ ラクスが展開している全10プロダクトとは？ バックオフィス向け フロントオフィス向け 10プロダクトの技術スタック 楽楽販売 楽楽精算 楽楽明細 楽楽電子保存 楽楽勤怠 MailDealer 配配メール Curumeru blastmai
2024/02/21 ビジュアルリグレッションテストツール４選！ユーザーが語る各ツールのメリット で発表したスライドです。 https://trident-qa.connpass.com/event/308664/ 参照したURL - https://playwright.dev/docs/test-snapshots - https://zenn.dev/mh4gf/articles/tiny-vrt-with-github-actions - https://tech.route06.co.jp/entry/2023/03/29/080000
タイトルの通りこの hiroppy.me のサイトを 1 から刷新し、そこにブログページが入ったことによりブログもはてなから移管することにしました。 特に意識してなかったのですが、はてな ブログの方が、ちょうど 100 記事目の時に移行するという流れになってしまいました。。 はてな ブログは有料会員で 4 年間ぐらいやっていたのですが、最近は使えておらず、そうなると当初の目的である独自ドメインでのはてブ通知も今はあまり必要なくなりました。 また、ブログの名前が技術探しですが、最近はプライベートの話や技術を昔以上に探せてない点があり、もう自分としては役割を終えたのかなと思っています。 359 人の方に購読してもらい、多くの方に閲覧してもらって本当にありがとうございました。1 年半も技術の記事を投稿していなかったのに未だにアクセスがあり、嬉しく思います。 過去の記事もこちらへ移動させてますが、
ビジュアルリグレッションテストのすすめ
日々いろいろなWebサイトの制作や修正を対応していく中で、修正したページとは関係ない（と思っていた）ページで表示が崩れてしまったことってありませんか？ 私はたびたび経験があります。 毎回目視で全ページをチェックすれば防げるのかもしれませんが、それは現実的ではありません。 自動で全ページをチェックしてくれて不具合があれば教えてくれる、そんな便利なツールがあればと何度も思いました。 どうやら現代の技術でそれは作れるみたいです。ビジュアルリグレッションテストというらしいです。 ビジュアルリグレッションテストとは ざっくりいうと「見た目の比較」をするテストのことです。 変更前のWebサイトのスクリーンショットを用意しておき、変更後のスクリーンショットを撮り比較することで、どこが変わったか差分を表示し確認することができます。 どうやって使うの ビジュアルリグレッションテストを導入するための方法はいく
ZOZOTOWNのマーケティングプラットフォームでのフロントエンドの取り組み - ZOZO TECH BLOG
はじめに こんにちは、MA部の林（@hayash__p）です。 私達のチームでは、メール、LINE、Push通知、サイト内お知らせなどでユーザにZOZOTOWNのセールや新着商品を紹介するといった、マーケティングに関わるシステムを開発しています。これまで、配信チャネルや配信内容ごとに個別最適化したシステムを開発していましたが、それらを一新したマーケティングプラットフォームを作ることになりました。新しいマーケティングプラットフォームであるZOZO Marketing Platform（以下、ZMP）の概要については以下のテックブログをご覧ください。 techblog.zozo.com 本記事では、マーケティングプラットフォームのリプレイスにあたり、フロントエンドエンジニアとして取り組んだことを紹介します。 目次 はじめに 目次 背景 ZMPの管理画面モジュール MPマネージャー 技術選定 M
vuefes.jp 一日セッション見つつメモを残したので、個人ブログに放り投げておく。 殴り書きなので何の清書もしてないし、誤字脱字もチェックしてないです！！！ Keynote | The Evolution of Vue / Evan You https://vuefes.jp/2022/sessions/yyx990803 0.x系の Pre バージョン時代の話 ES5のみのFeatureを前提にする必要があった 1.0のコードネームってEvangelionだったのか.. 2015-2016でのコアなライブラリ群の追加が多かったらしい。Vue Router とかVuex 大規模SPAアプリケーションの構築の解決狙い Vapor Mode Virtual DOM への依存がない パフォーマンス特化でのプリビルド 今後 Vue2→3の移行期という認識 30%が Vue3, 25%が 2.7
2023年6月27日に開催されたFLEXY meetupのテーマは「フロントエンドのテスト」です。 技術の進化とともにバックエンドとフロントエンドが疎結合になる今、フロントエンド領域ではテストの重要性が高まっています。 一方、現場レベルではテストコードを書いたことがなく、何から始めるべきなのか悩みを抱えているエンジニアは多いのではないでしょうか。 そこで今回は、実際にフロントエンドのテスト導入を行っている古川さん、nus3さんの2名がディスカッション。「フロントエンドテストはじめの一歩」として今、何ができるのかを実例も交えながら教えていただきました。 イベント概要 技術の進化に伴い、アーキテクチャレベルでバックエンドとフロントエンドが疎結合になった今、フロントエンド領域におけるテストの重要性について注目が集まっています。 一方でまだ手法が広まっておらず実際にテストコードを書いたことがないた
![フロントエンドテストはじめの一歩 [FLEXY meetupイベントレポート] - FLEXY（フレキシー）](https://cdn-ak-scissors.b.st-hatena.com/image/square/61e23c19faa14a56ce4e6b940ca5ce2e6f726ac8/height=288;version=1;width=512/https%3A%2F%2Fflxy.jp%2Fmedia%2Fwp-content%2Fuploads%2F2023%2F07%2F3bfdf32ad90ed12f36456c563abc807d-e1689937462143.png)
Visual Regression Testing はじめました - 具体的な運用 Tips | Recruit Tech Blog
こんにちは。スタディサプリ ENGLISH Web フロントチームの kazuma1989 です。 先日、私たちのチームは開発フローに Visual Regression Testing を導入しました。Visual Regression Testing は、フレームワークを紹介する記事は見つかるものの、具体的な知見があまり広まっていない印象なので、具体的な設定値や選定理由も含め紹介してみます。 React による Web フロント開発を前提にしていますが、Visual Regression Testing のコア部分は「画像の比較」であるため、他のプラットフォーム開発でも参考になればと思います。 Visual Regression Testing (VRT) とは Visual Regression Testing （日本語で 画像回帰テスト、以下 VRT）は、画像の差分を検出する、スナ
JSer.info #488 - TypeScript 3.9がリリースされました。 Announcing TypeScript 3.9 | TypeScript Promise.allの型推論がされています。 また3.9 β時点では導入される予定だったawaitedは問題が見つかったため、3.9時点では導入されないことになりました。 その他にはビルドパフォーマンスの改善、Type Errorとなることを期待する// @ts-expect-errorコメントの追加などが行われています。 JSへとコード変換における非互換な変更として、クラスのGetter/Setterをenumerable: trueに変換するのではなく、enumerable: falseに変換する変更が含まれています。 これは、ECMAScriptの仕様で定義されているのと同じ挙動で、Babelも同様の挙動です。 Type
Qwik Reaches v1.0
The Qwik team is excited to announce that Qwik has reached v1.0. Qwik is a full-stack web framework that brings a fundamentally new approach to delivering instant apps at scale! Frameworks such as React, Vue, Angular, Svelte, SolidJS, and their meta frameworks (Next.js, Nuxt, SvelteKit, SolidStart, Astro) have revolutionized web development by providing powerful tools and abstractions that simplif
後回しにされがちな問題を改善するための「改善デー」「やさしさデー」のご紹介 #LayerXテックアドカレ - LayerX エンジニアブログ
こんにちは。バクラク申請・経費精算エンジニアの@upamuneです。12/24日のM-1グランプリの敗者復活戦を軽い気持ちで見に行ったら、パイプ椅子に7時間座ることになって腰がやられました。 この記事はLayerXテックアドカレ2023の43日目の記事です。 私はなぜか3日分もテックアドカレに入れてしまったのですが、3回目の今回は「改善デー」「やさしさデー」という取り組みの話を紹介しようと思います。 「改善デー」とは 弊チームでは「改善デー」という名前のイベントを約1ヶ月に1度のペースで開催しています。これは、チームメンバーが「普段改善したいと思っているけど、中々できていないことをやる日」です。 実施に至った背景としては、主に以下の2点がありました。 シビアに優先度を検討した結果、機能開発の優先度が上がり改善に手を付けられていなかった ロードマップでは開発リソースのN%を「やさしさ対応」(
Historical expertise provided by Jerry Beck, Amelia Cook, Jason DeMarco, Maureen Furniss, Monique Henry-Hudson, Willow Catelyn Maclay, Linda Simensky, Koji Yamamura Entries by Rebecca Alter, Elly Belle, Kambole Campbell, Jen Chaney, Amelia Cook, Alex Costello, Marley Crusch, Toussaint Egan, Christopher L. Inoa, Genevieve Koski, Willow Catelyn Maclay, Rafael Motamayor, Sammy Nickalls, Joshua Rivera
APIテストで質とスピードの両立を実現 - LegalForceキャビネの事例 - LegalOn Technologies Engineering Blog
こんにちは、株式会社LegalOn TechnologiesのLegalForceキャビネ開発部でQAリードを務めている島根（@shimashima35）と申します。 QAというとマニュアルテストが中心かと思われるかもしれません。確かにマニュアルテストはQAの業務の一部ではありますが、「質とスピードの両立」つまりプロダクト品質の高さとリリーススピードの両立を目指すため自動テストの導入もおこなっています。 今回はLegalForceキャビネのバックエンドに対するAPIテストを実装した話をご紹介します。 APIテストとは まず最初にAPIテストについて説明します。 APIテストの概要 APIテストとはWeb APIの外形的な仕様を満たしているかを HTTP(S)を用いてテストすることです。バックエンドのコントローラーに対するユニットテストとは以下の点が異なります。 HTTP(S)を経由する デ
『君の名は。』への評がいかに快挙か；訳文と感想（ネットで読めるグレッグ・イーガン氏の映画・創作観） - すやすや眠るみたくすらすら書けたら
録り貯めたお正月の特番を消化しているかたのなかには、３が日に地上波初放送された『天気の子』や８日新年一発目の『金曜ロードSHOW!』神木隆之介さんなど豪華吹替キャストによる『パラサイト』をご覧のかたもいらっしゃるんじゃないでしょうか？ 今回の記事は、そんな新海誠監督の前作で神木氏主演『君の名は。』にたいするグレッグ・イーガン氏の評価がいかにすごいか、氏のインタビューやエッセイ（『Avatar Review（「アバター」批評）』『No Intelligence Required Her, Ex Machina and Interstellar（知性は不要――「her／世界でひとつの彼女」、「エクス・マキナ」そして「インターステラー」にとって）』）などを勝手に訳して、氏の映画観・創作観と比べることで確かめてみようという感じのやつです。 訳文本文7700字｛2230字＋5529字（原文730語＋
Remixで個人開発をしたので技術スタックを紹介
しおりモ！ まずは開発しているサービスの紹介をします。 「しおりモ！」は本に関するメモをいい感じ（当社比）に記録するためのサービスです。元々読書中に気に入ったセリフや後から読み直したい箇所を手帳や他のサービスにメモしていました。しかし、あとで見返すときにどの本のどのページか分かりづらい/検索がしづらかったので、自分が使いやすいサービスを開発することにしました。一応本についてのメモとは謳っているものの、通常のメモ帳サービスとしても使えるはずです。 まだ初期機能（メモの追加、編集、削除と検索）の実装が終わった段階です。これからも細かい機能追加を色々したいとは思っています。ただ、とりあえず自分で使う分には最低限のところは終わったので、あとはのんびりやっていくつもりです。SEO対策とかOGPの設定はしていません。 よかったら使ってみてください。 メモの作成 メモの検索 メモの編集 Remix せっ
ベンチャー企業でQAチームを立ち上げました
1. はじめに Social Databank Tech Blog Advent Calendar 2023の5日目です。 今回はSocial Databank（以下SDB）でQAチームを立ち上げた話をします。 SDBにQAチームができたのが1年前。それまでQAという組織が存在せず、各メンバーがそれぞれの機能・コードをレビューし、リリースを行なっていました。 そのため、サービスの規模や開発メンバーが増えるにつれて以下の課題が発生しました。 品質が各メンバー・PJに依存する a. 検証項目が作成する人によって粒度が変わる b. テストコードを書くPJとそうでないPJがある c. 仕様が特定のメンバーに属人化している 品質に関するルールや規定がない a. 障害が発生しても有識者が場当たり的に対応している b. リリースに関する判定基準がない 以上の理由から、QAチームを立ち上げ組織全体の品質向
Storybook is the industry standard workshop for building, documenting, and testing UI components. It’s used by leading development teams at organizations like Shopify, Gov.UK, and NASA. One of the biggest benefits of developing in Storybook is that you get tests for free. Each isolated component example—or “story”—is a UI test. And if you want to test data fetching and user interactions, Storybook
Next.js の getServerSideProps & API Routes テスト手法についてまとめました。getServerSidePorps & API Routes に関するテストは「Cypress・Playwright」を利用することが多いと思いますが、本稿は Jest 単体テストの紹介です。以下はテストに使用するエコシステム一式です（Jest 等は略） msw node-mocks-http next-test-api-route-handler testing-library 1.pageExtensions を設定する 本題に入る前に、pageExtensions を next.config.jsに設定します。pageExtensions はpagesに含まれるファイルのうち、指定の拡張子をもつファイルが「Page・API 実装ファイルである」ことを指定するものです。
Tips, tricks, and in-depth guides from the trenches. Learn how to use the popular open-source browser automation frameworks, Playwright and Puppeteer. This guide provides detailed information and examples how you can write high-quality scripts for testing and synthetic monitoring. Getting Started Have a look at how Playwright & Puppeteer work, what similarities they share, as well as the noticeabl
はじめに こんにちは。カナリーでソフトウェアエンジニアをしている @yoshi-jr です。 私たちは 【もっといい「当たり前」をつくる】 をミッションに掲げている不動産テックカンパニーです。弊社では、現在下記のプロダクトを運用しています。 「Canary」: BtoC の部屋探しポータル（アプリ/Web） 「Canary Cloud」: BtoB SaaS（不動産の仲介会社様向けの顧客管理システム） この記事では、 CANARY のウェブ版（以降 CANARY Web）で利用している技術スタックをまとめています。 この記事を読んでわかること CANARY Web について技術スタックの全体像・概要が理解できる 話すこと CANARY Web のアーキテクチャ CANARY Web で利用しているモジュールとその歴史 話さないこと CANARY Web 視点以外でのアーキテクチャ 各モジュ
PlaywrightをGitHubActions実行したときの初期処理についての試行錯誤 | フューチャー技術ブログ
Playwright連載5日目です。 近年PlaywrightやCypressを用いたE2Eテスト（エンドツーエンドテスト）が行われるようになってきました。 E2Eテストとはソフトウェアやシステムの全体的な動作や機能をテストする手法で、ユーザーが実際に行う操作を模倣したテストを行い、アプリケーションが予想通りに機能するかどうかを確認していきます。 具体的な操作手順をテストケースとして作成し、予期される結果との整合性を確認していくわけです。バグの早期発見のためにも、E2Eテストの自動化を行い、さらにはCIに組み込み定期的に実行していきたい。そしていざ組み込んでみると、CIの実行時間が気になってきます。 テスト自体の実行時間も短縮を行っていきたいですが、テストが始まるまでのイニシャライズ、初期処理の時間もそこそこ掛かってしまうもの。 今回はどのように設定していけば処理時間が短くなるか。試行錯誤
実はOffersMGRでもDatadog Synthetic Test を用いてテストを行っていました。 しかし、シナリオが2つしか無くカバー範囲も狭く、デグレが起こっても検知出来ない状況でした。 今回のPlaywrightを使ったE2Eテストの導入では既存シナリオの移行とOffersMGRの全ページが健全に動作しているかのチェックを目的としました。 今後を見据えた設計と運用 BtoCももちろんですが、BtoBのプロダクトは特に成長していくとともに安定したサービス提供が求められるのでテストの重要度は高くなります。 そのため、E2Eテストや結合テストの拡充は必然的に実施していくことになります。 一応、特定のComponentに対象を絞る事によってE2Eテストでも結合テストが出来ます。 しかし、E2Eテストは結合テストと比べ実行速度が遅く、最終的なテスト量はE2Eテスト < 結合テストが理想で
go-smtp-mockをSMTPのモックサーバにして単体テストする | フューチャー技術ブログ
はじめにTIG真野です。 バックエンドのアプリケーションの上で、メール送信するコードがある場合の単体テストをどう実現するか悩みました。 メールには、タイトル・本文・From・TO・CC・BCCなど複数の設定値がありますし、SMTPサーバの接続情報もあります。これらを表現する構造体のモデルだけに絞った検証に留めることは、気が進みませんでした。時代はインフラレベルでダミーサーバを動かしモックする方向で動いています。SMTPでメール送信し、その送信結果をテストコード上で取得＆検証する一連の流れを行って動作を確かめたいと思いました。 方法として、澁川さんのMailSlurperを使って6桁のコードの送信コードのテストをするで紹介されたMailSlurperを使うか迷いましたが、以下の点で牛刀だなと感じました。 メール送信するのはごく一部の機能（私の場合は1機能。今後増える見込みは現時点で見えなかっ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Real World HTTPの第3版ができあがりました | フューチャー技術ブログ
Octomind社がLangChainをやめた理由｜Sangmin Ahn
Introduction
LIFULL HOME'S 賃貸物件詳細ページの基盤刷新について - LIFULL Creators Blog
Playwright で一番小さく始める VRT と、次のステップの選択肢
Astroでサイトを作り直し、ブログをはてなから移管しました - hiroppy's site
📝 Vue Fes Japan Online 2022 / 見たセッションメモ - memo_md
フロントエンドテストはじめの一歩 [FLEXY meetupイベントレポート] - FLEXY（フレキシー）
2020-05-18のJS: TypeScript 3.9、Deno 1.0、Playwright 1.0
The 100 Most Influential Sequences in Animation History
Portable stories for Playwright Component Tests
Testing Next.js - getServerSideProps & API Routes -
Learn Playwright & Puppeteer | Checkly
2024年｜CANARY Web の技術スタック
E2Eテストを導入した時に考えた設計と実装と運用について | Offers Tech Blog