ui-demo

Topics in the source

• UI デモ動画レコーダー
• 使用場面
• 3フェーズのプロセス
• フェーズ 1：探索
• なぜか
• 方法
• 確認すべき内容
• 出力

Playwrightの動画録画機能を使用して、注入されたカーソルオーバーレイ、自然なリズム、ナラティブフローを備えた美しいWebアプリのデモ動画を録画する。 ユーザーが「デモ動画」「スクリーン録画」「操作デモ」または「チュートリアル」を求める場合 ユーザーが機能またはワークフローを視覚的に見せたい場合 ユーザーがドキュメント、オンボーディング、ステークホルダーへのデモのために動画が必要な場合 すべてのデモは 探索 -> リハーサル -> 録画 の3つのフェーズを経る。録画フェーズに直接ジャンプしない。 スクリプトを書く前に、ターゲットページを探索して実際の内容を把握する。 見たことのない内容のスクリプトは書けない。フィールドが ではなく の場合、ドロップダウンが ではなくカスタムコンポーネントの場合、コメントボックスが @mentions や #tags をサポートしている場合があある。仮定は録画を静かに壊す。 フローの各ページに移動し、インタラクティブな要素をダンプする： フォームフィールド： 、 、カスタムドロップダウン、コンボボックスのどれか？ 選択オプション：オプションの値とテキストをダンプする。プレースホルダーには value="0" または value="" が含まれることがあり、非空に見える。Array.from(el.options).map(o => ({ value: o.value, text: o.text })) を使用する。テキストに「選択」が含まれるオプションや値が "0" のオプションをスキップする。 リッチテキスト：コメントボックスは @mentions、#tags、Markdown、絵文字をサポートしているか？プレースホルダーテキストを確認する。 必須フィールド：どのフィールドがフォームの送信をブロックするか？ラベルの required、 を確認し、空のフォームを送信してバリデーションエラーを確認する。 動的コンテンツ：他のフィールドを入力した後にフィールドが表示されるか？ ボタンラベル：正確なテキスト（"Submit"、"Submit Request"、"Send" など）。 テーブル列ヘッダー：テーブル駆動のモーダルには、各 input[type="number"] をその列ヘッダーにマッピングする。すべての数値入力が同じ意味を持つと仮定しない。 スクリプトに正しいセレクターを書くために使用する、ページごとのフィールドマッピング。例： 録画せずにすべてのステップを実行する。各セレクターが解決されることを確認する。 セレクターの失敗は、デモ録画が壊れる最大の原因。リハーサルは録画を無駄にする前に問題を発見する。 ensureVisible を使用する——ログを記録して大きくエラーを報告するラッパー： 1. 可視要素のダン

This is an excerpt. Refer to the complete source and its current requirements.