木偶选择器；未选择按钮

Question

我正在尝试点击await page.click('.2 tabBtnCenter');，但它不起作用。

有人可以为value=2 tabBtnCenter 定义一个合适的 Puppeteer CSS 选择器吗？

<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

使用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");
}

Answer 2

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

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