Puppeteer完成表单填写后如何正确点击对应的Save保存按钮

原有代码错误原因 #

• 选择器.MuiButtonBase-label不存在于目标DOM结构中，且目标按钮没有配置name="save"属性，完全无法匹配到目标元素
• 初始等待的.MuiButton-label类同时匹配Cancel、Save两个按钮的子元素，定位不精准

正确实现代码 #

下面提供3种稳定的实现方案，可根据实际场景选择：

方案1：按按钮文本匹配（最稳定，不受类名、属性调整影响） #

// 等待Save按钮加载完成后点击
await page.waitForXPath(`//button[.//span[text()='Save']]`)
const [saveBtn] = await page.$x(`//button[.//span[text()='Save']]`)
await saveBtn.click()

方案2：通过submit类型匹配（适合表单提交场景） #

目标Save按钮的type属性为submit，Cancel按钮为button，可直接通过该属性区分：

await page.waitForSelector('button[type="submit"]')
await page.click('button[type="submit"]')

方案3：通过Material UI专属类名匹配 #

两个按钮的主题类不同，Save按钮使用MuiButton-containedPrimary类，Cancel按钮使用MuiButton-outlinedPrimary类：

await page.waitForSelector('.MuiButton-containedPrimary')
await page.click('.MuiButton-containedPrimary')

内容的提问来源于stack exchange，提问作者DEV_K