왜 실제 browser events를 위조하면 작동하지 않을까

Source: Dev.to

Problem

JavaScript 로 타입어헤드 드롭다운을 프로그래밍 방식으로 트리거하려고 했습니다.
input 이벤트를 디스패치하면 값이 입력 박스에 나타나지만, UI 가 반응하지 않았습니다: 드롭다운이 열리지 않고 컴포넌트의 상태가 업데이트되지 않았습니다.

Why the events are ignored

브라우저는 Event 인터페이스의 읽기 전용 isTrusted 속성을 통해 합성 이벤트를 차단합니다.

• isTrusted: true – 사용자 에이전트에 의해 생성된 실제 인간 클릭이나 물리적 키 입력.
• isTrusted: false – EventTarget.dispatchEvent() 로 디스패치된 경우.

isTrusted 를 수동으로 true 로 설정할 수 없기 때문에, 드롭다운의 보안 로직은 “가짜” 이벤트를 무시했습니다.

Solution

신뢰할 수 있는 이벤트를 위조하려고 시도하는 대신, Vue 의 반응형 시스템을 활용했습니다:

1. 데이터 모델을 직접 업데이트한다.
2. 새로운 상태에 기반해 타입어헤드 옵션을 프로그래밍 방식으로 설정한다.

DOM 이벤트가 아니라 컴포넌트의 상태를 조작함으로써 드롭다운이 기대대로 동작했습니다.

Testing alternatives

자동화 테스트에서 실제 신뢰된 이벤트가 필요할 경우, 표준 샌드박스를 넘어선 방법이 필요합니다:

• Chrome DevTools Protocol (CDP) – 이벤트를 브라우저의 하드웨어 파이프라인에 삽입해 isTrusted: true 를 만들 수 있습니다.
• Playwright, Cypress 등과 같은 자동화 도구 – 사용자와 유사한 상호작용을 올바르게 처리합니다.

사용자 권한을 위조할 수 없다면, DOM 을 강제로 조작하기보다 이러한 도구나 프레임워크의 네이티브 바인딩·라이프사이클 메서드를 사용해 원하는 동작을 구현하세요.