Puppeteer iFrame 处理

Question

我只是在尝试使用 Puppeteer，现在我尝试自动填写 Shopify 付款字段以进行测试。 html代码：

只需转到任何 shopify 网站，将产品添加到购物车，然后在最后一步输入付款详细信息，即可重现。

我尝试这样填写“卡号”字段：

const ccccHandle = await page.$('#number iframe');
const ccccframe = await ccccHandle.contentFrame();
await ccccframe.type('input[type=text]', cardNumberValue, { delay: 1000 });

但它不起作用。我什至在填写之前尝试了一点延迟，但没有任何改变。我已经在另一个站点上处理了这样的 iFrame，并且它有效。为什么它在这里不起作用？ 我该如何解决这个问题？

Answer 1

就像我说的，你给我们的信息这么少，回答这个问题有点困难。

不过你可以试试看。

---

未注明日期：

  let browser, page;
  let pageUrl = 'https://The-Page-Url-Here.com';

  try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(pageUrl, { waitUntil: 'domcontentloaded', timeout: 60000 });

    await page.waitForSelector('body > iframe', { timeout: 60000 });

    const elementHandle = await page.$('body > iframe');
    const frame = await elementHandle.contentFrame();
    await frame.waitForSelector('input[id="number"]');
    frame.$eval('input[id="number"]', el => el.value = 'CardNumberValueHere');
    
  } catch (error) {
    console.log(error.message);
  } finally {
    if (browser) {
      await browser.close();
      console.log('closing browser');
    }
  }

或者您使用下面的page.evaluate 示例。

  let browser, page;
  let pageUrl = 'https://The-Page-Url-Here.com';

  try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(pageUrl, { waitUntil: 'domcontentloaded', timeout: 60000 });

     await page.waitForSelector('body > iframe', { timeout: 60000 });

     await page.evaluate(() => {
       const elementHandle = document.querySelector('body > iframe');
       const frame =  elementHandle.contentWindow.document.body.querySelector('input[id="number"]');
       frame.value = 'CardNumberValueHere'
    });
    
  } catch (error) {
    console.log(error.message);
  } finally {
    if (browser) {
      await browser.close();
      console.log('closing browser');
    }
  }

或者你可以试试这个。

  let browser, page;
  let pageUrl = 'https://The-Page-Url-Here.com';

  try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(pageUrl, { waitUntil: 'domcontentloaded', timeout: 60000 });

    const iframe = await page.waitForSelector('body > iframe');
    const frame = await iframe.contentFrame();
    await frame.type('input[id="number"]', 'CardNumberValueHere');
    
  } catch (error) {
    console.log(error.message);
  } finally {
    if (browser) {
      await browser.close();
      console.log('closing browser');
    }
  }