도구 설명에 어설션 기록하기

툴팁 어설션

사용자가 요소 밖으로 마우스를 가져가면 툴팁이 사라집니다. 녹화할 때 다음 방법 중 하나로 툴팁 어설션을 추가할 수 있습니다.

어설션을 추가하는 방법

툴팁은 일반적으로 HTML과 CSS만 사용하거나 JS를 사용하는 두 가지 주요 방법으로 구현됩니다. 어설션을 추가하는 방법은 툴팁이 구현되는 방식에 따라 다릅니다.

HTML 및 CSS로 구현된 툴팁에 어설션 추가하기

CSS를 사용하여 툴팁을 숨기고 HTML 및 CSS를 사용하여 부모 요소를 마우스로 가리키면 표시하려면 Chrome 개발자 도구의 '강제 상태'에서 ':hover'를 선택합니다. 이렇게 하면 툴팁이 계속 표시되고 어설션을 추가할 수 있습니다.

JS로 구현된 툴팁에 어설션 추가하기

툴팁이 JS를 사용하여 구현된 경우 다음 중 한 가지 방법으로 어설션을 추가할 수 있습니다.

마우스오버 스니펫을 사용하여 툴팁을 표시합니다.

개발자 도구 콘솔에서 대상 요소에서 마우스 오버 스니펫을 실행하여 도구 설명을 표시한 다음 어설션을 추가합니다.

마우스 오버 코드 조각을 사용하여 어설션을 추가할 수 없는 경우

마우스 오버 스니펫을 사용하여 툴팁이 표시되지만 어설션을 추가하면 사라지는 경우 다음을 수행하여 추가할 수 있습니다:

1. 도구 설명에 대한 CSS 선택기 또는 XPath 가져오기]를 클릭합니다.
2. 원하는 어설션을 해당 요소에 추가하고 저장합니다.
3. 3. 어설션 단계의 로케이터로 CSS 선택기 또는 XPath를 설정합니다.
4. 필요한 경우 어설션 단계의 예상 값을 수정합니다. 예를 들어 예상 값은 툴팁 텍스트가 될 수 있습니다.