드라이버가 실행 한 클릭 은 요소가 상호 작용할 수없는 경우에도 JavaScript HTMLElement.click()가 click이벤트에 대한 기본 조치를 수행하는 동안 가능한 한 근접한 실제 사용자의 동작을 시뮬레이션하려고 시도합니다 .

차이점은 다음과 같습니다.

• 드라이버는 요소를 보기로 스크롤 하여 요소 가 표시 되는지 확인하고 요소가 상호 작용할 수 있는지 확인합니다 .

  드라이버가 오류를 발생시킵니다 :

  • 클릭 좌표에서 맨 위에있는 요소가 타겟팅 된 요소 또는 하위 요소가 아닌 경우
  • 요소의 크기가 없거나 완전히 투명한 경우
  • 요소가 비활성화 된 입력 또는 버튼 인 경우 (속성 / 속성 disabled은 true)
  • 요소에 마우스 포인터가 비활성화 된 경우 (CSS pointer-events는 none)

  JavaScript HTMLElement.click()는 항상 기본 조치를 수행하거나 요소가 사용 불가능한 경우 자동으로 실패합니다.

• 운전자는 초점을 맞출 수있는 요소에 초점을 맞출 것으로 예상됩니다 .

  자바 스크립트 HTMLElement.click()는 그렇지 않습니다.

• 드라이버는 실제 사용자처럼 모든 이벤트 (mousemove, mousedown, mouseup, click 등) 를 방출해야합니다 .

  JavaScript HTMLElement.click()는 click이벤트 만 생성합니다 . 페이지는 이러한 추가 이벤트에 의존 할 수 있으며 생성되지 않은 경우 다르게 작동 할 수 있습니다.

  다음은 Chrome에서 클릭하기 위해 드라이버가 생성 한 이벤트입니다.

  mouseover {target:#topic, clientX:222, clientY:343, isTrusted:true, ... }
  mousemove {target:#topic, clientX:222, clientY:343, isTrusted:true, ... }
  mousedown {target:#topic, clientX:222, clientY:343, isTrusted:true, ... }
  mouseup {target:#topic, clientX:222, clientY:343, isTrusted:true, ... }
  click {target:#topic, clientX:222, clientY:343, isTrusted:true, ... }

  그리고 이것은 JavaScript 주입으로 생성 된 이벤트입니다.

  click {target:#topic, clientX:0, clientY:0, isTrusted:false, ... }

• JavaScript .click() 가 생성 한 이벤트 는 신뢰할 수 없으며 기본 조치가 호출되지 않을 수 있습니다.

  https://developer.mozilla.org/en/docs/Web/API/Event/isTrusted
  https://googlechrome.github.io/samples/event-istrusted/index.html

  일부 드라이버는 여전히 신뢰할 수없는 이벤트를 생성합니다. 버전 2.1부터 PhantomJS의 경우입니다.

• JavaScript에 의해 생성 된 이벤트 .click() 에는 click 좌표가 없습니다 .

  속성 clientX, clientY, screenX, screenY, layerX, layerY이로 설정되어 0있습니다. 페이지가 의존 할 수도 있고 다르게 동작 할 수도 있습니다.

JavaScript를 사용하여 .click()일부 데이터를 스크랩 해도 괜찮지 만 테스트 컨텍스트에는 없습니다. 사용자의 행동을 시뮬레이션하지 않기 때문에 테스트의 목적을 무효화합니다. 따라서 드라이버 클릭이 실패하면 실제 사용자도 동일한 조건에서 동일한 클릭을 수행하지 못할 가능성이 높습니다.

드라이버가 성공할 것으로 예상되는 요소를 클릭하지 못하는 이유는 무엇입니까?

• 지연 또는 전환 효과로 인해 대상 요소가 아직 표시되거나 상호 작용할 수 없습니다.

  몇 가지 예 :

  https://developer.mozilla.org/fr/docs/Web (드롭 다운 탐색 메뉴)
  http://materializecss.com/side-nav.html (드롭 다운 사이드 바)

  해결 방법 :

  가시성, 최소 크기 또는 안정된 위치를 기다리는 웨이터를 추가하십시오.

  // wait visible
  browser.wait(ExpectedConditions.visibilityOf(elem), 5000);
  
  // wait visible and not disabled
  browser.wait(ExpectedConditions.elementToBeClickable(elem), 5000);
  
  // wait for minimum width
  browser.wait(function minimumWidth() {
      return elem.getSize().then(size => size.width > 50);
  }, 5000);

  성공할 때까지 클릭을 다시 시도하십시오.

  browser.wait(function clickSuccessful() {
      return elem.click().then(() => true, (ex) => false);
  }, 5000);

  애니메이션 / 전환 기간과 일치하는 지연을 추가하십시오.

  browser.sleep(250);

• 대상 요소 는 일단보기로 스크롤되면 부동 요소로 덮여 있습니다.

  드라이버는 요소를보기로 자동 스크롤하여 볼 수있게합니다. 페이지에 플로팅 / 스티커 요소 (메뉴, 광고, 바닥 글, 알림, 쿠키 정책 등)가 포함 된 경우 해당 요소는 결국 표시 될 수 있으며 더 이상 표시 / 상호 작용할 수 없습니다.

  예 : https://twitter.com/?lang=en

  해결 방법 :

  스크롤 또는 부동 요소를 피하려면 창의 크기를 더 크게 설정하십시오.

  음수 Y오프셋으로 요소 위로 마우스를 가져간 다음 클릭하십시오.

    browser.actions()
       .mouseMove(elem, {x: 0, y: -250})
       .click()
       .perform();

  클릭하기 전에 요소를 창의 중앙으로 스크롤하십시오.

  browser.executeScript(function scrollCenter(elem) {
    var win = elem.ownerDocument.defaultView || window,
      box = elem.getBoundingClientRect(),
      dy = box.top - (win.innerHeight - box.height) / 2;
    win.scrollTo(win.pageXOffset, win.pageYOffset + dy);
  }, element);
  
  element.click();

  피할 수없는 경우 부동 요소를 숨기십시오.

  browser.executeScript(function scrollCenter(elem) {
    elem.style.display = 'none';
  }, element);

답변