モダンな自動E2Eテストサービスを調べてみた(2023年クリスマス版)
これからわかる通り、ステップの追加購入が必要です。 「CI/CD ツールと連携してたくさん回せますよ」というテストサービスも多いですが、計算したらステップ数足りないことに気づくことも同じくらい多いです。 どうせステップ数で制限がかけられているので、テストサービスは日次実行さえできれば良いのでは、とさえ思っています。 MagicPod 検討したプラン: ブラウザテストプラン・スタンダード Autify と BugBug は Chrome のシークレットモードで、 mabl はネイティブアプリでテストを作成するツールですが、 MagicPod は違います。 MagicPod でテスト作成をするときはリモートの VM を立ち上げ、その GUI をブラウザの iframe に映して操作します。 そのため、テストしたい自社のウェブアプリがブラウザの中に小さく表示されます。超独特です。 SALESCO
a11yとテストを同時に改善する話
これまで、a11y 改善・テスト拡充にあたり「どのように改善すべきか？どのように書くべきか？」という点がハードルだと感じていました。Chrome で a11y tree を確認するには、dev tools の隅の隅をつつく必要があり、あまり体験の良いものではなく、気に入ったエクステンションもありませんでした。 Testing Library は「誰もがアクセスできるクエリー」を優先的に使用することを推奨していますが、アプリケーションがはじめから a11y に考慮された作りになっているとは限りません。これらの背景から「data-testid」のような、テスト向け属性に頼るワークアラウンドで乗り切ることも少なくありませんでした。 Full page accessibility tree 今年 1 月にリリースされたChrome98 の新機能として「Full page accessibility
あたらしいテストフレームワークVitestをReactで試してみた | DevelopersIO
単純なテストですがそれでも各項目で想像以上に速度の差があることがわかりました。 開発環境 MacBook Pro (13-inch, M1, 2020) macOS Monterey node v16.13.1 vite v2.7.2 vitest v0.1.20 jest 27.4.7 ts-jest 27.1.3 happy-dom 2.27.0 さいごに まだ開発中ながら一度この速度感に慣れてしまうとJestには戻れなくなってしまいそうです。。Jest互換の記載で書きすすめることができ、移行も容易そうなので正式リリース後にはテストフレームワークとして有力な選択肢となりそうです。Vitest今後の開発が楽しみですね。
Reactのユニットテスト2021
React でユニットテストをするときのベストプラクティスはいつも悩むのですが、とりあえず 2021 年 2 月時点では、こうかなーというのをまとめてみます。 まずテストランナーは jest で確定です。ここで悩む要素はまずありません。 では、React のテストをどうやるか？です。 公式の react-dom/test-utils を使う 公式の react-test-renderer を使う @testing-library/react を使う 選択肢としてはこの三種類が有名なところでしょう。 公式という響きはとても魅力的ですが、実は公式ドキュメントから「ボイラープレートを減らすため、エンドユーザが使うのと同じ形でコンポーネントを使ってテストが記述できるように設計されている、React Testing Library の利用をお勧めします。」という形で、@testing-library
なぜE2Eテストでidを使うべきではないのか ｜Autify（オーティファイ）ブログ
こんにちは。AutifyのSET(Software Engineer in Test) 、末村(@tsueeemura)です。 皆さん、E2Eテストしてますか？以前はほぼSelenium一択みたいなところがありましたが、最近はPuppeteerやCypress、TestCafeなどいろいろなフレームワークがあり、ついつい目移りしてしまいますね！ さて、どのフレームワークを使うにせよ、E2Eテストを書く上で共通で意識しないといけない重要なファクターがいくつか存在します。 その一つが ロケータ です。操作や検証の対象となる要素を指定するためのキーのことです。 ロケータにはCSSセレクタやXPathが利用でき、idやclass、name といった属性を利用するのが一般的です。 今回はこのロケータについての話を書こうと思います。 ロケータとは要素を一意に指定できさえすればロケータに使うものは何でも
フロントエンドでTDDを実践する（react-testing-libraryを使った実践編） - Qiita
この記事は、フロントエンドでTDDを実践する（理論編）の続編として書きました。 本記事では、react-testing-libraryでReactでTDDする方法をサンプルを使って解説します。 react-testing-library react-testing-libraryは、PayPalのエンジニアでありフロントエンドのTDDの第一人者であるKent C Doddsが、enzymeのリプレイスを意図して作ったReactのための新しいテストユーティリティです。 設計思想は、The more your tests resemble the way your software is used, the more confidence they can give you. enzymeのように実装そのもののテストをするよりも、ユーザーが使うようにテストされるべきというフィロソフィーがAPI
An Overview of JavaScript Testing in 2020
(Updated on: 21.11.2021) This guide is intended to catch you up with the most important reasoning, terms, tools, and approaches to JavaScript testing for the year 2022. It combines information from the best articles recently released (they are referenced at the bottom) and adds from my own experience. It’s a little long but whoever reads and understands this guide, can safely assume they know the
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webフロントエンドのリプレースを支えるテストの考え方 / JSConf JP 2021