So far in this series, we only visited one page and took a screenshot or extracted its data. But you can actually navigate a page by clicking on elements, typing in fields and hitting keys.
So let's make the following plan:
We want to
- visit the dev.to homepage
- search for "puppeteer navigating" to find some articles about our current topic
- and click on that very article
On our way, we'll take a screenshot of every step.
-
home.pngfor the homepage -
search-results.pngfor the search results page - and
article.pngfor this article
This is the homepage
These are the search results
And this is our article
And this is how it's done:
// npm i puppeteer
const puppeteer = require('puppeteer');
// we're using async/await - so we need an async function, that we can run
const run = async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// let's navigate to the dev.to homepage
await page.goto('https://dev.to');
// and let's take a screenshot
await page.screenshot({
path: 'home.png',
});
// and enter "Puppeteer navigating" in the search input field
await page.type('#nav-search', 'Puppeteer navigating');
// there's no search button, so we have to trigger the search by hitting the "Enter" key
await page.type('#nav-search', String.fromCharCode(13));
// let's wait until the search results are loaded
await page.waitForSelector(
'.stories-search .single-article .index-article-link'
);
// and take a screenshot of the search results
await page.screenshot({
path: 'search_results.png',
});
// select an article and click on the headline
// if there are multiple elements satisfying the selector, the first one will be clicked
await page.click('.index-article-link h3');
// this time let's wait 2 seconds, which we assume is enough time for the page to load
await page.waitFor(2000);
// and take another screenshot
await page.screenshot({
path: 'article.png',
});
// we're done; close the browser
await browser.close();
};
// run the async function
run();
Top comments (0)