木偶获取父iframe的元素

时间:2020-07-22 19:23:26

标签: javascript node.js web-scraping puppeteer

我和木偶戏很挣扎。我的网页上有多个iframe。

  • 第一个(父级)在HTML元素中包含动态值。
  • 第二个包含一个产品表。

目前,我已经成功在第二个iframe上检索了产品的名称和价格。但是我也想要数量,它是全局iframe中的动态值。

要触发动态值,我必须模拟点击产品上输入的数量。

视觉帮助:

VisualHelp

我的代码:

  // Child Frame products
  const pageFrames = await page.frames();
  const productsFrame = await pageFrames.find(f => f.name() === "oOrderExpress");

  // Parent Frame with the dynamic value
  const parentFrame = await page.$('[data-is-page-iframe="true"]');
  const frame = await parentFrame.contentFrame();
  
  // Get the JSHandles of the dynamic value
  const qtySelector = await frame.$('#oQtyAvailableSimpleDiv');

  // Wait for the second iFrame loading
  await productsFrame.waitForSelector('#oucLoadingImage_oImageLoading', {hidden: true, timeout: 0});
  

  // Loop throught products and return value, passing qtySelector don't work because -> JSHandles can be evaluated only in 
  the context they were created!
  const getProducts = await productsFrame.evaluate(async (qtySelector) => {

    let items = Array.from(document.querySelectorAll('table.tableGridRow'));
    
    let results = []

    for(let [index, item] of items.slice(0, 3).entries()) {
      let quantity = qtySelector.getProperty('innerText')
      const name = item.querySelector(`div#oGridExpress_r${index}_c5`).textContent;
      const price = item.querySelector('span.gridCellPrice').textContent;
      let input = item.querySelector(`#oGridExpress_r${index}_c3`);
      
      // Click on input to trigger dynamic value on parent Iframe
      await input.click();
      await sleep(3000);

      results.push({
        name,
        price,
        quantity
      })
    }

    return results;
    
  }, qtySelector);

因此,我正在寻找一种解决方法,以尽可能从第二个iframe中的全局iframe获取动态值。也许存在另一个解决方案?

0 个答案:

没有答案