Playwright & Vite ではじめる脱レガシー向け軽量 Visual Regression Test - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！フロントエンドエキスパートチームの @mugi_uno です。 みなさんは Visual Regression Test は普段活用していますか？ 昨今では事例もよく耳にするようになった印象です。一度使って手放せなくなった方もいるのではないでしょうか。 今回の記事では、通常のプロダクト新規開発とは異なる “脱レガシー” の文脈で Playwright を用いた簡易的な Visual Regression Test を試してみたので、導入に至る経緯と、どのように実施しているかを紹介します。 フロントエンドリアーキテクチャとサイレントリリース 現在サイボウズでは kintone のフロントエンドリアーキテクチャプロジェクトと称して、Closure Tools から React への脱レガシー作業が進行中です。プロジェクトの詳細については @koba04 が書いた次の記事をご覧くださ
ESLint の設定を ESLint でチェックする
ESLint の設定、見直せてますか？ スタディスト 開発部 技術支援ユニットの笹木 (@s_sasaki_0529) です。 今回は ESLint の設定を ESLint でテストする という一見奇妙な表題で、 ESLint 設定周りの課題を解決したお話をします。 https://eslint.org/課題感ESLint には標準で多数のルールが組み込まれており、それぞれに詳細なオプションが用意されています。それに加えて、豊富なサードパーティ製のルールや、設定を継承する仕組み(extends) まで揃っているため、設定パターンは無限にあると言っても良いでしょう。 コードベースが小さいうちは、 eslint:recommended のような推奨設定を継承するだけで、すぐにベストプラクティスを実践することができます。 しかし、Vue や TypeScript といった技術構成や、Pretti
フロントエンドのテストのモックには msw を使うのが最近の流行りらしい
皆様フロントエンドのテストを書いていらっしゃいますでしょうか？ フロントエンドのテストを書くときには API コールする処理を全てモックする必要があります。外部の API をコールする処理をテストに含めると API サーバーが落ちているなどの外部の要因によってテストが失敗してしまう可能性がありますし、テストを実行するたびに実際に API をコールしてしまうとサーバーに負荷がかかってしまうなど外部に対しても悪影響を与えてしまいます。 さて、従来のモックする手段としては Jest のモックを利用して axios や fetch などのモジュールをモック化する手法がよく使われていたかと思います。 最近のテスト手法として API コールをモックする際に Jest ではなく Mock Service Worker (以下 msw ）を使用する手法が注目されています。実施にどのように使用されているのか
JavaScriptテストフレームワーク「AVA 4.0.0」がリリース
「AVA 4.0.0」では、テストファイルがデフォルトでワーカースレッドにて実行されるようになり、実行速度がわずかに高速化したほか、実験的に搭載されていた、AVAのメインプロセスのワーカースレッドにプログラムをロードして、テストワーカーで実行されているコードと通信する機能である共有ワーカーが正式提供となっている。 また、CLIではテストファイルのサブセットを選択するためのパターンが提供可能になるとともに、.gitディレクトリ（またはファイル）があるディレクトリを見つけるまで、親ディレクトリにある構成ファイルを検索するようになり、スナップショットにはレポートファイルの再生成に必要なすべての情報が含まれるようになったほか、実行に失敗したテストファイルを記録するようになり、再度の実行時に失敗したテストファイルを優先して実行するようになった。 さらに、ESモジュールの完全なサポート、型推論を備えた
フロントエンドテストプラクティス in open 8
2021/09/13 Open8 で発表したフロントエンドテストプラクティスの話です。
GitHub - grafana/k6: A modern load testing tool, using Go and JavaScript - https://k6.io
Modern load testing for developers and testers in the DevOps era. Download · Documentation · Community Forum k6 is a modern load-testing tool, built on our years of experience in the performance and testing industries. It's built to be powerful, extensible, and full-featured. The key design goal is to provide the best developer experience. Its core features are: Configurable load generation. Even
React テスト応用、テストに悩む人へ
2022-05-06 更新 「React でコンポーネントテストを書くといいらしい、 React Testing Library や jest でサンプルを参考に書いてみたが 現実どうやってプロダクトコードに合わせていけばいいか分からない」 そういった方が対象となる本を目指しています。 いろいろ調べて実践したものの下記のように感じた方に適しているかもしれません。 - 結局テストで何を担保しようとしているか分からない - React のテストでハマっているか、Jest でハマっているか分からない - モックとかスパイとかアプリケーションとは遠い出来事も多くてピンとこない 誤り・ご指摘あればフィードバックいただけると嬉しいです。 無料で配布していますが、気に入ったらサポートなどいただけると今後もこの本をアップデートし拡張していく気持ちになれるのでよろしくお願いします。
Introducing Rome
We’re excited to announce the first beta release and general availability of the Rome linter for JavaScript and TypeScript. This is the beginning of an entire suite of tools. Rome is not only linter, but also a compiler, bundler, test runner, and more, for JavaScript, TypeScript, HTML, JSON, Markdown, and CSS. We aim to unify the entire frontend development toolchain. Rome is a monolithic tool con
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
WebアプリにVisual Regressionテストを導入 - Qiita
こんにちは、CyberAgentで内定者アルバイトをしています @junkisai です。 今回は「こえのブログ」の開発に導入したVisual Regressionテストについてお話させていただきます。 そもそもVisual Regressionテストとは コンポーネントやページのスクリーンショットを以前のバージョンのものと比べて、ピクセルレベルでの差分を検出するテスト手法のことです。導入の目的としては、開発者が意図しない変更がないか/差分が意図したものかをテスト結果から確認するだけにすることで、人によるチェックの負担を軽減するためというのが最も大きいですが、機能や動作を検証するためのテストとしても有効です。 完成品 今回導入したVisual Regressionテストの流れ図は以下のようになります。 GitHubにpushすると、CircleCI上でpuppeteerを起動し、Webアプ
Webフロントエンド パフォーマンス改善ハンドブックを公開しました - dwango on GitHub
パフォーマンス改善ハンドブック ウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンド パフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。 注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま
Puppeteer Recorder - Chrome Web Store
A Chrome extension for recording browser interaction and generating Puppeteer & Playwright scripts
フロントエンドの負債と向き合う - mizchi's blog
某所で書いたものを公開用に書き直したもの 前提 フロントエンドでTDDは難しい、というかほぼ不可能である。なぜなら事前に副作用をデータとして表現できるか不明だからだ。たとえばあなたのプロダクトの画面の何処かにボタンを追加するために、その内部表現を事前に思い浮かべることが可能だろうか？ react-redux などのFluxフレームワークは如何に副作用をアクションとして表現することで、テスト・デバッグのための情報を残すか、という視点で発展してきた側面がある。あの冗長なアクション定義は、全てデバッグのために書いていると言っても、過言ではない。それすら「Textは文字がある」といったトートロジーなデータになりがち。 フロントエンドの現実的な単体テストは、他の開発者のために、自分が書いたコードの要求を満たしているか検知する手段として、防衛的にテストアフターしておく。これぐらいしか現実的な手法がない
2018年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
可及的速やかにReactが絶滅しますように。 以下はFront-End Developer Handbook 2018の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール 開発者向けドキュメント、APIリファレンス Dash 200以上のAPIリファレンス、100以上のチートシートを一括ダウンロードできる。有料、Mac用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。有料、Windows用。 Zeal Windows、Linux、MacOS用各種揃っている無料のオフラインドキュメント。 チートシート devhints.io JavaScript、CSS、Go、vim等のショートカット、書式などチートシート。字が薄くて見辛い。 SEOツール Key
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js の Jest / React Testing Library でモック (mock) を含めた render で開発効率を高めよう | fwywd（フュード）powered by キカガク
GitHub - developit/karmatic: 🦑 Easy automatic (headless) browser testing with Jest's API, but powered by Karma & Webpack.
GitHub - ealush/vest: Vest ✅ Declarative validations framework
easygraphql.com
GitHub - danibram/mocker-data-generator: A simplified way to generate masive mock data based on a schema, you can use the awesome fake/random data generators like (FakerJs, ChanceJs, CasualJs and RandExpJs)
JavaScriptのE2Eフレームワークを触ってみる
