>웹 프론트엔드 >JS 튜토리얼 >Puppeteer를 사용하여 텍스트 내용을 기반으로 요소를 클릭하는 방법은 무엇입니까?

Puppeteer를 사용하여 텍스트 내용을 기반으로 요소를 클릭하는 방법은 무엇입니까?

Barbara Streisand
Barbara Streisand원래의
2024-10-29 07:30:30372검색

How to Click an Element Based on Text Content Using Puppeteer?

Puppeteer를 사용하여 텍스트가 있는 요소 클릭

도전 과제: 텍스트만을 기준으로 요소 찾기 및 클릭 content.

다음 HTML 스니펫을 고려하세요.

<code class="html"><div class="elements">
    <button>Button text</button>
    <a href="#">Href text</a>
    <div>Div text</div>
</div></code>

목표: "버튼 텍스트"가 포함된 버튼 요소에 클릭 동작을 구현합니다.

해결책:

아래 XPath 표현식은 원하는 텍스트가 포함된 버튼을 식별합니다.

"//button[contains(., 'Button text')]"

그러나 주변

컨테이너에서 다음 수정된 표현식을 사용하십시오.

"//div[@class='elements']/button[contains(., 'Button text')]"

클릭 동작을 실행하려면:

const [button] = await page.$x(&quot;//div[@class='elements']/button[contains(., 'Button text')]&quot;);
if (button) {
    await button.click();
}

설명:

.contains(. .contains(text(), 'Text') 대신 XPath 표현식은 하위 노드를 포함하므로 요소 구조에서 더 깊은 텍스트 노드를 제외하지 않도록 합니다.

위 내용은 Puppeteer를 사용하여 텍스트 내용을 기반으로 요소를 클릭하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.