docs: update examples to use import

Closes #8821

docs/api/puppeteer.browser.md

@@ -25,7 +25,7 @@ The constructor for this class is marked as internal. Third-party code should no
 An example of using a [Browser](./puppeteer.browser.md) to create a [Page](./puppeteer.page.md):
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 
 (async () => {
   const browser = await puppeteer.launch();
@@ -40,7 +40,7 @@ const puppeteer = require('puppeteer');
 An example of disconnecting from and reconnecting to a [Browser](./puppeteer.browser.md):
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 
 (async () => {
   const browser = await puppeteer.launch();

docs/api/puppeteer.dialog.md

@@ -19,7 +19,7 @@ The constructor for this class is marked as internal. Third-party code should no
 ## Example
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 
 (async () => {
   const browser = await puppeteer.launch();

docs/api/puppeteer.elementhandle.md

@@ -19,7 +19,7 @@ export declare class ElementHandle<ElementType extends Node = Element> extends J
 ElementHandles can be created with the [Page.$()](./puppeteer.page._.md) method.
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 
 (async () => {
   const browser = await puppeteer.launch();

docs/api/puppeteer.elementhandle.waitforselector.md

@@ -39,7 +39,7 @@ Throws if an element matching the given selector doesn't appear.
 ## Example
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 
 (async () => {
   const browser = await puppeteer.launch();

docs/api/puppeteer.elementhandle.waitforxpath.md

@@ -19,7 +19,7 @@ sidebar_label: ElementHandle.waitForXPath
 > This method works across navigation.
 >
 > ```ts
-> const puppeteer = require('puppeteer');
+> import puppeteer from 'puppeteer';
 > (async () => {
 >   const browser = await puppeteer.launch();
 >   const page = await browser.newPage();

docs/api/puppeteer.frame.md

@@ -31,7 +31,7 @@ At any point in time, [pages](./puppeteer.page.md) expose their current frame tr
 An example of dumping frame tree:
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 
 (async () => {
   const browser = await puppeteer.launch();

docs/api/puppeteer.frame.waitforfunction.md

@@ -38,7 +38,7 @@ the promise which resolve when the `pageFunction` returns a truthy value.
 The `waitForFunction` can be used to observe viewport size change:
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 
 (async () => {
 .  const browser = await puppeteer.launch();

docs/api/puppeteer.frame.waitforselector.md

@@ -39,7 +39,7 @@ Throws if an element matching the given selector doesn't appear.
 ## Example
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 
 (async () => {
   const browser = await puppeteer.launch();

docs/api/puppeteer.page.emulatevisiondeficiency.md

@@ -29,7 +29,7 @@ Promise<void>
 ## Example
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 
 (async () => {
   const browser = await puppeteer.launch();

docs/api/puppeteer.page.exposefunction.md

@@ -45,8 +45,8 @@ Promise<void>
 An example of adding an `md5` function into the page:
 
 ```ts
-const puppeteer = require('puppeteer');
-const crypto = require('crypto');
+import puppeteer from 'puppeteer';
+import crypto from 'crypto';
 
 (async () => {
   const browser = await puppeteer.launch();
@@ -70,8 +70,8 @@ const crypto = require('crypto');
 An example of adding a `window.readfile` function into the page:
 
 ```ts
-const puppeteer = require('puppeteer');
-const fs = require('fs');
+import puppeteer from 'puppeteer';
+import fs from 'fs';
 
 (async () => {
   const browser = await puppeteer.launch();

docs/api/puppeteer.page.md

@@ -29,7 +29,7 @@ The constructor for this class is marked as internal. Third-party code should no
 This example creates a page, navigates it to a URL, and then saves a screenshot:
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 
 (async () => {
   const browser = await puppeteer.launch();
@@ -157,7 +157,7 @@ page.off('request', logRequest);
 | [waitForSelector(selector, options)](./puppeteer.page.waitforselector.md)                   |           | <p>Wait for the <code>selector</code> to appear in page. If at the moment of calling the method the <code>selector</code> already exists, the method will return immediately. If the <code>selector</code> doesn't appear after the <code>timeout</code> milliseconds of waiting, the function will throw.</p><p>This method works across navigations:</p>                                                                                                                                                                                                                                              |
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 (async () => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
@@ -181,7 +181,7 @@ const puppeteer = require('puppeteer');
 | [waitForXPath(xpath, options)](./puppeteer.page.waitforxpath.md) | | <p>Wait for the <code>xpath</code> to appear in page. If at the moment of calling the method the <code>xpath</code> already exists, the method will return immediately. If the <code>xpath</code> doesn't appear after the <code>timeout</code> milliseconds of waiting, the function will throw.</p><p>This method works across navigation</p>
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 (async () => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();

docs/api/puppeteer.page.setrequestinterception.md

@@ -33,7 +33,7 @@ Promise<void>
 An example of a naïve request interceptor that aborts all image requests:
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 (async () => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();

docs/api/puppeteer.page.waitforfunction.md

@@ -38,7 +38,7 @@ Promise<[HandleFor](./puppeteer.handlefor.md)<Awaited<ReturnType<Fun
 The [Page.waitForFunction()](./puppeteer.page.waitforfunction.md) can be used to observe viewport size change:
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 (async () => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();

docs/api/puppeteer.page.waitforselector.md

@@ -9,7 +9,7 @@ Wait for the `selector` to appear in page. If at the moment of calling the metho
 This method works across navigations:
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 (async () => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();

docs/api/puppeteer.page.waitforxpath.md

@@ -9,7 +9,7 @@ Wait for the `xpath` to appear in page. If at the moment of calling the method t
 This method works across navigation
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 (async () => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();

docs/api/puppeteer.puppeteernode.md

@@ -29,7 +29,7 @@ The constructor for this class is marked as internal. Third-party code should no
 The following is a typical example of using Puppeteer to drive automation:
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 
 (async () => {
   const browser = await puppeteer.launch();

docs/guides/chrome-extensions.md

@@ -14,10 +14,11 @@ The following is code for getting a handle to the
 an extension whose source is located in `./my-extension`:
 
 ```ts
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
+import path from 'path';
 
 (async () => {
-  const pathToExtension = require('path').join(__dirname, 'my-extension');
+  const pathToExtension = path.join(process.cwd(), 'my-extension');
   const browser = await puppeteer.launch({
     headless: 'chrome',
     args: [

docs/guides/request-interception.md

@@ -6,7 +6,7 @@ continued, responded or aborted.
 An example of a naïve request interceptor that aborts all image requests:
 
 ```js
-const puppeteer = require('puppeteer');
+import puppeteer from 'puppeteer';
 
 (async () => {
   const browser = await puppeteer.launch();

packages/puppeteer-core/src/api/Browser.ts

@@ -182,7 +182,7 @@ export const enum BrowserEmittedEvents {
  * An example of using a {@link Browser} to create a {@link Page}:
  *
  * ```ts
- * const puppeteer = require('puppeteer');
+ * import puppeteer from 'puppeteer';
  *
  * (async () => {
  *   const browser = await puppeteer.launch();
@@ -196,7 +196,7 @@ export const enum BrowserEmittedEvents {
  * An example of disconnecting from and reconnecting to a {@link Browser}:
  *
  * ```ts
- * const puppeteer = require('puppeteer');
+ * import puppeteer from 'puppeteer';
  *
  * (async () => {
  *   const browser = await puppeteer.launch();

packages/puppeteer-core/src/api/Page.ts

@@ -390,7 +390,7 @@ export interface PageEventObject {
  * This example creates a page, navigates it to a URL, and then saves a screenshot:
  *
  * ```ts
- * const puppeteer = require('puppeteer');
+ * import puppeteer from 'puppeteer';
  *
  * (async () => {
  *   const browser = await puppeteer.launch();
@@ -636,7 +636,7 @@ export class Page extends EventEmitter {
    * An example of a naïve request interceptor that aborts all image requests:
    *
    * ```ts
-   * const puppeteer = require('puppeteer');
+   * import puppeteer from 'puppeteer';
    * (async () => {
    *   const browser = await puppeteer.launch();
    *   const page = await browser.newPage();
@@ -1161,8 +1161,8 @@ export class Page extends EventEmitter {
    * An example of adding an `md5` function into the page:
    *
    * ```ts
-   * const puppeteer = require('puppeteer');
-   * const crypto = require('crypto');
+   * import puppeteer from 'puppeteer';
+   * import crypto from 'crypto';
    *
    * (async () => {
    *   const browser = await puppeteer.launch();
@@ -1185,8 +1185,8 @@ export class Page extends EventEmitter {
    * An example of adding a `window.readfile` function into the page:
    *
    * ```ts
-   * const puppeteer = require('puppeteer');
-   * const fs = require('fs');
+   * import puppeteer from 'puppeteer';
+   * import fs from 'fs';
    *
    * (async () => {
    *   const browser = await puppeteer.launch();
@@ -1865,7 +1865,7 @@ export class Page extends EventEmitter {
    * @example
    *
    * ```ts
-   * const puppeteer = require('puppeteer');
+   * import puppeteer from 'puppeteer';
    *
    * (async () => {
    *   const browser = await puppeteer.launch();
@@ -2371,7 +2371,7 @@ export class Page extends EventEmitter {
    * This method works across navigations:
    *
    * ```ts
-   * const puppeteer = require('puppeteer');
+   * import puppeteer from 'puppeteer';
    * (async () => {
    *   const browser = await puppeteer.launch();
    *   const page = await browser.newPage();
@@ -2431,7 +2431,7 @@ export class Page extends EventEmitter {
    * This method works across navigation
    *
    * ```ts
-   * const puppeteer = require('puppeteer');
+   * import puppeteer from 'puppeteer';
    * (async () => {
    *   const browser = await puppeteer.launch();
    *   const page = await browser.newPage();
@@ -2491,7 +2491,7 @@ export class Page extends EventEmitter {
    * The {@link Page.waitForFunction} can be used to observe viewport size change:
    *
    * ```ts
-   * const puppeteer = require('puppeteer');
+   * import puppeteer from 'puppeteer';
    * (async () => {
    *   const browser = await puppeteer.launch();
    *   const page = await browser.newPage();

packages/puppeteer-core/src/common/Dialog.ts

@@ -26,7 +26,7 @@ import {Protocol} from 'devtools-protocol';
  * @example
  *
  * ```ts
- * const puppeteer = require('puppeteer');
+ * import puppeteer from 'puppeteer';
  *
  * (async () => {
  *   const browser = await puppeteer.launch();

packages/puppeteer-core/src/common/ElementHandle.ts

@@ -53,7 +53,7 @@ const applyOffsetsToQuad = (
  * ElementHandles can be created with the {@link Page.$} method.
  *
  * ```ts
- * const puppeteer = require('puppeteer');
+ * import puppeteer from 'puppeteer';
  *
  * (async () => {
  *   const browser = await puppeteer.launch();
@@ -296,7 +296,7 @@ export class ElementHandle<
    * @example
    *
    * ```ts
-   * const puppeteer = require('puppeteer');
+   * import puppeteer from 'puppeteer';
    *
    * (async () => {
    *   const browser = await puppeteer.launch();
@@ -356,7 +356,7 @@ export class ElementHandle<
    * This method works across navigation.
    *
    * ```ts
-   * const puppeteer = require('puppeteer');
+   * import puppeteer from 'puppeteer';
    * (async () => {
    *   const browser = await puppeteer.launch();
    *   const page = await browser.newPage();

packages/puppeteer-core/src/common/Frame.ts

@@ -127,7 +127,7 @@ export interface FrameAddStyleTagOptions {
  * An example of dumping frame tree:
  *
  * ```ts
- * const puppeteer = require('puppeteer');
+ * import puppeteer from 'puppeteer';
  *
  * (async () => {
  *   const browser = await puppeteer.launch();
@@ -569,7 +569,7 @@ export class Frame {
    * @example
    *
    * ```ts
-   * const puppeteer = require('puppeteer');
+   * import puppeteer from 'puppeteer';
    *
    * (async () => {
    *   const browser = await puppeteer.launch();
@@ -647,7 +647,7 @@ export class Frame {
    * The `waitForFunction` can be used to observe viewport size change:
    *
    * ```ts
-   * const puppeteer = require('puppeteer');
+   * import puppeteer from 'puppeteer';
    *
    * (async () => {
    * .  const browser = await puppeteer.launch();

packages/puppeteer-core/src/node/PuppeteerNode.ts

@@ -64,7 +64,7 @@ export interface PuppeteerLaunchOptions
  * The following is a typical example of using Puppeteer to drive automation:
  *
  * ```ts
- * const puppeteer = require('puppeteer');
+ * import puppeteer from 'puppeteer';
  *
  * (async () => {
  *   const browser = await puppeteer.launch();