div를 클릭하고 싶지만 해당 div가 다른 div와 동일한 ID를 공유합니다. 특히 xpath를 사용하여 여러 솔루션을 테스트했지만 아무것도 작동하지 않습니다.
선택자 및 xpath없이 클릭하는 다른 솔루션이 있습니까?
HTML
<div class="modal-button" id="button-grey"> Cancel </div>
<div class="modal-button create-modal-button modal-blue-button" id="button-grey"> Accept </div>내 코드 :
await page.click('#button-grey')이 코드를 사용하면 수락을 클릭하고 싶을 때 취소를 클릭합니다.
도움을 주셔서 감사합니다.
id button이 회색 인 첫 번째 div가 취소라고 표시된 div이기 때문에 취소를 클릭 할 수 있습니다.
ID는 고유해야합니다. 대신 button 그레이를 class로 만들고 두 div에 추가 class로 추가하십시오. 그런 다음 고유 ID를 수락하는 div를 제공하십시오. await page.click (yourUniqueID) 내에서이 고유 ID를 사용하십시오.
Chris G가 언급했듯이 id 속성은 해당 특정 요소에 고유해야합니다.
MDN 웹 문서 는 id <를 설명합니다. / code> 속성은 다음과 같습니다.
id전역 속성은 전체 문서에서 고유해야하는 식별자 (ID)를 정의합니다. 그 목적은 링크 (조각 식별자 사용), 스크립팅 또는 스타일 (CSS 사용)시 요소를 식별하는 것입니다.
onClick () 을 사용하지 말고 단순히 ID를 고유 한 더 설명적인 것으로 변경하십시오. 또한 코드에서 특정 요소를 훨씬 쉽게 찾을 수 있습니다.
코드를 변경할 수없는 경우, 예를 들어 웹 스크래핑 중 요소가 필요한 경우 .modal-button : nth-child () 를 사용하여 필요한 button을 찾을 수 있습니다.
귀하의 html이 유효하지 않습니다. 동일한 ID로 serval html 태그를 설정할 수 없습니다.
[W3C 유효성 검사기]에서 HTML을 확인하세요. https://validator.w3.org/#validate_by_input
"button-회색"ID를 class로 변환
의견에서 알 수 있듯이 id는 고유해야합니다.
이 코드를 사용하면 수락을 클릭하고 싶을 때 취소를 클릭합니까?
이것은 브라우저가 해당 id 로 찾은 첫 번째 요소를 사용하기 때문에 발생합니다. 귀하의 경우 처음 발견 된 것은 취소 입니다.
동일한 ID (고유해야 함)를 가진 여러 항목이있는 잘못된 HTML 코드입니다. 귀하의 질문은 다음과 같습니다.
선택자 및 xpath없이 클릭 할 수있는 다른 솔루션이 있습니까?
다음은 < 동일한 ID를 가진 두 번째 요소 [1] 에서 code> elementHandle.click :
const elementHandles = await page.$$('#button-grey')
await elementHandles[1].click() // click 2nd element [1] with the same id어쨌든 XPath는 텍스트 콘텐츠를 기반으로 무언가를 클릭해야하는 경우 유용 할 수 있습니다.
const acceptHandle = await page.$x("//div[@id='button-grey' and contains(text(), 'Accept')]")
await acceptHandle[0].click() // XPath returns an array, the first item [0] is the matching element
출처 : https://stackoverflow.com/questions/63246009/click-div-with-same-id