---
title: "ツールチップに対するアサーションをレコーディングする"
slug: "recording-tooltip-assertion"
updated: 2024-02-26T06:39:25Z
published: 2024-02-26T06:39:25Z
canonical: "help.autify.com/recording-tooltip-assertion"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.autify.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

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

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

          ホバーステップ

          

ツールチップに対するアサーションステップの前には、ツールチップを表示させるための[ホバーステップ](/docs/ja/hover-step)が必要です。

## アサーションの追加方法

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

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

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

![force-state-hover](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/force-state-hover.png?sv=2026-02-06&spr=https&st=2026-11-15T00%3A50%3A12Z&se=2026-11-15T01%3A50%3A12Z&sr=c&sp=r&sig=IDEz46dysd9qfmRwD3wwOLXeWj3%2FXAGh%2FxoWV1zLSkE%3D)

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

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

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

デベロッパーツールのコンソールから[マウスオーバーを行うスニペット](https://javascript-snippets.autify.com/ja/snippets/mouse/mouseover/)を対象要素に対して実行し、ツールチップを表示させてから、アサーションを追加してください。

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

[マウスオーバーを行うスニペット](https://javascript-snippets.autify.com/ja/snippets/mouse/mouseover/)でツールチップを表示しても、アサーション追加時に要素が消えてしまう場合は、以下の方法でアサーションを追加できる可能性があります。

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

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

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