to solve this thats what i did :

• check if all tiles are loaded by comparing the total number of tiles (.leaflet-tile) with the loaded tiles (.leaflet-tile-loaded). Wait for all tiles to be fully loaded before proceeding.

await page.evaluate(() => {
            return new Promise((resolve) => {
                const checkTilesLoaded = () => {
                    const totalTiles = document.querySelectorAll('.leaflet-tile').length;
                    const loadedTiles = document.querySelectorAll('.leaflet-tile-loaded').length;

                    console.log(`Tiles loaded: ${loadedTiles}/${totalTiles}`);

                    if (loadedTiles === totalTiles) {
                        console.log('All tiles are fully loaded!');
                        resolve();
                    } else {
                        setTimeout(checkTilesLoaded, 500); // Retry every 500ms
                    }
                };

                checkTilesLoaded();
            });
        });`

• apply custom styles for the print layout using @media print to adjust the page size for the PDF therefore the PDF is like the web application now :

await page.evaluate(() => {
            const style = document.createElement('style');
            style.innerHTML = `
    @media print {
      body {
        width: 1900px;
        height: 1200px;
      }
    }
  `;