Skip to content

Commit

Permalink
chore(agnostification): split up root Puppeteer class (#6504)
Browse files Browse the repository at this point in the history
The `Puppeteer` class had two concerns:

* connect to an existing browser
* launch a new browser

The first of those concerns is needed in all environments, but the
second is only needed in Node.
#6484 landing enabled us to
pull the `Puppeteer` class apart into two:

1. `Puppeteer` which hosts the behaviour for connecting to existing
   browsers.
2. `PuppeteerNode`, which extends `Puppeteer` and also adds the ability
   to launch a new browser.

This is a non-breaking change, because Node users will still get an
instance of a class with all the methods they expect, but it'll be a
`PuppeteerNode` rather than `Puppeteer`. I don't expect this to cause
people any issues.

We also now have new files that are effectively the entry points for
Puppeteer:

* `node.ts`: the main entry point for Puppeteer on Node.
* `web.ts`: the main entry point for Puppeteer on the web.
* `node-puppeteer-core.ts`: for those using puppeteer-core (which only
  exists in Node, not on the web).
  • Loading branch information
jackfranklin committed Oct 13, 2020
1 parent f3086d7 commit e655bb6
Show file tree
Hide file tree
Showing 36 changed files with 549 additions and 281 deletions.
2 changes: 1 addition & 1 deletion cjs-entry-core.js
Expand Up @@ -25,5 +25,5 @@
* This means that we can publish to CJS and ESM whilst maintaining the expected
* import behaviour for CJS and ESM users.
*/
const puppeteerExport = require('./lib/cjs/puppeteer/index-core');
const puppeteerExport = require('./lib/cjs/puppeteer/node-puppeteer-core');
module.exports = puppeteerExport.default;
2 changes: 1 addition & 1 deletion cjs-entry.js
Expand Up @@ -25,5 +25,5 @@
* This means that we can publish to CJS and ESM whilst maintaining the expected
* import behaviour for CJS and ESM users.
*/
const puppeteerExport = require('./lib/cjs/puppeteer/index');
const puppeteerExport = require('./lib/cjs/puppeteer/node');
module.exports = puppeteerExport.default;
2 changes: 1 addition & 1 deletion new-docs/puppeteer.browser.md
Expand Up @@ -4,7 +4,7 @@

## Browser class

A Browser is created when Puppeteer connects to a Chromium instance, either through [Puppeteer.launch()](./puppeteer.puppeteer.launch.md) or [Puppeteer.connect()](./puppeteer.puppeteer.connect.md)<!-- -->.
A Browser is created when Puppeteer connects to a Chromium instance, either through [PuppeteerNode.launch()](./puppeteer.puppeteernode.launch.md) or [Puppeteer.connect()](./puppeteer.puppeteer.connect.md)<!-- -->.

<b>Signature:</b>

Expand Down
11 changes: 11 additions & 0 deletions new-docs/puppeteer.connectoptions.browserurl.md
@@ -0,0 +1,11 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [ConnectOptions](./puppeteer.connectoptions.md) &gt; [browserURL](./puppeteer.connectoptions.browserurl.md)

## ConnectOptions.browserURL property

<b>Signature:</b>

```typescript
browserURL?: string;
```
11 changes: 11 additions & 0 deletions new-docs/puppeteer.connectoptions.browserwsendpoint.md
@@ -0,0 +1,11 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [ConnectOptions](./puppeteer.connectoptions.md) &gt; [browserWSEndpoint](./puppeteer.connectoptions.browserwsendpoint.md)

## ConnectOptions.browserWSEndpoint property

<b>Signature:</b>

```typescript
browserWSEndpoint?: string;
```
22 changes: 22 additions & 0 deletions new-docs/puppeteer.connectoptions.md
@@ -0,0 +1,22 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [ConnectOptions](./puppeteer.connectoptions.md)

## ConnectOptions interface

<b>Signature:</b>

```typescript
export interface ConnectOptions extends BrowserOptions
```
<b>Extends:</b> [BrowserOptions](./puppeteer.browseroptions.md)
## Properties
| Property | Type | Description |
| --- | --- | --- |
| [browserURL](./puppeteer.connectoptions.browserurl.md) | string | |
| [browserWSEndpoint](./puppeteer.connectoptions.browserwsendpoint.md) | string | |
| [product](./puppeteer.connectoptions.product.md) | [Product](./puppeteer.product.md) | |
| [transport](./puppeteer.connectoptions.transport.md) | ConnectionTransport | |
11 changes: 11 additions & 0 deletions new-docs/puppeteer.connectoptions.product.md
@@ -0,0 +1,11 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [ConnectOptions](./puppeteer.connectoptions.md) &gt; [product](./puppeteer.connectoptions.product.md)

## ConnectOptions.product property

<b>Signature:</b>

```typescript
product?: Product;
```
11 changes: 11 additions & 0 deletions new-docs/puppeteer.connectoptions.transport.md
@@ -0,0 +1,11 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [ConnectOptions](./puppeteer.connectoptions.md) &gt; [transport](./puppeteer.connectoptions.transport.md)

## ConnectOptions.transport property

<b>Signature:</b>

```typescript
transport?: ConnectionTransport;
```
6 changes: 4 additions & 2 deletions new-docs/puppeteer.md
Expand Up @@ -9,7 +9,7 @@
| Class | Description |
| --- | --- |
| [Accessibility](./puppeteer.accessibility.md) | The Accessibility class provides methods for inspecting Chromium's accessibility tree. The accessibility tree is used by assistive technology such as [screen readers](https://en.wikipedia.org/wiki/Screen_reader) or [switches](https://en.wikipedia.org/wiki/Switch_access)<!-- -->. |
| [Browser](./puppeteer.browser.md) | A Browser is created when Puppeteer connects to a Chromium instance, either through [Puppeteer.launch()](./puppeteer.puppeteer.launch.md) or [Puppeteer.connect()](./puppeteer.puppeteer.connect.md)<!-- -->. |
| [Browser](./puppeteer.browser.md) | A Browser is created when Puppeteer connects to a Chromium instance, either through [PuppeteerNode.launch()](./puppeteer.puppeteernode.launch.md) or [Puppeteer.connect()](./puppeteer.puppeteer.connect.md)<!-- -->. |
| [BrowserContext](./puppeteer.browsercontext.md) | BrowserContexts provide a way to operate multiple independent browser sessions. When a browser is launched, it has a single BrowserContext used by default. The method [Browser.newPage](./puppeteer.browser.newpage.md) creates a page in the default browser context. |
| [BrowserFetcher](./puppeteer.browserfetcher.md) | BrowserFetcher can download and manage different versions of Chromium and Firefox. |
| [CDPSession](./puppeteer.cdpsession.md) | The <code>CDPSession</code> instances are used to talk raw Chrome Devtools Protocol. |
Expand All @@ -27,7 +27,8 @@
| [Keyboard](./puppeteer.keyboard.md) | Keyboard provides an api for managing a virtual keyboard. The high level api is [Keyboard.type()](./puppeteer.keyboard.type.md)<!-- -->, which takes raw characters and generates proper keydown, keypress/input, and keyup events on your page. |
| [Mouse](./puppeteer.mouse.md) | The Mouse class operates in main-frame CSS pixels relative to the top-left corner of the viewport. |
| [Page](./puppeteer.page.md) | Page provides methods to interact with a single tab or [extension background page](https://developer.chrome.com/extensions/background_pages) in Chromium. |
| [Puppeteer](./puppeteer.puppeteer.md) | The main Puppeteer class. Provides the [launch](./puppeteer.puppeteer.launch.md) method to launch a browser.<!-- -->When you <code>require</code> or <code>import</code> the Puppeteer npm package you get back an instance of this class. |
| [Puppeteer](./puppeteer.puppeteer.md) | The main Puppeteer class.<!-- -->IMPORTANT: if you are using Puppeteer in a Node environment, you will get an instance of [PuppeteerNode](./puppeteer.puppeteernode.md) when you import or require <code>puppeteer</code>. That class extends <code>Puppeteer</code>, so has all the methods documented below as well as all that are defined on [PuppeteerNode](./puppeteer.puppeteernode.md)<!-- -->. |
| [PuppeteerNode](./puppeteer.puppeteernode.md) | Extends the main [Puppeteer](./puppeteer.puppeteer.md) class with Node specific behaviour for fetching and downloading browsers.<!-- -->If you're using Puppeteer in a Node environment, this is the class you'll get when you run <code>require('puppeteer')</code> (or the equivalent ES <code>import</code>). |
| [SecurityDetails](./puppeteer.securitydetails.md) | The SecurityDetails class represents the security details of a response that was received over a secure connection. |
| [Target](./puppeteer.target.md) | |
| [TimeoutError](./puppeteer.timeouterror.md) | TimeoutError is emitted whenever certain operations are terminated due to timeout. |
Expand All @@ -54,6 +55,7 @@
| [BrowserOptions](./puppeteer.browseroptions.md) | Generic browser options that can be passed when launching any browser. |
| [ChromeArgOptions](./puppeteer.chromeargoptions.md) | Launcher options that only apply to Chrome. |
| [ClickOptions](./puppeteer.clickoptions.md) | |
| [ConnectOptions](./puppeteer.connectoptions.md) | |
| [ConsoleMessageLocation](./puppeteer.consolemessagelocation.md) | |
| [ContinueRequestOverrides](./puppeteer.continuerequestoverrides.md) | |
| [CoverageEntry](./puppeteer.coverageentry.md) | The CoverageEntry class represents one entry of the coverage report. |
Expand Down
11 changes: 11 additions & 0 deletions new-docs/puppeteer.puppeteer._changedproduct.md
@@ -0,0 +1,11 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [Puppeteer](./puppeteer.puppeteer.md) &gt; [\_changedProduct](./puppeteer.puppeteer._changedproduct.md)

## Puppeteer.\_changedProduct property

<b>Signature:</b>

```typescript
protected _changedProduct: boolean;
```
11 changes: 11 additions & 0 deletions new-docs/puppeteer.puppeteer._ispuppeteercore.md
@@ -0,0 +1,11 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [Puppeteer](./puppeteer.puppeteer.md) &gt; [\_isPuppeteerCore](./puppeteer.puppeteer._ispuppeteercore.md)

## Puppeteer.\_isPuppeteerCore property

<b>Signature:</b>

```typescript
protected _isPuppeteerCore: boolean;
```
9 changes: 2 additions & 7 deletions new-docs/puppeteer.puppeteer.connect.md
Expand Up @@ -9,19 +9,14 @@ This method attaches Puppeteer to an existing browser instance.
<b>Signature:</b>

```typescript
connect(options: BrowserOptions & {
browserWSEndpoint?: string;
browserURL?: string;
transport?: ConnectionTransport;
product?: Product;
}): Promise<Browser>;
connect(options: ConnectOptions): Promise<Browser>;
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| options | [BrowserOptions](./puppeteer.browseroptions.md) &amp; { browserWSEndpoint?: string; browserURL?: string; transport?: ConnectionTransport; product?: [Product](./puppeteer.product.md)<!-- -->; } | Set of configurable options to set on the browser. |
| options | [ConnectOptions](./puppeteer.connectoptions.md) | Set of configurable options to set on the browser. |

<b>Returns:</b>

Expand Down
29 changes: 4 additions & 25 deletions new-docs/puppeteer.puppeteer.md
Expand Up @@ -4,9 +4,9 @@

## Puppeteer class

The main Puppeteer class. Provides the [launch](./puppeteer.puppeteer.launch.md) method to launch a browser.
The main Puppeteer class.

When you `require` or `import` the Puppeteer npm package you get back an instance of this class.
IMPORTANT: if you are using Puppeteer in a Node environment, you will get an instance of [PuppeteerNode](./puppeteer.puppeteernode.md) when you import or require `puppeteer`<!-- -->. That class extends `Puppeteer`<!-- -->, so has all the methods documented below as well as all that are defined on [PuppeteerNode](./puppeteer.puppeteernode.md)<!-- -->.

<b>Signature:</b>

Expand All @@ -18,31 +18,14 @@ export declare class Puppeteer

The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the `Puppeteer` class.

## Example

The following is a typical example of using Puppeteer to drive automation:

```js
const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.google.com');
// other actions...
await browser.close();
})();

```
Once you have created a `page` you have access to a large API to interact with the page, navigate, or find certain elements in that page. The [\`page\` documentation](./puppeteer.page.md) lists all the available methods.

## Properties

| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [\_changedProduct](./puppeteer.puppeteer._changedproduct.md) | | boolean | |
| [\_isPuppeteerCore](./puppeteer.puppeteer._ispuppeteercore.md) | | boolean | |
| [devices](./puppeteer.puppeteer.devices.md) | | [DevicesMap](./puppeteer.devicesmap.md) | |
| [errors](./puppeteer.puppeteer.errors.md) | | [PuppeteerErrors](./puppeteer.puppeteererrors.md) | |
| [product](./puppeteer.puppeteer.product.md) | | string | The name of the browser that is under automation (<code>&quot;chrome&quot;</code> or <code>&quot;firefox&quot;</code>) |

## Methods

Expand All @@ -53,8 +36,4 @@ Once you have created a `page` you have access to a large API to interact with t
| [\_\_experimental\_registerCustomQueryHandler(name, queryHandler)](./puppeteer.puppeteer.__experimental_registercustomqueryhandler.md) | | Registers a [custom query handler](./puppeteer.customqueryhandler.md)<!-- -->. After registration, the handler can be used everywhere where a selector is expected by prepending the selection string with <code>&lt;name&gt;/</code>. The name is only allowed to consist of lower- and upper case latin letters. |
| [\_\_experimental\_unregisterCustomQueryHandler(name)](./puppeteer.puppeteer.__experimental_unregistercustomqueryhandler.md) | | |
| [connect(options)](./puppeteer.puppeteer.connect.md) | | This method attaches Puppeteer to an existing browser instance. |
| [createBrowserFetcher(options)](./puppeteer.puppeteer.createbrowserfetcher.md) | | |
| [defaultArgs(options)](./puppeteer.puppeteer.defaultargs.md) | | |
| [executablePath()](./puppeteer.puppeteer.executablepath.md) | | |
| [launch(options)](./puppeteer.puppeteer.launch.md) | | Launches puppeteer and launches a browser instance with given arguments and options when specified. |

29 changes: 29 additions & 0 deletions new-docs/puppeteer.puppeteernode.connect.md
@@ -0,0 +1,29 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [PuppeteerNode](./puppeteer.puppeteernode.md) &gt; [connect](./puppeteer.puppeteernode.connect.md)

## PuppeteerNode.connect() method

This method attaches Puppeteer to an existing browser instance.

<b>Signature:</b>

```typescript
connect(options: ConnectOptions): Promise<Browser>;
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| options | [ConnectOptions](./puppeteer.connectoptions.md) | Set of configurable options to set on the browser. |

<b>Returns:</b>

Promise&lt;[Browser](./puppeteer.browser.md)<!-- -->&gt;

Promise which resolves to browser instance.

## Remarks


@@ -1,8 +1,8 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [Puppeteer](./puppeteer.puppeteer.md) &gt; [createBrowserFetcher](./puppeteer.puppeteer.createbrowserfetcher.md)
[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [PuppeteerNode](./puppeteer.puppeteernode.md) &gt; [createBrowserFetcher](./puppeteer.puppeteernode.createbrowserfetcher.md)

## Puppeteer.createBrowserFetcher() method
## PuppeteerNode.createBrowserFetcher() method

<b>Signature:</b>

Expand Down
@@ -1,8 +1,8 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [Puppeteer](./puppeteer.puppeteer.md) &gt; [defaultArgs](./puppeteer.puppeteer.defaultargs.md)
[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [PuppeteerNode](./puppeteer.puppeteernode.md) &gt; [defaultArgs](./puppeteer.puppeteernode.defaultargs.md)

## Puppeteer.defaultArgs() method
## PuppeteerNode.defaultArgs() method

<b>Signature:</b>

Expand Down
@@ -1,8 +1,8 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [Puppeteer](./puppeteer.puppeteer.md) &gt; [executablePath](./puppeteer.puppeteer.executablepath.md)
[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [PuppeteerNode](./puppeteer.puppeteernode.md) &gt; [executablePath](./puppeteer.puppeteernode.executablepath.md)

## Puppeteer.executablePath() method
## PuppeteerNode.executablePath() method

<b>Signature:</b>

Expand Down
@@ -1,16 +1,16 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [Puppeteer](./puppeteer.puppeteer.md) &gt; [launch](./puppeteer.puppeteer.launch.md)
[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [PuppeteerNode](./puppeteer.puppeteernode.md) &gt; [launch](./puppeteer.puppeteernode.launch.md)

## Puppeteer.launch() method
## PuppeteerNode.launch() method

Launches puppeteer and launches a browser instance with given arguments and options when specified.

<b>Signature:</b>

```typescript
launch(options?: LaunchOptions & ChromeArgOptions & BrowserOptions & {
product?: string;
product?: Product;
extraPrefsFirefox?: Record<string, unknown>;
}): Promise<Browser>;
```
Expand All @@ -19,7 +19,7 @@ launch(options?: LaunchOptions & ChromeArgOptions & BrowserOptions & {

| Parameter | Type | Description |
| --- | --- | --- |
| options | [LaunchOptions](./puppeteer.launchoptions.md) &amp; [ChromeArgOptions](./puppeteer.chromeargoptions.md) &amp; [BrowserOptions](./puppeteer.browseroptions.md) &amp; { product?: string; extraPrefsFirefox?: Record&lt;string, unknown&gt;; } | Set of configurable options to set on the browser. |
| options | [LaunchOptions](./puppeteer.launchoptions.md) &amp; [ChromeArgOptions](./puppeteer.chromeargoptions.md) &amp; [BrowserOptions](./puppeteer.browseroptions.md) &amp; { product?: [Product](./puppeteer.product.md)<!-- -->; extraPrefsFirefox?: Record&lt;string, unknown&gt;; } | Set of configurable options to set on the browser. |

<b>Returns:</b>

Expand Down
59 changes: 59 additions & 0 deletions new-docs/puppeteer.puppeteernode.md
@@ -0,0 +1,59 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [PuppeteerNode](./puppeteer.puppeteernode.md)

## PuppeteerNode class

Extends the main [Puppeteer](./puppeteer.puppeteer.md) class with Node specific behaviour for fetching and downloading browsers.

If you're using Puppeteer in a Node environment, this is the class you'll get when you run `require('puppeteer')` (or the equivalent ES `import`<!-- -->).

<b>Signature:</b>

```typescript
export declare class PuppeteerNode extends Puppeteer
```
<b>Extends:</b> [Puppeteer](./puppeteer.puppeteer.md)
## Remarks
The most common method to use is [launch](./puppeteer.puppeteernode.launch.md)<!-- -->, which is used to launch and connect to a new browser instance.
See [the main Puppeteer class](./puppeteer.puppeteer.md) for methods common to all environments, such as [Puppeteer.connect()](./puppeteer.puppeteer.connect.md)<!-- -->.
The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the `PuppeteerNode` class.
## Example
The following is a typical example of using Puppeteer to drive automation:
```js
const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.google.com');
// other actions...
await browser.close();
})();

```
Once you have created a `page` you have access to a large API to interact with the page, navigate, or find certain elements in that page. The [\`page\` documentation](./puppeteer.page.md) lists all the available methods.
## Properties
| Property | Modifiers | Type | Description |
| --- | --- | --- | --- |
| [product](./puppeteer.puppeteernode.product.md) | | string | The name of the browser that is under automation (<code>&quot;chrome&quot;</code> or <code>&quot;firefox&quot;</code>) |
## Methods
| Method | Modifiers | Description |
| --- | --- | --- |
| [connect(options)](./puppeteer.puppeteernode.connect.md) | | This method attaches Puppeteer to an existing browser instance. |
| [createBrowserFetcher(options)](./puppeteer.puppeteernode.createbrowserfetcher.md) | | |
| [defaultArgs(options)](./puppeteer.puppeteernode.defaultargs.md) | | |
| [executablePath()](./puppeteer.puppeteernode.executablepath.md) | | |
| [launch(options)](./puppeteer.puppeteernode.launch.md) | | Launches puppeteer and launches a browser instance with given arguments and options when specified. |
@@ -1,8 +1,8 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [Puppeteer](./puppeteer.puppeteer.md) &gt; [product](./puppeteer.puppeteer.product.md)
[Home](./index.md) &gt; [puppeteer](./puppeteer.md) &gt; [PuppeteerNode](./puppeteer.puppeteernode.md) &gt; [product](./puppeteer.puppeteernode.product.md)

## Puppeteer.product property
## PuppeteerNode.product property

The name of the browser that is under automation (`"chrome"` or `"firefox"`<!-- -->)

Expand Down

0 comments on commit e655bb6

Please sign in to comment.