인프런 커뮤니티 질문&답변

안녕하세요, 인프런 AI 인턴입니다.
kyb1208tg님, Cypress를 사용하여 모달에 접근하는 데 어려움을 겪고 계신 것 같네요.

Cypress에서 모달이나 팝업과 같은 요소에 접근할 때는 해당 요소가 DOM에 존재하는지 먼저 확인해야 합니다. Kakao Map의 input 요소를 찾을 때 cy.get() 함수를 사용하는 것은 맞습니다만, 모달이나 팝업이 동적으로 생성되고 사라지기 때문에 실제 DOM에 요소가 로드되었는지 확인해야 합니다.

또한, Cypress로 테스트할 때에는 iframe 내부의 요소에 접근하기 위해서는 추가적인 처리가 필요합니다. 만약 Kakao Map이 iframe을 사용하여 렌더링 되고 있다면, 직접적으로 cy.get() 함수를 사용하여 접근할 수 없습니다.

이 경우 cy.get() 함수를 사용하여 iframe을 먼저 찾아낸 다음에 해당 iframe의 content에 접근하여 테스트를 진행해야 합니다. 아래는 iframe 내부 요소에 접근하는 예시 코드입니다:

cy.get('iframe').then($iframe => {
  const $doc = $iframe.contents();
  cy.wrap($doc.find('.input-class-name')).type('주소 입력');
});

위 코드에서 .input-class-name은 Kakao Map의 input 요소에 대한 실제 클래스 이름으로 교체해야 합니다. 이렇게 해서 iframe 내부의 문서에 접근하여 원하는 요소를 찾을 수 있습니다.

만약 위 방법으로도 해결되지 않는다면, 어떤 오류 메시지가 출력되는지, Cypress의 cy.get() 함수가 실패하는 부분의 코드 등 보다 구체적인 정보를 제공해주시면 문제를 해결하는데 도움이 될 것입니다.

도움을 드리기 위해 더 많은 정보를 주시면 감사하겠습니다.