Goal

To make a web tool similar to this random reference image generator and timer for drawing practice but for cartoon images.

Method and technologies used

I tried using the Pinterest API but it asks me to enter company privacy policy so I decided to use a web scraper instead (puppeteer)

Thinking

1. Enter a query term (eg. cartoon face) and the query gets added to the url that is being scraped.
2. Query select all image tags and request for their src.
3. Display these images on the user screen along with a user defined timer functionality and other basic utilities (to skip, next, save, etc.) At the end of timer, the web tool display the next image.

Code

const puppeteer = require('puppeteer');

async function scrapeImage(url) {
const browser = await puppeteer.launch();
const page = await browser.newPage();

const page1 = await page.goto(url);

const div = await page.$x('/html/body/div[1]/div[1]/div[2]/div/div/div[2]/div[2]/div[1]/div/div/div/div[1]')

const [ image ] = await page.$$("img")

const src = await image.getProperty('src')
console.log(src)

browser.close()
}

Problem

1. I thought using Xpath would give me the desired behavior but now I am confused on how to move ahead
2. I then used querySelectorAll to select all img tags and request for their src

But I dont know the theory :(