如果有多个相同 class 类型的按钮，Puppeteer 如何指定一个按钮？

Question

我正在尝试使用 Puppeteer 单击按钮。

我的脚本中的网页有一个充当日历的网格，每个日期都是一个按钮。问题是每个日期按钮都是相同的 class 类型，所以我无法挑出一个特定的日期。

我尝试通过 aria 标签来识别按钮，但仍然无效。

然后我尝试使用 aria 标签单击“Go Forward 5 Days”按钮，但也没有用。

我读到它可以通过遍历 HTML 树中的 parent 元素然后只选择我想要的元素来使用（例如：将日历元素放入变量中然后选择我想要的 child[7])，但这确实不理想，我希望有另一种方法。

const puppeteer = require ('puppeteer');

async function Main()
{
    const browser = await puppeteer.launch({product: 'chrome', headless: false});
    const page1 = await browser.newPage();
    const url1 = 'https://www.recreation.gov/camping/campgrounds/232446/availability';
    await page1.goto(url1);
    return page1;
}

async function selectDates(page){
    const button = await page.$('aria/Go Forward 5 Days[role="button"]');
    await button.click();
}

async function startCheckout()
{
    const page = await Main();
    await selectDates(page);
}

startCheckout();

这里是 HTML 中的按钮，如果有帮助的话：

<button class="rec-availability-date" aria-label="Jun 10, 2021 - Not Available">X</button>

Answer 1

通过属性选择 DOM 元素的正确语法是：

// Click "5 days > "
await page.click('[aria-label="Go Forward 5 Days"]');

// Click a specific day:
await page.click('[aria-label="Jun 17, 2021 - Site 091 is available"]');

// Add to cart
await page.WaitForSelector('button.availability-page-book-now-button-tracker');
await page.click('button.availability-page-book-now-button-tracker');

另请参阅这些关于通过属性选择元素的文章：

如果有多个相同 class 类型的按钮，Puppeteer 如何指定一个按钮？

Puppeteer how to specify a button if there are multiple buttons of that same class type?

html

javascript

puppeteer