web-dev-qa-db-fra.com

Comment exécuter le code de marionnettiste dans n'importe quel navigateur Web?

J'essaie de faire des raclements Web avec la marionnettiste et j'ai besoin de récupérer la valeur dans un site Web que je construis.

J'ai essayé de charger le fichier de marionnettiste dans le fichier HTML comme s'il s'agissait d'un fichier JavaScript, mais je continue à obtenir une erreur. Cependant, si je l'exécute dans une fenêtre CMD, cela fonctionne bien.

getPrice();
function getPrice() {
    const puppeteer = require('puppeteer');
    void (async () => {
        try {
            const browser = await puppeteer.launch()
            const page = await browser.newPage()              
            await page.goto('http://example.com') 
            await page.setViewport({ width: 1920, height: 938 })        
            await page.waitForSelector('.m-hotel-info > .l-container > .l-header-section > .l-m-col-2 > .m-button')
            await page.click('.m-hotel-info > .l-container > .l-header-section > .l-m-col-2 > .m-button')
            await page.waitForSelector('.modal-content')
            await page.click('.tile-hsearch-hws > .m-search-tabs > #edit-search-panel > .l-em-reset > .m-field-wrap > .l-xs-col-4 > .analytics-click')
            await page.waitForNavigation();
            await page.waitForSelector('.tile-search-filter > .l-display-none')
            const innerText = await page.evaluate(() => document.querySelector('.tile-search-filter > .l-display-none').innerText);
            console.log(innerText)
        } catch (error) {
            console.log(error)
        }

    })()
}

<html>
  <head></head>
  <body>
    <script src="../js/scraper.js" type="text/javascript"></script>
  </body>
</html>

Le résultat attendu devrait être celui-ci dans la console de Chrome:

Mais je reçois cette erreur à la place:

Qu'est-ce que je fais mal?

javascriptnode.jsweb-scrapingpuppeteer
7
Adrian2895

Cela fonctionne avec le navigateur. Le paquet s'appelle puppeteer-web, spécifiquement faite pour de tels cas.

Mais le point principal est, il doit y avoir une instance de chrome en cours d'exécution sur un serveur. Seulement, vous pouvez vous connecter à celui-ci.

Pour former le marionnettiste à l'aide de la navigation de navigation:

CLONE PUPÉTREEER REPOSITOIRE:

git clone https://github.com/GoogleChrome/puppeteer && cd puppeteer
npm install
npm run bundle

Cela créera ./utils/browser/puppeteer-web.js Fichier contenant BUPPETEREER BUNDLE.

Vous pouvez l'utiliser plus tard sur votre page Web pour piloter une autre instance de navigateur via son point d'extrémité WS:

<script src='./puppeteer-web.js'></script>
<script>
  const puppeteer = require('puppeteer');
  const browser = await puppeteer.connect({
    browserWSEndpoint: '<another-browser-ws-endpont>'
  });
  // ... drive automation ...
</script>

Je me suis amusé avec la marionnettiste et le webpack,

Voir ces réponses pour une compréhension complète de la création du serveur et plus encore,

6
Md. Abu Taher