CypressError: Timed out retrying after 4050ms: `cy.click()` failed because this element:

Cypress 오류 해결하기

1. cy.click() 실패

CypressError: Timed out retrying after 4050ms: `cy.click()` failed because this element:

`<img alt="카카오로그인" loading="lazy" width="22" height="22" decoding="async" data-nimg="1" src="/assets/icon/kakao-talk-icon.svg" style="color: transparent;">`

has CSS `pointer-events: none`

원인

cypress 에서 click 테스트를 작성하였으나 대상 요소가 CSS 스타일 pointer-events: none을 가지고 있어 클릭 이벤트가 발생하지 않을 때 발생한다.

해결

1. force: true 옵션 사용:

cy.get('img[alt="카카오로그인"]').click({ force: true });

force: true 옵션은 Cypress가 요소의 상호작용 가능 여부와 상관없이 클릭하도록 강제한다.

 

• 클릭 가능한 상위 요소를 찾기:

cy.get('.styles_kakao-login-button__LfODP').click();

요소가 클릭 가능한 상위 요소 안에 포함되어 있을 수 있으므로 상위 요소를 클릭한다.

 

2. cy.contains() 사용

cy.contains('button', '카카오 계정으로 계속하기').click();

특징:

1. 텍스트 기반 선택: 요소의 클래스나 속성을 모르더라도 특정 텍스트로 요소를 선택할 수 있다.
2. 가독성 향상: 코드가 더 직관적으로 읽히며, 유지보수가 쉬워진다.
3. 정확성: 해당 텍스트를 가진 특정 태그(button, div 등)를 선택 가능하다.

사용 상황:

• 버튼이나 링크에 고유한 텍스트가 있는 경우.
• 클래스나 속성 이름이 동적으로 바뀌는 경우.

이 방식은 특히 다국어 지원처럼 텍스트가 고유한 상황에서 좋음