ツールチップに対するアサーションをレコーディングする

ツールチップに対するアサーション

ツールチップはマウスオーバーを外すと消えてしまうため、レコーディングでツールチップにアサーションを追加する場合は、次に紹介するいずれかの方法でアサーションを追加してください。

アサーションの追加方法

ツールチップの実装は、主に「HTMLとCSSだけで実装する」方法と「JSで実装する方法」の2パターンあり、それぞれでアサーションの追加方法が異なります。

HTMLとCSSで実装したツールチップにアサーションを追加する方法

ツールチップをCSSで非表示にしておき、親要素がホバーされたときにツールチップの非表示を解除する実装をHTMLとCSSでしている場合は、ChromeのデベロッパーツールのForce stateで、対象要素に対して:hoverを設定しhover状態にすることで、ツールチップが表示されたままの状態になるため、アサーションを追加することが可能です。

JSで実装したツールチップにアサーションを追加する方法

JSでツールチップを実装している場合は、以下いずれかの方法でアサーションを追加できる可能性があります。

マウスオーバーを行うスニペットでツールチップを表示する

デベロッパーツールのコンソールからマウスオーバーを行うスニペットを対象要素に対して実行し、ツールチップを表示させてから、アサーションを追加してください。

マウスオーバーを行うスニペットでもアサーションを追加できない場合

マウスオーバーを行うスニペットでツールチップを表示しても、アサーション追加時に要素が消えてしまう場合は、以下の方法でアサーションを追加できる可能性があります。

1. ツールチップのCSSセレクターやXPathを取得する。
2. 適当な要素に対して希望のアサーションを追加し保存する。
3. ツールチップのCSSセレクター/XPathをアサーションステップのロケータに設定する。
4. アサーションステップの期待値をツールチップの文言などに修正する。

それでも問題が解決しない場合...

いつでもカスタマーサポートチームにご連絡ください。問題を解決するお手伝いをいたします。