docs: Update obsolete example (#9120)

Update the demo to work with latest website. The previous demo website
is deprecated.

Co-authored-by: Nikolay Vitkov <34244704+Lightning00Blade@users.noreply.github.com>
This commit is contained in:
Jecelyn Yeen 2023-01-17 16:04:48 +01:00 committed by GitHub
parent 04c286d5a0
commit afc7e3b770
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 44 deletions

View File

@ -127,9 +127,7 @@ and [examples](https://github.com/puppeteer/puppeteer/tree/main/examples).
#### Example #### Example
The following example searches The following example searches [developer.chrome.com](https://developer.chrome.com/) for blog posts with text "automate beyond recorder", click on the first result and print the full title of the blog post.
[developers.google.com/web](https://developers.google.com/web) for articles
tagged "Headless Chrome" and scrape results from the results page.
```ts ```ts
import puppeteer from 'puppeteer'; import puppeteer from 'puppeteer';
@ -138,30 +136,27 @@ import puppeteer from 'puppeteer';
const browser = await puppeteer.launch(); const browser = await puppeteer.launch();
const page = await browser.newPage(); const page = await browser.newPage();
await page.goto('https://developers.google.com/web/'); await page.goto('https://developer.chrome.com/');
// Type into search box. // Set screen size
await page.type('.devsite-search-field', 'Headless Chrome'); await page.setViewport({width: 1080, height: 1024});
// Wait for suggest overlay to appear and click "show all results". // Type into search box
const allResultsSelector = '.devsite-suggest-all-results'; await page.type('.search-box__input', 'automate beyond recorder');
await page.waitForSelector(allResultsSelector);
await page.click(allResultsSelector);
// Wait for the results page to load and display the results. // Wait and click on first result
const resultsSelector = '.gsc-results .gs-title'; const searchResultSelector = '.search-box__link';
await page.waitForSelector(resultsSelector); await page.waitForSelector(searchResultSelector);
await page.click(searchResultSelector);
// Extract the results from the page. // Localte the full title with a unique string
const links = await page.evaluate(resultsSelector => { const textSelector = await page.waitForSelector(
return [...document.querySelectorAll(resultsSelector)].map(anchor => { 'text/Customize and automate'
const title = anchor.textContent.split('|')[0].trim(); );
return `${title} - ${anchor.href}`; const fullTitle = await textSelector.evaluate(el => el.textContent);
});
}, resultsSelector);
// Print all the files. // Print the full title
console.log(links.join('\n')); console.log('The title of this blog post is "%s".', fullTitle);
await browser.close(); await browser.close();
})(); })();

View File

@ -127,9 +127,7 @@ and [examples](https://github.com/puppeteer/puppeteer/tree/main/examples).
#### Example #### Example
The following example searches The following example searches [developer.chrome.com](https://developer.chrome.com/) for blog posts with text "automate beyond recorder", click on the first result and print the full title of the blog post.
[developers.google.com/web](https://developers.google.com/web) for articles
tagged "Headless Chrome" and scrape results from the results page.
```ts ```ts
import puppeteer from 'puppeteer'; import puppeteer from 'puppeteer';
@ -138,30 +136,27 @@ import puppeteer from 'puppeteer';
const browser = await puppeteer.launch(); const browser = await puppeteer.launch();
const page = await browser.newPage(); const page = await browser.newPage();
await page.goto('https://developers.google.com/web/'); await page.goto('https://developer.chrome.com/');
// Type into search box. // Set screen size
await page.type('.devsite-search-field', 'Headless Chrome'); await page.setViewport({width: 1080, height: 1024});
// Wait for suggest overlay to appear and click "show all results". // Type into search box
const allResultsSelector = '.devsite-suggest-all-results'; await page.type('.search-box__input', 'automate beyond recorder');
await page.waitForSelector(allResultsSelector);
await page.click(allResultsSelector);
// Wait for the results page to load and display the results. // Wait and click on first result
const resultsSelector = '.gsc-results .gs-title'; const searchResultSelector = '.search-box__link';
await page.waitForSelector(resultsSelector); await page.waitForSelector(searchResultSelector);
await page.click(searchResultSelector);
// Extract the results from the page. // Localte the full title with a unique string
const links = await page.evaluate(resultsSelector => { const textSelector = await page.waitForSelector(
return [...document.querySelectorAll(resultsSelector)].map(anchor => { 'text/Customize and automate'
const title = anchor.textContent.split('|')[0].trim(); );
return `${title} - ${anchor.href}`; const fullTitle = await textSelector.evaluate(el => el.textContent);
});
}, resultsSelector);
// Print all the files. // Print the full title
console.log(links.join('\n')); console.log('The title of this blog post is "%s".', fullTitle);
await browser.close(); await browser.close();
})(); })();