Cách nhấp vào phần tử có văn bản trong Puppeteer

Có phương pháp nào (không tìm thấy trong API) hoặc giải pháp để nhấp vào phần tử có văn bản không?

Ví dụ tôi có html:

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

Và tôi muốn nhấp vào phần tử mà văn bản được bao bọc (nhấp vào nút bên trong .elements), như:

Page.click('Button text', '.elements')

Các đầu câu trả lời hiện bởi tokland chỉ hoạt động trên các nút văn bản và không trên các nút với các yếu tố khác bên trong.

Câu trả lời ngắn

Biểu thức XPath này sẽ truy vấn một nút có chứa văn bản "Văn bản nút":

const [button] = await page.$x("//button[contains(., 'Button text')]");
if (button) {
    await button.click();
}

Để tôn trọng <div class="elements">xung quanh các nút, hãy sử dụng mã sau:

const [button] = await page.$x("//div[@class='elements']/button[contains(., 'Button text')]");

Giải trình

Để giải thích tại sao việc sử dụng nút văn bản ( text()) là sai trong một số trường hợp, hãy xem một ví dụ:

<div>
    <button>Start End</button>
    <button>Start <em>Middle</em> End</button>
</div>

Đầu tiên, hãy kiểm tra kết quả khi sử dụng contains(text(), 'Text'):

• //button[contains(text(), 'Start')]sẽ trả về cả hai nút (như mong đợi)
• //button[contains(text(), 'End')]sẽ chỉ trả về một nút (nút đầu tiên) như text()trả về danh sách có hai văn bản ( Startvà End), nhưng containssẽ chỉ kiểm tra nút đầu tiên
• //button[contains(text(), 'Middle')] sẽ không trả về kết quả vì text()không bao gồm văn bản của các nút con

Dưới đây là các biểu thức XPath cho contains(., 'Text'), hoạt động trên chính phần tử bao gồm các nút con của nó:

• //button[contains(., 'Start')]sẽ trả về cả hai nút
• //button[contains(., 'End')]sẽ trả lại cả hai nút
• //button[contains(., 'Middle')] sẽ trả lại một (nút cuối cùng)

Vì vậy, trong hầu hết các trường hợp, sẽ hợp lý hơn nếu sử dụng .thay vì text()trong biểu thức XPath.

Bạn có thể sử dụng bộ chọn XPath với trang. $ X (biểu thức) :

const linkHandlers = await page.$x("//a[contains(text(), 'Some text')]");

if (linkHandlers.length > 0) {
  await linkHandlers[0].click();
} else {
  throw new Error("Link not found");
}

Kiểm tra clickByTexttrong ý chính này để biết một ví dụ hoàn chỉnh. Nó xử lý các dấu ngoặc kép thoát, điều này hơi phức tạp với các biểu thức XPath.

Bạn cũng có thể sử dụng page.evaluate()để nhấp vào các phần tử thu được từ document.querySelectorAll()đó đã được lọc theo nội dung văn bản:

await page.evaluate(() => {
  [...document.querySelectorAll('.elements button')].find(element => element.textContent === 'Button text').click();
});

Ngoài ra, bạn có thể sử dụng page.evaluate()để nhấp vào một phần tử dựa trên nội dung văn bản của nó bằng cách sử dụng document.evaluate()và biểu thức XPath tương ứng:

await page.evaluate(() => {
  const xpath = '//*[@class="elements"]//button[contains(text(), "Button text")]';
  const result = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null);

  result.iterateNext().click();
});

đã thực hiện giải pháp nhanh chóng để có thể sử dụng các bộ chọn css nâng cao như ": chứa (văn bản)"

vì vậy sử dụng thư viện này bạn có thể

const select = require ('puppeteer-select');

const element = await select(page).getElement('button:contains(Button text)');
await element.click()

Đây là giải pháp của tôi:

let selector = 'a';
    await page.$$eval(selector, anchors => {
        anchors.map(anchor => {
            if(anchor.textContent == 'target text') {
                anchor.click();
                return
            }
        })
    });

Giải pháp là

(await page.$$eval(selector, a => a
            .filter(a => a.textContent === 'target text')
))[0].click()

Không có cú pháp bộ chọn css được hỗ trợ cho bộ chọn văn bản hoặc một tùy chọn tổ hợp, công việc của tôi cho điều này sẽ là:

await page.$$eval('selector', selectorMatched => {
    for(i in selectorMatched)
      if(selectorMatched[i].textContent === 'text string'){
          selectorMatched[i].click();
          break;//Remove this line (break statement) if you want to click on all matched elements otherwise the first element only is clicked  
        }
    });

Có rất nhiều câu trả lời gợi ý containsnhưng tôi không thấy bất kỳ động lực nào cho sự thiếu chính xác này vì trường hợp sử dụng của OP, theo tất cả các lần xuất hiện, là một kết hợp chính xác với một chuỗi mục tiêu "Button text"và một phần tử <button>Button text</button>.

Tôi muốn sử dụng chính xác hơn [text()="Button text"], tránh dương tính giả khi nút, chẳng hạn <button>Button text and more stuff</button>:

const [el] = await page.$x('//*[@class="elements"]//a[text()="Button text"]');
el && (await el.click());

Điều này dự đoán kịch bản ngược lại của câu trả lời này cố gắng dễ dãi nhất có thể.

Nhiều câu trả lời cũng bỏ sót .elements yêu cầu của lớp phụ huynh.

Tôi phải:

await this.page.$eval(this.menuSelector, elem => elem.click());