Puppeteer 截取上一个页面而不是当前页面

Posted 2023-03-08

【中文标题】Puppeteer 截取上一个页面而不是当前页面

【英文标题】：Puppeteer screenshot the previous instead of current page

【发布时间】：2021-12-29 17:14:03

【问题描述】：

这个 Meteor 代码假设导航到一个 url 并截取具有列表的最后一页的屏幕截图。它可以正常工作，但奇怪的是这段代码调用了两次page.screenshot，首先没有await，然后在await Promise.all 中。如果我更改任何内容，它将不起作用，例如在第一个语句的开头插入 await，或删除一个 page.screenshot 语句，或重新排列它们。

知道为什么会发生这种情况以及如何解决这个问题吗？

import  Template  from 'meteor/templating';
import './main.html';


Template.info.events(
  'blur #approvalNo'(e, instance) 
    let approvalNo = $(e.target).val()
    Meteor.call('post99RVD', approvalNo)
  ,
);


import  Meteor  from 'meteor/meteor';
const puppeteer = require('puppeteer'); //maybe change const to let

const xPath = 
  'post99':   '//*[@id="LMi3L"]',
  'inputCPA': '//*[@id="searchRVDCpaNo"]',
  'type':     '//*[@id="searchRVDType"]'


Meteor.methods(
  'post99RVD': async function (approvalNo='34230') 

    const browser = await puppeteer.launch(headless: false)
    const page    = await browser.newPage()    
  
    let url = 'https://myrta.com/rvd/'
    await page.goto(url)
    await page.waitForXPath(xPath.post99)

    const post1999 = await page.$x("//a[contains(., 'Post-1999 RVD search')]");
    await post1999[0].click()
    await page.waitForXPath(xPath.type)

    //Select Car in the Type drop down manu
    await Promise.all([
      page.waitForNavigation(),
      page.select("select#searchRVDType", "Car") 
    ]);
    
    //Type the approval number and click the searh button
    await page.click('#searchRVDCpaNo')
    await page.keyboard.type(approvalNo)
    
    let searchLink = await page.$('input[]')
    await searchLink.click()
    
    // the next line took the shot that belongs to the previous page
    page.screenshot(path: '/screen_shots/page.png')
    await Promise.all ([
      page.waitForNavigation(),
      page.screenshot(path: '/screen_shots/page.png')
    
    ])
    
    // browser.close()
  
)

<template name="info">
  <input type="text" id="approvalNo" placeholder="Approval No...">

</template>

【参考方案1】：

我怀疑您误解了Promise.all 的工作原理。它确实不保证数组中元素之间的任何顺序。我怀疑您想要的实际上只是按顺序删除Promise.all 和awaiting 步骤：

await page.waitForNavigation();
// only take a screenshot once navigation has completed
await page.screenshot(path: '/screen_shots/page.png');