puppeteer 操作 iFrame 內的元素

任務內容

• 【幫忙事項】：puppeteer 操作 iFrame 內的元素遇到的 bug
• 【注意事項】：
• 我想要點擊 iFrame 內的元素，點擊後會將原本的內容改成 display:none, 把點擊的元素改成 display:block
• 再對新的元素截圖。
• 但是截圖時，發現還是會截圖到原本的元素。
• 想請問有沒有什麼解法~謝謝~
• Here’s my code:
• import puppteer from 'puppeteer'
• const surfSpotData = {
• name: '沙崙',
• url: 'https://swelleye.com/surf-spots/shalun/',
• discordChannel: '948488990728785920',
• }
• webCrawler()
• async function webCrawler() {
• try {
• const browser = await puppteer.launch()
• const page = await browser.newPage()
• await page.goto(surfSpotData.url, {
• waitUntil: 'domcontentloaded',
• })
• await page.waitForSelector(
• '#surf-forecast > div.forecast-section > div.forecast-embed.w-embed.w-iframe > iframe'
• )
• const frameHandle = await page.$(
• '#surf-forecast > div.forecast-section > div.forecast-embed.w-embed.w-iframe > iframe'
• )
• const frame = await frameHandle?.contentFrame()
• if (!frame) {
• throw {
• name: 'iframeUndefined',
• message: 'No iframe found! Please check your internet connection.',
• }
• }
• await frame.waitForSelector(
• '#forecast > div.tabs-menu.w-tabs-menu > a:nth-child(2)'
• )
• await frame.click('#forecast > div.tabs-menu.w-tabs-menu > a:nth-child(2)')
• await page.waitForSelector('.forecast-section')
• await page.waitForTimeout(3000)
• const forecastChart = await page.$('.forecast-section')
• await forecastChart!.screenshot({
• path: `./src/static/test.png`,
• })
• await browser.close()
• } catch (e) {
• console.error(e)
• }
• }