便利すぎる！Mac のメニューバーでサウンド設定を変更するときは「Option キー」を使う

最近「リモート会議」や「リモート研修」も多く，オーディオインタフェース（入出力）をよく切り替えている．今回は Mac で簡単にオーディオインタフェースを切り替える Tips を紹介する．なんと「Option キー」を使うだけ！

サウンドアイコンをメニューバーに追加する

まず，基本的な設定として，サウンドアイコンを Mac のメニューバーに追加する．「システム環境設定」➔「サウンド」と開き，1番下にある「メニューバーに音量を表示」を有効化する．

すると，メニューバーにサウンドアイコンが表示される．

クリックするとデフォルトは「内蔵スピーカー」しかなく，以下のような表示になる．

例えば「AirPods Pro」を使って出力する場合は，以下のような表示になり，サウンドアイコンから直接「AirPods Pro」に切り替えられる．

Option キー + サウンドアイコン

しかし，サウンドアイコンをクリックしても「出力装置」しか切り替えられず，マイクを使って話すなど「入力装置」を切り替える場合は，サウンドアイコンから「サウンド環境設定」をクリックして，切り替える必要がある．正直言って，面倒だった．

そこで「Option キーを押しながらサウンドアイコンをクリック」すると，なんと「入力装置」も切り替えられるようになる！これは便利！以下は出力を「内蔵スピーカー」に切り替えて，入力を「Yeti」に切り替えた．

まとめ

Mac で「Option キーを押しながらサウンドアイコンをクリック」すれば「出力装置」と「入力装置」を簡単に切り替えられる！便利！

リモート環境 関連

デジタルホワイトボード環境を作るなら以下の記事も参考になるはず！

kakakakakku.hatenablog.com

Autify で「JS ステップ」と throw new Error() を組み合わせてアサーションを実装する

Autify のレコーディング時にシナリオに追加する「検証ステップ」は，基本的に「〜を確認する」という「正常確認」のテストになる．例えば「URL を確認する」や「対象のテキストを確認する」など．しかし，実際には「特定の条件を満たさなかったらテストをエラーにする」というテストを実装したくなる場面もある．今回は Autify の「JS ステップ機能」と throw new Error() を組み合わせた機能を試す．

ブログの「最終更新日」を確認して「n日」経過していたらエラーにする

「JS ステップ機能」と throw new Error() を組み合わせるために，今回は題材として「ブログの最終更新日を確認するシナリオ」を作る．指定した「n日」を経過していたらエラーにするため，言い換えると「Autify を使ってアサーションを実装する」ことになる．

1.「シナリオ」を作る

シナリオ「kakakakakku blog 最終更新日 確認」を作る．基本的な操作は今までと重複するため割愛する．

2. レコーディングをする

今までと同じようにレコーディングをする．しかし今回は特にレコーディングするステップはなく，kakakakakku blog にアクセスした後に「JS ステップ機能」を使う．

1. 「kakakakakku blog」にアクセスする
   • ✅ 最終更新日を検証する : 「n日」経過しているか？

3. JavaScript を実装する

サンプルとして，以下のような JavaScript を実装する．最終更新日を CSS Selectors から取得し，現在時刻と比較して「1日」経過していたらエラーを返す．このときに JavaScript の throw new Error() ステートメントを使うことにより，Autify 側にエラーを通知できる．昨日の記事で試した return ステートメントもそうだけど，JavaScript の基本的なステートメントと連携する Autify の仕組みはスゴイ！

var updated = new Date(document.querySelector('.entry:first-child time').attributes.datetime.value);
var now = new Date();
if ((now - updated) > (1000 * 60 * 60 * 24)) {
    throw new Error('ブログを1日以上更新していません！');
}

最終的に以下のような画面になる．

4.「シナリオ」を実行する

ブログを更新した直後と1日経過後にシナリオを実行する．

⭕️ 正常終了する

❌ エラーになる

Autify FAQs

• JavaScriptでのアサーションは行なえますか？ – Autify Help Center

まとめ

Autify の「JS ステップ機能」と throw new Error() を組み合わせて「特定の条件を満たさなかったらテストをエラーにする」というシナリオを試した．return や throw new Error() など，JavaScript の基本的なステートメントと連携する Autify の仕組みはスゴイ！

Autify 紹介記事

• E2E テスト自動化プラットフォーム「Autify」を使ってシナリオをレコーディングする - kakakakakku blog
• Autify を使って「スマホレイアウト」をレコーディングする - kakakakakku blog
• Autify で記事一覧から「1記事目」を厳密にクリックする - kakakakakku blog
• Autify でテストデータのパターンを増やすなら「データ機能」を使う - kakakakakku blog
• Autify で「JS ステップ」と return を組み合わせて計算結果を入力値に使う - kakakakakku blog

Autify で「JS ステップ」と return を組み合わせて計算結果を入力値に使う

昨日の記事では Autifiy の「データ機能」を試した．テストデータのパターンを増やす場合に便利に使える．

kakakakakku.hatenablog.com

さらに E2E テストを検討していくと，「データ機能」のようにパターンを決めるのではなく「シナリオ実行時に動的に入力値を決めたい」という場面もある．例えば「現在時刻（シナリオ実行時刻）に依存したテスト」や「乱数を使ったテスト」や「リストからランダムに1個選んで使うテスト」など．今回は Autify の「JS ステップ機能」を使って「シナリオ実行時に計算結果を入力値に使う機能」を試す．

「JS ステップ機能」と return を組み合わせる

Autify の「JS ステップ機能」を使うと，任意の要素をクリックするなど「JavaScript コードを自由に実装できる」ことは既に試した．

kakakakakku.hatenablog.com

さらに Autify には「JavaScript で return をした計算結果を次のステップの入力値として使える」という機能がある．個人的には Autify で未サポートな挙動を実現する場合など，シナリオを細かく実装するために幅広く使える機能だと思う．

1.「シナリオ」を作る

シナリオ「kakakakakku blog 検索シナリオ（ランダム）」を作る．基本的な操作は今までと重複するため割愛する．

2. レコーディングをする

今までと同じようにレコーディングをする．今回はシンプルに以下のステップとする．

1. 「kakakakakku blog」にアクセスする
2. キーワード「github」で記事を検索する

3. JavaScript を実装する

検索ステップの前で「JS ステップを挿入」を選ぶ．今回は以下の JavaScript コードを実装する．意味としては「プログラミング言語配列（5種類）からランダムに1個選ぶ」で，ポイントは「2行目で計算結果を return している点」となる．

var languages = ['Python', 'Go', 'Ruby', 'PHP', 'Java'];
return languages[Math.floor(Math.random() * languages.length)];

最終的に以下のような画面になる．

return を実装したことにより，検索ステップの「入力値」として「他のステップから取得」を選べるようになる．計算結果（プログラミング言語名）を入力値に使えるという意味になる．最終的に以下のようなシナリオになる．

1. 「kakakakakku blog」にアクセスする
2. キーワード ${プログラミング言語名} で記事を検索する
   • ${プログラミング言語名} を「候補リスト (Python, Go, Ruby, PHP, Java)」からランダムに選択する

4.「シナリオ」を実行する

シナリオを繰り返し実行すると以下のような結果が得られる．

Java が選ばれた（Autify スクリーンショット）

Ruby が選ばれた（Autify スクリーンショット）

PHP が選ばれた（Autify スクリーンショット）

Autify FAQs

• 現在の日時や乱数などを変数として利用できますか？ – Autify Help Center

Autify GitHub : autify-javascript-snippets

以下のリポジトリに「JS ステップ機能」に使える JavaScript サンプルが公開されている．例えば generate-random-value.js を読むと「時刻」や「乱数」を return する実装になっている．見てみると良いかと！

github.com

まとめ

今回は Autify を使って「シナリオ実行時に計算結果を入力値に使う機能」を試した．JavaScript で return をした計算結果を次のステップの入力値として使えるという仕組みは幅広く使えるため，Autify を使うなら覚えておくべき機能だと思う！

Autify 紹介記事

• E2E テスト自動化プラットフォーム「Autify」を使ってシナリオをレコーディングする - kakakakakku blog
• Autify を使って「スマホレイアウト」をレコーディングする - kakakakakku blog
• Autify で記事一覧から「1記事目」を厳密にクリックする - kakakakakku blog
• Autify でテストデータのパターンを増やすなら「データ機能」を使う - kakakakakku blog

Autify でテストデータのパターンを増やすなら「データ機能」を使う

今までレコーディングをしてきた Autify のシナリオは，ある意味「固定的な」ステップだった．例えば「キーワード GitHub で記事を検索」や「Envoy カテゴリをクリック」など．実際に E2E テストを検討する場合，テストデータのパターンを増やしたくなる．例えば「会員登録フォーム」は複数のパターンをテストしたいと思う．今回は Autify の「データ機能」を使ってテストデータのパターンを増やす．

「データ機能」を使ったシナリオを作る

1.「シナリオ」を作る

シナリオ「kakakakakku blog 検索シナリオ」を作る．基本的な操作は今までと重複するため割愛する．まず「シナリオ作成画面」で「データ」タブを開くとファイルをアップロードできる．今回は以下のような CSV を用意した．1 レコード = 1 パターン となる．

• keyword : 検索キーワード
• url : 期待値 (URL)
• text : 期待値（テキスト）

keyword,url,text
GitHub,https://kakakakakku.hatenablog.com/search?q=GitHub,GitHub の検索結果:
nginx,https://kakakakakku.hatenablog.com/search?q=nginx,nginx の検索結果:
Redash,https://kakakakakku.hatenablog.com/search?q=Redash,Redash の検索結果:

「CSV アップロード (UTF-8)」をクリックしてアップロードすると，以下のような画面になる．忘れずに「保存」ボタンをクリックしておく．

2. レコーディングをする

データを使う前にシナリオを作る必要がある．今までと同じように1度レコーディングをする．今回は以下のステップとする．

1. 「kakakakakku blog」にアクセスする
2. キーワード「GitHub」で記事を検索する
   • ✅ URL を検証する : https://kakakakakku.hatenablog.com/archive/category/GitHub
   • ✅ テキストを検証する : GitHub の検索結果:

3. 「データ」を使う

レコーディングをしたシナリオを「データ」を使って以下のように修正する．CSV としてアップロードしたデータ3種類 ${keyword} と ${url} と ${text} を使うように修正している．

1. 「kakakakakku blog」にアクセスする
2. キーワード ${keyword} で記事を検索する
   • ✅ URL を検証する : ${url}
   • ✅ テキストを検証する : ${text}

まず，検索ステップを修正し「入力値」として「データ : keyword」を選ぶ．

同じように検証ステップも修正すると，最終的に以下のような画面になる．${keyword} と ${url} と ${text} をうまく使えている．

4. 「シナリオ」を実行する

「Chrome で今すぐ実行」をクリックして「シナリオ」を実行すると，CSV の通りに「計3パターン」テストが実行される．

スクリーンショットを見ると Redash の検索結果: など，CSV としてアップロードしたパターンを使って実行できている．

Autify FAQs

• 一つの「シナリオ」で様々な文字列のパターンのテストを行いたいです。 – Autify Help Center

まとめ

Autify でテストデータのパターンを増やすなら「データ機能」を使う．CSV をアップロードできるし，アップロード結果を Autify のシナリオ画面で確認できるのも便利だと思う．Autify 紹介記事も連載4回目になり，より実践的な E2E テストを実装できるようになってきた！

Autify 紹介記事

• E2E テスト自動化プラットフォーム「Autify」を使ってシナリオをレコーディングする - kakakakakku blog
• Autify を使って「スマホレイアウト」をレコーディングする - kakakakakku blog
• Autify で記事一覧から「1記事目」を厳密にクリックする - kakakakakku blog

Autify で記事一覧から「1記事目」を厳密にクリックする

先週 Autify を使って kakakakakku blog の画面遷移をするシナリオをレコーディングしたときに「最新記事（1記事目）」をクリックするステップを作った（はずだった）．しかし Autify のシナリオを数日間実行し続けたところ，実は「最新記事（1記事目）」をクリックできていなかったことに気付いた．今回は記事一覧から「最新記事（1記事目）」を厳密にクリックできるようにする．

kakakakakku.hatenablog.com

「要確認」とは？

先週作ったシナリオ「kakakakakku blog 画面遷移 + 検証」を実行したところ，以下のように「要確認」という警告が出た．テスト自体は成功している．この「要確認」というのが Autify の特徴的な機能と言える．Autify では「レコーディング時と完全一致しない場合に AI を使って探索をする」仕組みになっているため，今回は AI を使って探索し，結果をフィードバックするために「要確認」と表示してくれている．

スクリーンショットを確認すると，2記事目に下がった「diff2html-cli 記事」をクリックしている．ようするに「最新記事（1記事目）」ではなく「完全一致する要素」を探索してクリックしてくれていると考えられる．

記事一覧から「1記事目」を厳密にクリックする

今回は Autify の「JS ステップ機能」を使って「1記事目」を厳密にクリックできるようにする．

1.「シナリオ」を複製する

まず，シナリオ「kakakakakku blog 画面遷移 + 検証」を複製して「kakakakakku blog 画面遷移（JavaScript 利用）+ 検証」を作る．基本的な操作は今までと重複するため割愛する．

2.「シナリオ」を修正する

「1記事目」をクリックするため「JS ステップを挿入」を選ぶ．

「JS ステップ」には JavaScript コードを自由に実装できる．今回は kakakakakku blog の「1記事目」を意味する CSS Selectors を使ってクリックするように実装する．やはり E2E テストの実現には CSS Selectors や XPath など，機械的に要素を特定する仕組みが必要なんだと再認識させられる．例えば，レコーディング後に「もしかして "1記事目" をクリックしましたか？」という確認が出てくる未来があっても良さそう．

document.querySelector('.entry:first-child .entry-title-link').click();

最終的に JavaScript を入力したシナリオ画面は以下のようになる．

3.「シナリオ」を実行する

修正したシナリオを実行すると，JavaScript を使って正しく「最新記事（1記事目）」をクリックできるようになった（右側 : 今回の結果）．

5/3 に記事を公開した後に実行したシナリオ結果

5/4 に記事を公開した後に実行したシナリオ結果

Autify FAQs

• リストのN番目をクリックしたい場合どうしたらいいですか？ – Autify Help Center

まとめ

Autify の「JS ステップ機能」を使って kakakakakku blog の記事一覧から「1記事目」を厳密にクリックできるようにした．さらに Autify の特徴的な機能と言える「要確認」も確認できた．引き続き Autify を試していく！

Autify 紹介記事

• E2E テスト自動化プラットフォーム「Autify」を使ってシナリオをレコーディングする - kakakakakku blog
• Autify を使って「スマホレイアウト」をレコーディングする - kakakakakku blog