問題タブ [testcafe]

画面上の数字を更新しようとしています。番号を更新できる更新メニューをクリックします。更新ボタンをクリックすると、モーダル ダイアログ ボックスが開き、新しい番号用の空のテキスト ボックスと保存ボタンが表示されます。保存ボタンは最初は無効になっています。ユーザーがテキスト ボックスに数値を手動で入力すると、onChange イベントがトリガーされ、保存ボタンが有効になります。ただし、testcafe スクリプトで数値テキスト ボックスに数値を入力すると、保存ボタンが無効のままになります。私の推測では、testcafe を使用すると.typeText(inputbox,'123')、テキスト ボックスで onChange イベントが発生しません。これに関するヘルプは大歓迎です。

アップデート：

別の (ハンマーヘッド) バグに関しては、testcafe テストで縮小コードを使用することを余儀なくされました。このバグが解決されたため、縮小されていないコードに対してテストを実行できるようになりました。

しかし、まだ、ソース マップが testcafe によって削除されるという問題があります。webpack dev サーバーを正常に実行すると、すべてのソース マップが表示され、ブレークポイントを設定してアプリケーション コードをデバッグできます。

それにもかかわらず、テスト中はソース マップが利用できなくなります。2 つのケースを示す添付のスクリーンショットを見ることができます。

ここで何か間違ったことをしていますか？

Testcafeなしの画像

テストカフェの画像

プロジェクトには Testcafe + Webpack + Vue.js を使用しています。t.debug()ディレクティブまたはnode.js の--inspect フラグを使用してテスト コードをデバッグできることはわかっています。

ただし、難読化されており、実際にはデバッグできない製品コード (build.js) しか表示されません。testcafe がバンドルされたコードではなく、元のソース コードを使用するように構成することは可能でしょうか (おそらくソースマップを使用しますか?)。source-mapwebpack の devtool オプションとして使用しています。

UI テストでは製品コードをテストする必要があることは承知していますが、開発中にそのような構成を使用すると便利です。何か案は？