🐷 What's Poku?A cross-platform test runner that brings the JavaScript essence back to testing. ⚡️ Quick Tutorials
🐷 What's Poku?A cross-platform test runner that brings the JavaScript essence back to testing. ⚡️ Quick Tutorials
こんにちは!フロントエンドエキスパートチームの @mugi_uno です。 みなさんは Visual Regression Test は普段活用していますか? 昨今では事例もよく耳にするようになった印象です。一度使って手放せなくなった方もいるのではないでしょうか。 今回の記事では、通常のプロダクト新規開発とは異なる “脱レガシー” の文脈で Playwright を用いた簡易的な Visual Regression Test を試してみたので、導入に至る経緯と、どのように実施しているかを紹介します。 フロントエンドリアーキテクチャとサイレントリリース 現在サイボウズでは kintone のフロントエンドリアーキテクチャプロジェクトと称して、Closure Tools から React への脱レガシー作業が進行中です。プロジェクトの詳細については @koba04 が書いた次の記事をご覧くださ
ESLint の設定、見直せてますか? スタディスト 開発部 技術支援ユニットの笹木 (@s_sasaki_0529) です。 今回は ESLint の設定を ESLint でテストする という一見奇妙な表題で、 ESLint 設定周りの課題を解決したお話をします。 https://eslint.org/課題感ESLint には標準で多数のルールが組み込まれており、それぞれに詳細なオプションが用意されています。それに加えて、豊富なサードパーティ製のルールや、設定を継承する仕組み(extends) まで揃っているため、設定パターンは無限にあると言っても良いでしょう。 コードベースが小さいうちは、 eslint:recommended のような推奨設定を継承するだけで、すぐにベストプラクティスを実践することができます。 しかし、Vue や TypeScript といった技術構成や、Pretti
皆様フロントエンドのテストを書いていらっしゃいますでしょうか? フロントエンドのテストを書くときには API コールする処理を全てモックする必要があります。外部の API をコールする処理をテストに含めると API サーバーが落ちているなどの外部の要因によってテストが失敗してしまう可能性がありますし、テストを実行するたびに実際に API をコールしてしまうとサーバーに負荷がかかってしまうなど外部に対しても悪影響を与えてしまいます。 さて、従来のモックする手段としては Jest のモックを利用して axios や fetch などのモジュールをモック化する手法がよく使われていたかと思います。 最近のテスト手法として API コールをモックする際に Jest ではなく Mock Service Worker (以下 msw )を使用する手法が注目されています。実施にどのように使用されているのか
「AVA 4.0.0」では、テストファイルがデフォルトでワーカースレッドにて実行されるようになり、実行速度がわずかに高速化したほか、実験的に搭載されていた、AVAのメインプロセスのワーカースレッドにプログラムをロードして、テストワーカーで実行されているコードと通信する機能である共有ワーカーが正式提供となっている。 また、CLIではテストファイルのサブセットを選択するためのパターンが提供可能になるとともに、.gitディレクトリ(またはファイル)があるディレクトリを見つけるまで、親ディレクトリにある構成ファイルを検索するようになり、スナップショットにはレポートファイルの再生成に必要なすべての情報が含まれるようになったほか、実行に失敗したテストファイルを記録するようになり、再度の実行時に失敗したテストファイルを優先して実行するようになった。 さらに、ESモジュールの完全なサポート、型推論を備えた
2021/09/13 Open8 で発表したフロントエンドテストプラクティスの話です。
fixture('Pizza Palace') .page('https://testcafe-demo-page.glitch.me/'); test('Submit a form', async t => { await t // automatically dismiss dialog boxes .setNativeDialogHandler(() => true) // drag the pizza size slider .drag('.noUi-handle', 100, 0) // select the toppings .click('.next-step') .click('label[for="pepperoni"]') .click('#step2 .next-step') // fill the address form .click('.confirm-addr
2022-05-06 更新 「React でコンポーネントテストを書くといいらしい、 React Testing Library や jest でサンプルを参考に書いてみたが 現実どうやってプロダクトコードに合わせていけばいいか分からない」 そういった方が対象となる本を目指しています。 いろいろ調べて実践したものの下記のように感じた方に適しているかもしれません。 - 結局テストで何を担保しようとしているか分からない - React のテストでハマっているか、Jest でハマっているか分からない - モックとかスパイとかアプリケーションとは遠い出来事も多くてピンとこない 誤り・ご指摘あればフィードバックいただけると嬉しいです。 無料で配布していますが、気に入ったらサポートなどいただけると今後もこの本をアップデートし拡張していく気持ちになれるのでよろしくお願いします。
CodeceptJS is opensource MIT licensed testing framework. Works with your favorite frontend frameworks → Scenario Driven Write acceptance tests from user's perspective. Make tests readable and easy to follow. Driver Agnostic Run your tests via Playwright, WebDriver, Puppeteer, TestCafe, Protractor, Appium. The code is the same. Learn More
こんにちは。 急に寒くなりましたね。 僕は最近iPad Air4 を予約しました。 今日は、javascriptのテストフレームワークのjestについてです。 業務では去年くらいから新規サーバーアプリケーションはjavascriptではなくTypeScriptを使っています。 それに合わせてテストフレームワークもmochaからjestへ移行しました。 jestjs.io jestの特徴の1つは、一意なグローバル状態を持つことを保証しつつ、複数のテストを別プロセスで並列に実行してくれるため、安全に高速なテストをすることが可能なことです。 しかし、僕が前にいたチームでjestのテストにかかる時間がやたら長いことが話題になってました。 今日は、この高速なはずのjestがやたら遅い問題が社内で話題になっていたので調査してまとめてみたので、もしjestが遅くて困っている方は参考にしてみてください。
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
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. Test automation aligned with your business Serenity/JS helps you create auto
こんにちは、CyberAgentで内定者アルバイトをしています @junkisai です。 今回は「こえのブログ」の開発に導入したVisual Regressionテストについてお話させていただきます。 そもそもVisual Regressionテストとは コンポーネントやページのスクリーンショットを以前のバージョンのものと比べて、ピクセルレベルでの差分を検出するテスト手法のことです。導入の目的としては、開発者が意図しない変更がないか/差分が意図したものかをテスト結果から確認するだけにすることで、人によるチェックの負担を軽減するためというのが最も大きいですが、機能や動作を検証するためのテストとしても有効です。 完成品 今回導入したVisual Regressionテストの流れ図は以下のようになります。 GitHubにpushすると、CircleCI上でpuppeteerを起動し、Webアプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く