傀儡选择器； 未选择按钮

Question

I am trying to click on await page.click('.2 tabBtnCenter'); , but it is not working.

Can someone define a proper Puppeteer CSS selector for value=2 tabBtnCenter ?

<div id="headerTab">
    <ul>
        <li value="0">
            <div class="tabBtnLeft"></div>
            <div class="tabBtnCenter">Status</div>
            <div class="tabBtnRight"></div>
        </li>
        <li value="1">
            <div class="tabBtnLeft"></div>
            <div class="tabBtnCenter">WAN</div>
            <div class="tabBtnRight"></div>
        </li>
        <li value="2">
            <div class="tabBtnLeft"></div>
            <div class="tabBtnCenter">LAN</div>
            <div class="tabBtnRight"></div>
        </li>
    </ul>
</div>

Answer 1

您可以使用以下选择器单击您使用page.click()指定的元素：

await page.click('[value="2"] > .tabBtnCenter');

Answer 2

Using xpath :

const sel = await page.$x("//div[text()='LAN' and @class='tabBtnCenter']");

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