Criar um aplicativo Node.js com Puppeteer
- Crie um arquivo package.json na raiz do seu projeto com o seguinte conteúdo
{
"name": "nodejspuppeter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node index.js",
"test": "echo \"No test specified\""
},
"dependencies": {
"ejs": "^3.1.9",
"express": "^4.18.2",
"playwright": "^1.36.2",
"puppeteer": "^22.15.0"
}
}
2. Crie um arquivo index.js na raiz do seu projeto com o seguinte conteúdo
const puppeteer = require('puppeteer');
const express = require('express');
const app = express();
const port = process.env.PORT || 9890;
// Rota básica
app.get('/', (req, res) => {
res.send('Página Inicial');
});
// Rota para capturar a captura de tela em PNG
app.get('/print', async (req, res) => {
try {
// Inicia o Puppeteer com o caminho específico do Chrome e os argumentos necessários
const browser = await puppeteer.launch({
executablePath: '/usr/bin/google-chrome', // Caminho para o Chrome instalado
ignoreDefaultArgs: ["--disable-extensions"],
args: ['--no-sandbox', '--disable-setuid-sandbox'],
headless: "new"
});
const page = await browser.newPage();
await page.goto('https://integrator.com.br', { waitUntil: 'networkidle2' });
// Captura de tela da página
const screenshot = await page.screenshot();
await browser.close();
// Configura o tipo de resposta como imagem PNG e envia a captura de tela
res.type('image/png').send(screenshot);
} catch (error) {
console.error("Erro ao capturar a imagem:", error);
res.status(500).send("Erro ao capturar a imagem.");
}
});
// Inicia o servidor na porta especificada
app.listen(port, () => {
console.log(`Server started at http://localhost:${port}`);
});
3. Crie um arquivo exemple.js na raiz do seu projeto com o seguinte conteúdo
const puppeteer = require('puppeteer');
async function extractAndCapture() {
const browser = await puppeteer.launch({ headless: true, headless: "new" });
const page = await browser.newPage();
await page.goto('https://www.integrator.com.br'); // Substitua 'example.com' pelo site desejado
// Capture screenshot
await page.screenshot({ path: 'screenshot.png' });
// Extract title and description
const title = await page.title();
const description = await page.$eval('meta[name="description"]', meta => meta.content);
console.log('Title:', title);
console.log('Description:', description);
await browser.close();
}
extractAndCapture().catch(console.error);
3. Crie um arquivo result.ejs na raiz do seu projeto com o seguinte conteúdo
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resultado da Captura</title>
</head>
<body>
<h1>Resultado da Captura</h1>
<h2>Título: <%= title %></h2>
<p>Descrição: <%= description %></p>
<h3>Captura de Tela:</h3>
<img src="data:image/png;base64,<%= screenshot %>" alt="Screenshot">
</body>
</html>
Com o aplicativo registrado e iniciado corretamente com sucesso, temos o acesso testado e 100% funcional, no qual demonstramos em imagens abaixo:
