-1

Estou criando uma aplicação para baixar uma imagem do Instagram pela URL e estou utilizando o pacote puppeteer para realizar esta tarefa.

Dentro da chamada do método evaluate (método para rodar um código JS na página) eu tento obter e retornar um elemento de imagem.

O problema é que sempre que eu tento obter a imagem, eu acabo recebendo null como resultado. Veja o meu código abaixo:

const puppeteer = require("puppeteer");
const url = "https://www.instagram.com/p/<image_code>/";

async function getImageFrom(url) {

    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto(url);

    const image = await page.evaluate(function() {
        return document.querySelector(".KL4Bh > img");
    });

    await browser.close();
    return image;
}

getImageFrom(url).then((image) => {
    console.log(image);
});

O que eu estou fazendo de errado? Já tentei utilizar o querySelectorAll buscando apenas por elementos com a tag <img> mas ele também me retorna apenas um array vazio.

Edit: Eu não sei o que aconteceu, mas o método está retornando undefined agora.

4
  • Este seletor (.KL4Bh > img) não me parece muito confiável e duradouro... É bem típico do Facebook mudar esse tipo de seletor com uma certa frequência. Apesar disso, não creio que seja o problema... Além disso, o que seria None? :P 5/06/2020 às 1:28
  • Ops, foi mal eu confundi null com None kkk (mania de Python xD). Bom se o Instagram faz isso eu não sei, mas eu testei pegar o elemento direto no console do navegador e funcionou. Além disso, eu também testei obter apenas os elementos de <img> como eu já havia dito na resposta e mesmo assim o puppeteer só retornava um array vazio. 5/06/2020 às 1:36
  • Pelo o que pude ver aqui, parece que não é um problema com o Puppeteer. O Instagram insere a imagem via JavaScript. Se você tentar baixar o HTML usando alguma ferramenta como cURL, verá que o seletor que você informou não estará lá. Penso então que seja colocado via JavaScript. Eu não sei se o método evaluate espera que todos os JavaScripts da página sejam devidamente finalizados, mas pelo o que me parece não é o caso. Vale investigar isso. 5/06/2020 às 1:38
  • Mas o objetivo do puppeteer até onde eu entendi é ser uma espécie de selenium onde ele renderiza a página para ser depois manipulada. Então mesmo que as imagens sejam adicionadas via JavaScript, o puppeteer deveria renderizar isto e me devolver os elementos. 5/06/2020 às 1:40

2 Respostas 2

4

Você provavelmente NÃO esta esperando o load completar ou pode ser que a forma como o instagram carregue seja dinamica e até depois do load, cada site faz de uma forma.

Troque isso:

const image = await page.evaluate(function() {
    return document.querySelector(".KL4Bh > img");
});

Por:

page.waitForSelector(selector[, options])

Para esperar o elemento "existir" e que já é uma função nativa (o evaluete seria JS dentro do webview gerado, o que é retrabalho desnecessário), exemplo:

page.waitForSelector('.KL4Bh > img');

Ou ao invés de trocar sete a propriedade waitUntil em options

page.goto(url[, options])

E nele aplicar o valor networkidle2 (que seria como o load e também não há mais de 2 conexões de rede por pelo menos 500ms), exemplo:

await page.goto('https://site.com', { waitUntil: 'load' });
10
  • Como assim trocar o goto? Não é este método que faz abrir uma página por uma URL? Eu tentei utilizar o waitForSelector e ele ficou esperando por muito tempo até que chegou uma hora em que o método gerou um erro dizendo que o tempo de 30000ms tinha sido excedido. Também tentei utilizar a opção waitUntil: 'load' mas ainda assim não funcionou. 5/06/2020 às 3:45
  • Guilherme, uma coisa que estou vendo agora é que o resultado do evaluate não é mais null e sim undefined. Eu não sei quando esse resultado mudou, mas agora é isso que ele devolve. 5/06/2020 às 4:03
  • @JeanExtreme002 não era trocar o goto, corrigi a resposta, mas de qualquer forma experimente trocar o evaluete por page.waitForSelector ... pois evaluete é pra executar um javascript e não tem pq fazer isto se já tem método nativo.
    – Syzoth
    5/06/2020 às 4:08
  • Este método funcionou, mas como posso obter os atributos do elemento como o src ? E se possível, poderia explicar na resposta o porquê da opção waitUntil não funcionar ? Eu gostaria de saber isso para caso eu precise executar o evaluate futuramente. 5/06/2020 às 4:11
  • @JeanExtreme002 pode ter sido algo que você fez de errado, não sei, pode ser que o instagram mesmo após o load ainda tenha que carregar algo ... afinal, cada site trabalha de um jeito e inventa a propria moda, mesmo que as vezes seja meio sem noção (não tenho como testar se é isso mesmo).... Pegar o SRC acho que deve ser algo como const propertyHandle = await element.getProperty('src');, o element é o valor retornado pelo page.waitForSelector
    – Syzoth
    5/06/2020 às 4:47
1

O método evaluate está retornando o valor null porque talvez o elemento não exista na página. Seja porque não foi carregado ainda ou porque ele realmente não existe na página atual mesmo tendo carregado todo o código JS.

A outra resposta diz para definir o valor "load" para a opção waitUntil, porém isso é redundante já que segundo a documentação dessa API, por padrão essa opção será "load".

Ainda assim esse não é o problema principal do seu código. Mesmo que o elemento tenha carregado na página, o método evaluate deve retornar undefined se tudo correr bem. Isso porque você está tentando retornar um objeto não serializável.

Se o seu objetivo é apenas obter o atributo src ou outro desse elemento que retorne uma string ou um outro valor serializável, faça-o dentro do método e o retorne como no código abaixo:

const image = await page.evaluate(function() {
    return document.querySelector(".KL4Bh > img").src;
});

Se você precisar do elemento por inteiro e não apenas de um atributo ou simples valor, utilize o método waitForSelector como é mostrado na outra resposta. O que esse método faz é esperar e retornar um elemento da página com o seletor que você definiu. Veja o código abaixo:

const image_element = await page.waitForSelector('.KL4Bh > img');

Este método irá retornar um objeto de ElementHandle. Para obter os atributos deste elemento, utilize o método getProperty(attr) que retorna um objeto de JSHandle.

Após ter obtido este objeto, utilize o método jsonValue() para obter o valor do atributo.

const image_element = await page.waitForSelector('.KL4Bh > img');
const image_property = await image_element.getProperty("src");

const src = await image_property.jsonValue();

Lembre-se de que todas essas ações devem ser feitas com o browser aberto. Sendo assim, você não pode fechar o browser antes de obter a propriedade da imagem ou receberá um erro.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .