レコーディング時に使用したいアサーションが出てこないのはなぜですか?
  • 02 Sep 2022
  • 1 分で読めます
  • 投稿者
  • ダーク
    ライト

レコーディング時に使用したいアサーションが出てこないのはなぜですか?

  • ダーク
    ライト

記事の要約

レコーディング時に、要素をクリックしてもアサーションが記録されない、もしくは希望する種類のアサーションが選択肢に表示されない場合、以下のような原因が考えられます。

近くにある別の要素を選択してしまっている

まずは、アサーションを行いたい要素を正しく選択できているか確認してください。
選択した要素によって、利用できるアサーションの種類は異なります。
例えば、ボタンに対して有効 (クリック可能) か無効 (クリック不可) かのアサーションを行いたいとします。
この場合、選択の対象は <button> 要素である必要があります。
近くにある別の要素 (親や兄弟要素など) を選択してしまっていると、「対象が有効/無効であることを確認する」アサーションが表示されないことがあります。

対象の要素にCSSプロパティ pointer-events: none が適用されている

希望する要素に対してアサーションが記録できない場合、その要素に pointer-events: none という CSS プロパティが適用されている可能性があります。この CSS プロパティが適用されている場合、イベントの発火が無効化されてしまうために、レコーダーが要素に対する操作を記録できなくなります。
以下に、この場合のワークアラウンドを 2 つ紹介します。

1. pointer-events: none を削除する

ウェブサイトを変更してこのスタイルを取り除くか、 Chrome DevTools から、一時的にこのプロパティを無効化します。
レコーダーが要素を認識できるようになるためこちらの方法を推奨しますが、難しい場合は 2 つ目の方法をお試しください。

2. pointer-events: none が適用されていない時に作成したアサーションステップを使用する

例としてボタンの有効 / 無効を検証したい場合のワークアラウンドを紹介します。
この方法は以下の前提を満たしている必要があります。

  • ボタン有効時は対象の要素にフォーカスでき、「対象が有効であることを確認する」ステップが作成できる
  • ボタン無効時は pointer-events: none の影響でフォーカスできず、「対象が無効であることを確認する」アサーションも表示されない

前提を満たしている場合は以下の方法でボタンが無効であることを検証できます!

  1. シナリオにある「対象が有効であることを確認する」ステップをコピーする (まだステップがない場合はレコーディングしてステップを作成してください)
  2. コピーした「対象が有効であることを確認する」ステップのアクションの選択肢を開き、「対象が無効であることを確認する」を選択し保存する
    update-existing-assertion

この記事は役に立ちましたか?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.