Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/rickypc/puppeteer-extra-plugin-angular

A plugin for puppeteer-extra with Angular synchronization support
https://github.com/rickypc/puppeteer-extra-plugin-angular
angular chrome functionality headless puppeteer puppeteer-extra puppeteer-extra-plugin support synchronization
Last synced: about 18 hours ago
JSON representation
A plugin for puppeteer-extra with Angular synchronization support
Host: GitHub
URL: https://github.com/rickypc/puppeteer-extra-plugin-angular
Owner: rickypc
License: agpl-3.0
Created: 2019-07-26T06:03:55.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2021-07-05T13:54:12.000Z (over 3 years ago)
Last Synced: 2024-12-16T07:18:50.028Z (about 1 month ago)
Topics: angular, chrome, functionality, headless, puppeteer, puppeteer-extra, puppeteer-extra-plugin, support, synchronization
Language: JavaScript
Homepage: https://www.npmjs.org/package/puppeteer-extra-plugin-angular
Size: 93.8 KB
Stars: 4
Watchers: 0
Forks: 0
Open Issues: 5
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project

README

        [![Version](https://img.shields.io/npm/v/puppeteer-extra-plugin-angular)](https://bit.ly/32X27uf)

[![Downloads](https://img.shields.io/npm/dt/puppeteer-extra-plugin-angular)](https://bit.ly/32X27uf)

[![Dependency Status](https://img.shields.io/david/rickypc/puppeteer-extra-plugin-angular)](https://bit.ly/2SM3Ygy)

[![Dev Dependency Status](https://img.shields.io/david/dev/rickypc/puppeteer-extra-plugin-angular)](https://bit.ly/30ZDj2P)

[![Code Style](https://img.shields.io/badge/code%20style-Airbnb-red)](https://bit.ly/2JYN1gk)

[![Build](https://img.shields.io/travis/rickypc/puppeteer-extra-plugin-angular)](https://bit.ly/2YuZRuH)

[![Coverage](https://img.shields.io/codecov/c/github/rickypc/puppeteer-extra-plugin-angular)](https://bit.ly/2Kb1F2Y)

[![Vulnerability](https://img.shields.io/snyk/vulnerabilities/github/rickypc/puppeteer-extra-plugin-angular)](https://bit.ly/2H0FHil)

[![Dependabot](https://api.dependabot.com/badges/status?host=github&repo=rickypc/puppeteer-extra-plugin-angular)](https://bit.ly/2KIM5vs)

[![License](https://img.shields.io/npm/l/puppeteer-extra-plugin-angular)](https://bit.ly/2yi7gyO)

Puppeteer Extra Plugin Angular

==============================

A plugin for [puppeteer-extra](https://bit.ly/2JYg8Aa) to provide [puppeteer](https://bit.ly/2JX4gOZ) functionality with [Angular](https://bit.ly/2Yw8Mw6) synchronization support on Angular pages.

It supports non-[Angular](https://bit.ly/2Yw8Mw6) pages starting on version 3.x.

Installation

-

```bash

$ npm install --save puppeteer-extra-plugin-angular

```

API Reference

-

Provide puppeteer functionality with Angular synchronization support.

**Extends**: external:PuppeteerExtraPlugin  

| Param | Type | Description |

| --- | --- | --- |

| opts | Object | Options |

**Example**  

```js

const puppeteer = require('puppeteer-extra');

puppeteer.use(require('puppeteer-extra-plugin-angular')());

(async () => {

  const configs = [

    {

      label: 'Email',

      selector: 'input.email',

      type: 'type',

      value: 'theEmail'

    },

    {

      label: 'Subscribe',

      selector: 'input.subscribe',

      type: 'check',

    },

    {

      label: 'Send',

      selector: 'button',

      type: 'click',

    },

  ];

  const data = {

    theEmail: '[email protected]',

  };

  const browser = await puppeteer.launch();

  const page = await browser.newPage();

  // Calling page.waitUntilActionReady internally.

  await page.navigateUntilReady('https://angular.io');

  await page.formFillOut(configs, data);

  // Calling page.waitUntilActionReady internally.

  await page.clickIfExists('a.link', 'A Link');

  await page.toggleUncheck('input.radio[value="1"]', 'Uncheck Radio');

  await page.toggleSelectByText('select1', 'Option 1', 'Selection');

  await page.toggleDeselectByText('select2', 'Option 2', 'Deselection');

  await page.toggleCheck('input.check', 'Checkbox');

  // Wait until both document.readyState is interactive or complete

  // and Angular is ready.

  await page.waitUntilActionReady();

  await page.typeIfExists('input.text', 'Something', 'Textfield');

  // Wait until Angular is ready.

  await page.waitUntilAngularReady();

  await page.close();

  await browser.close();

})();

```

* [puppeteer-extra-plugin-angular](#module_puppeteer-extra-plugin-angular) ⇐ external:PuppeteerExtraPlugin

    * _static_

        * [.Click](#module_puppeteer-extra-plugin-angular.Click)

            * [.ifExists(selector, [label], [timeout])](#module_puppeteer-extra-plugin-angular.Click.ifExists) ⇒ Promise.<boolean>

        * [.Form](#module_puppeteer-extra-plugin-angular.Form)

            * [.fillOut(configs, [data])](#module_puppeteer-extra-plugin-angular.Form.fillOut) ⇒ Promise.<void>

        * [.Navigate](#module_puppeteer-extra-plugin-angular.Navigate)

            * [.untilReady(url, [timeout])](#module_puppeteer-extra-plugin-angular.Navigate.untilReady) ⇒ Promise.<void>

        * [.Toggle](#module_puppeteer-extra-plugin-angular.Toggle)

            * [.check(selector, [label])](#module_puppeteer-extra-plugin-angular.Toggle.check) ⇒ Promise.<boolean>

            * [.deselectByText(selector, values, [label])](#module_puppeteer-extra-plugin-angular.Toggle.deselectByText) ⇒ Promise.<boolean>

            * [.selectByText(selector, values, [label])](#module_puppeteer-extra-plugin-angular.Toggle.selectByText) ⇒ Promise.<boolean>

            * [.uncheck(selector, [label])](#module_puppeteer-extra-plugin-angular.Toggle.uncheck) ⇒ Promise.<boolean>

        * [.Type](#module_puppeteer-extra-plugin-angular.Type)

            * [.ifExists(selector, value, [label])](#module_puppeteer-extra-plugin-angular.Type.ifExists) ⇒ Promise.<boolean>

        * [.Wait](#module_puppeteer-extra-plugin-angular.Wait)

            * [.untilActionReady([timeout])](#module_puppeteer-extra-plugin-angular.Wait.untilActionReady) ⇒ Promise.<void>

            * [.untilAngularReady([timeout])](#module_puppeteer-extra-plugin-angular.Wait.untilAngularReady) ⇒ Promise.<void>

    * _inner_

        * [~Logger](#module_puppeteer-extra-plugin-angular.Logger)

            * [.debug(...args)](#module_puppeteer-extra-plugin-angular.Logger+debug) ⇒ null

            * [.debugAndReturn(response, ...args)](#module_puppeteer-extra-plugin-angular.Logger+debugAndReturn) ⇒ \*



### puppeteer-extra-plugin-angular.Click

**Kind**: static constant of [puppeteer-extra-plugin-angular](#module_puppeteer-extra-plugin-angular)  



#### Click.ifExists(selector, [label], [timeout]) ⇒ Promise.<boolean>

Trigger Click event if given selector exists and wait for Angular to be ready.

**Kind**: static method of [Click](#module_puppeteer-extra-plugin-angular.Click)  

**Returns**: Promise.<boolean> - Truthy if click triggered and Angular is ready, otherwise falsy.  

| Param | Type | Default | Description |

| --- | --- | --- | --- |

| selector | string |  | Selector to match. |

| [label] | string | "click" | Debug label. |

| [timeout] | number | 25000 | Maximum wait timeout. |

**Example**  

```js

const response = await page.clickIfExists('a[href="/"]', 'Some Link', 5000);

```



### puppeteer-extra-plugin-angular.Form

**Kind**: static constant of [puppeteer-extra-plugin-angular](#module_puppeteer-extra-plugin-angular)  



#### Form.fillOut(configs, [data]) ⇒ Promise.<void>

Fill out the form's field on given configs and data.

**Kind**: static method of [Form](#module_puppeteer-extra-plugin-angular.Form)  

**Returns**: Promise.<void> - Promise to be resolved once the form filled out.  

| Param | Type | Default | Description |

| --- | --- | --- | --- |

| configs | Array.<Object> |  | An array of field configs. |

| [configs[].defaultValue] | string | null | Default value. |

| configs[].label | string |  | Debug label. |

| configs[].selector | string |  | Selector to match. |

| configs[].type | check \| click \| deselect-text \| select-text \| type \| uncheck |  | Action type. |

| configs[].value | string |  | JmesPath expression of the given data. |

| [data] | Object | {} | Data to be used to fill out the form. |

**Example**  

```js

const configs = [

  {

    label: 'Name',

    selector: 'input.name',

    type: 'type',

    value: 'theName'

  },

  {

    label: 'Company',

    selector: 'input.company',

    type: 'type',

    value: 'theCompany'

  },

];

const data = {

  theCompany: 'My Company',

  theName: 'My Name',

};

await page.formFillOut(configs, data);

```



### puppeteer-extra-plugin-angular.Navigate

**Kind**: static constant of [puppeteer-extra-plugin-angular](#module_puppeteer-extra-plugin-angular)  



#### Navigate.untilReady(url, [timeout]) ⇒ Promise.<void>

Navigate to given url and wait for Angular to be ready.

**Kind**: static method of [Navigate](#module_puppeteer-extra-plugin-angular.Navigate)  

**Returns**: Promise.<void> - Promise to be resolved once the navigation is completed.  

| Param | Type | Default | Description |

| --- | --- | --- | --- |

| url | string |  | Target URL. |

| [timeout] | number | 25000 | Maximum wait timeout. |

**Example**  

```js

await page.navigateUntilReady('https://angular.io', 5000);

```



### puppeteer-extra-plugin-angular.Toggle

**Kind**: static constant of [puppeteer-extra-plugin-angular](#module_puppeteer-extra-plugin-angular)  

* [.Toggle](#module_puppeteer-extra-plugin-angular.Toggle)

    * [.check(selector, [label])](#module_puppeteer-extra-plugin-angular.Toggle.check) ⇒ Promise.<boolean>

    * [.deselectByText(selector, values, [label])](#module_puppeteer-extra-plugin-angular.Toggle.deselectByText) ⇒ Promise.<boolean>

    * [.selectByText(selector, values, [label])](#module_puppeteer-extra-plugin-angular.Toggle.selectByText) ⇒ Promise.<boolean>

    * [.uncheck(selector, [label])](#module_puppeteer-extra-plugin-angular.Toggle.uncheck) ⇒ Promise.<boolean>



#### Toggle.check(selector, [label]) ⇒ Promise.<boolean>

Check the checkbox or radio button field.

**Kind**: static method of [Toggle](#module_puppeteer-extra-plugin-angular.Toggle)  

**Returns**: Promise.<boolean> - Truthy if the field is checked, otherwise falsy.  

| Param | Type | Default | Description |

| --- | --- | --- | --- |

| selector | string |  | Selector to match. |

| [label] | string | "toggle" | Debug label. |

**Example**  

```js

const response = await page.toggleCheck('input.checkbox', 'Some Checkbox');

```



#### Toggle.deselectByText(selector, values, [label]) ⇒ Promise.<boolean>

Deselect given values from the select field options.

**Kind**: static method of [Toggle](#module_puppeteer-extra-plugin-angular.Toggle)  

**Returns**: Promise.<boolean> - Truthy if the given values are deselected, otherwise falsy.  

| Param | Type | Default | Description |

| --- | --- | --- | --- |

| selector | string |  | Selector to match. |

| values | Array |  | A list of value to be deselected from the select field. |

| [label] | string | "toggle" | Debug label. |

**Example**  

```js

const response = await page.toggleDeselectByText('select.by-text',

  'Some Option', 'Some Select');

```



#### Toggle.selectByText(selector, values, [label]) ⇒ Promise.<boolean>

Select given values from the select field options.

**Kind**: static method of [Toggle](#module_puppeteer-extra-plugin-angular.Toggle)  

**Returns**: Promise.<boolean> - Truthy if the given values are selected, otherwise falsy.  

| Param | Type | Default | Description |

| --- | --- | --- | --- |

| selector | string |  | Selector to match. |

| values | Array |  | A list of value to be selected from the select field. |

| [label] | string | "toggle" | Debug label. |

**Example**  

```js

const response = await page.toggleSelectByText('select.by-text',

  'Some Other Option', 'Some Select');

```



#### Toggle.uncheck(selector, [label]) ⇒ Promise.<boolean>

Uncheck the checkbox or radio button field.

**Kind**: static method of [Toggle](#module_puppeteer-extra-plugin-angular.Toggle)  

**Returns**: Promise.<boolean> - Truthy if the field is unchecked, otherwise falsy.  

| Param | Type | Default | Description |

| --- | --- | --- | --- |

| selector | string |  | Selector to match. |

| [label] | string | "toggle" | Debug label. |

**Example**  

```js

const response = await page.toggleUncheck('input.checkbox', 'Some Checkbox');

```



### puppeteer-extra-plugin-angular.Type

**Kind**: static constant of [puppeteer-extra-plugin-angular](#module_puppeteer-extra-plugin-angular)  



#### Type.ifExists(selector, value, [label]) ⇒ Promise.<boolean>

Fill out the field on given selector with given value.

**Kind**: static method of [Type](#module_puppeteer-extra-plugin-angular.Type)  

**Returns**: Promise.<boolean> - Truthy if the field is filled out, otherwise falsy.  

| Param | Type | Default | Description |

| --- | --- | --- | --- |

| selector | string |  | Selector to match. |

| value | string |  | Value to be used to fill out the field. |

| [label] | string | "'type'" | Debug label. |

**Example**  

```js

const response = await page.typeIfExists('input.email', '[email protected]', 'Email');

```



### puppeteer-extra-plugin-angular.Wait

**Kind**: static constant of [puppeteer-extra-plugin-angular](#module_puppeteer-extra-plugin-angular)  

* [.Wait](#module_puppeteer-extra-plugin-angular.Wait)

    * [.untilActionReady([timeout])](#module_puppeteer-extra-plugin-angular.Wait.untilActionReady) ⇒ Promise.<void>

    * [.untilAngularReady([timeout])](#module_puppeteer-extra-plugin-angular.Wait.untilAngularReady) ⇒ Promise.<void>



#### Wait.untilActionReady([timeout]) ⇒ Promise.<void>

Wait until both page and Angular is ready.

**Kind**: static method of [Wait](#module_puppeteer-extra-plugin-angular.Wait)  

**Returns**: Promise.<void> - Promise to be resolved once the wait is completed.  

| Param | Type | Default | Description |

| --- | --- | --- | --- |

| [timeout] | number | 25000 | Maximum wait timeout. |

**Example**  

```js

await page.waitUntilActionReady(5000);

```



#### Wait.untilAngularReady([timeout]) ⇒ Promise.<void>

Wait until Angular is ready.

**Kind**: static method of [Wait](#module_puppeteer-extra-plugin-angular.Wait)  

**Returns**: Promise.<void> - Promise to be resolved once the wait is completed.  

| Param | Type | Default | Description |

| --- | --- | --- | --- |

| [timeout] | number | 25000 | Maximum wait timeout. |

**Example**  

```js

await page.waitUntilAngularReady(5000);

```



### puppeteer-extra-plugin-angular~Logger

**Kind**: inner class of [puppeteer-extra-plugin-angular](#module_puppeteer-extra-plugin-angular)  

* [~Logger](#module_puppeteer-extra-plugin-angular.Logger)

    * [.debug(...args)](#module_puppeteer-extra-plugin-angular.Logger+debug) ⇒ null

    * [.debugAndReturn(response, ...args)](#module_puppeteer-extra-plugin-angular.Logger+debugAndReturn) ⇒ \*



#### logger.debug(...args) ⇒ null

Process debug information if it is not negligible messages.

**Kind**: instance method of [Logger](#module_puppeteer-extra-plugin-angular.Logger)  

**Returns**: null - Null value.  

| Param | Type | Description |

| --- | --- | --- |

| ...args | \* | Debug arguments. |

**Example**  

```js

const logger = new Logger('module:namespace');

const response = await logger.debug('debug message %s', Error('error'));

```



#### logger.debugAndReturn(response, ...args) ⇒ \*

Process debug information if it is not negligible messagesi and return response value.

**Kind**: instance method of [Logger](#module_puppeteer-extra-plugin-angular.Logger)  

**Returns**: \* - Given response value.  

| Param | Type | Description |

| --- | --- | --- |

| response | \* | Response value. |

| ...args | \* | Debug arguments. |

**Example**  

```js

const logger = new Logger('module:namespace');

const response = await logger.debugAndReturn(true, 'debug message %s', Error('error'));

```

Development Dependencies

-

You will need to install [Node.js](https://bit.ly/2SMCGXK) as a local development dependency. The `npm` package manager comes bundled with all recent releases of `Node.js`.

`npm install` will attempt to resolve any `npm` module dependencies that have been declared in the project’s `package.json` file, installing them into the `node_modules` folder.

```bash

$ npm install

```

Run Linter

-

To make sure we followed code style best practice, run:

```bash

$ npm run lint

```

Run Unit Tests

-

To make sure we did not break anything, let's run:

```bash

$ npm test

```

Contributing

-

If you would like to contribute code to Puppeteer Extra Plugin Angular repository you can do so

through GitHub by forking the repository and sending a pull request.

If you do not agree to [Contribution Agreement](CONTRIBUTING.md), do not

contribute any code to Puppeteer Extra Plugin Angular repository.

When submitting code, please make every effort to follow existing conventions

and style in order to keep the code as readable as possible. Please also include

appropriate test cases.

That's it! Thank you for your contribution!

License

-

Copyright (c) 2018 - 2020 Richard Huang.

This plugin is free software, licensed under: [GNU Affero General Public License (AGPL-3.0)](https://bit.ly/2yi7gyO).

Documentation and other similar content are provided under [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](https://bit.ly/2SMCRlS).