Puppeteer screenshot the previous instead of current page-CodePudding

This Meteor code suppose to navigates to a url and take a screenshot of the last page which has a list. It works fine as is but the strange thing about this code that it calls page.screenshot twice, first without the await then inside an await Promise.all. If I change any thing it will not work, like insert await at the beginning of the first statement, or remove one of page.screenshot statements, or re-arrange them.

Any idea why this is happening and how to fix this issue please?

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[alt="Search"]')
    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>

CodePudding user response：

I suspect that you are misunderstanding how Promise.all works. It does not guarantee any sequencing among the elements in the array. I suspect what you want is really just removing the Promise.all and awaiting the steps in sequence:

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